[[397344]]

【51CTO.com快譯】您是否經歷過編寫代碼的困惑?您的代碼庫是否存在著前后不一致的現象?在每次審核代碼時，您是否會感到焦慮?如果您對這些問題的任何一項回答為“是”的話，那么靜態代碼分析應該能夠為您提供幫助。

所謂靜態代碼分析，是指在執行代碼之前，對其進行分析的過程。通過集成靜態代碼分析器，開發人員可以優化整個工作流程。

本文將向您介紹什么是JavaScript靜態代碼分析，為什么要使用它，以及如何在項目中通過快速設置來實現它。

什么是靜態代碼分析?

顧名思義，靜態代碼分析是對處于靜態、或非執行狀態的代碼進行分析。它在效果上等同于讓另一名開發人員去閱讀和審查您的代碼。當然，其效率可能不及自動化工具。

與測試有何不同?

無論是單元測試、功能測試、集成測試、視覺測試、還是回歸測試，所有這些類型的測試都是通過運行代碼，將結果與已知的預期輸出狀態進行比較，以檢查是否一切正常。可以說，測試是將您的代碼視為黑盒子，通過為其提供輸入，來驗證執行后的輸出，以確保代碼能夠按照預期運行。

然而，靜態代碼分析主要是針對程序代碼的可讀性、一致性、錯誤處理、類型檢查、以及縮進排版等方面進行分析。可以說，靜態分析并非關注代碼能否提供預期的輸出，而是關注代碼本身的編寫方式。它是對源代碼質量(而非功能性)的分析。

總而言之，測試著眼于檢查代碼是否有效，而靜態分析則會檢查代碼是否編寫正確。在理想情況下，您應該在項目中，讓測試和靜態分析相輔相成。

為什么要使用靜態代碼分析?

從程序格式化小工具，到漏洞掃描器，甚至程序審查器，任何能夠讀取源代碼，對其進行解析，并提出改進建議的工具，都屬于靜態代碼分析器。下面，讓我們看看有哪些工作場景會用到靜態代碼分析。

全面審查

人是會犯錯的。據統計，只有15%的JSHint(一種流行的JavaScript代碼審查工具)代碼庫的安裝過程，能夠順利通過。正所謂“當局者迷，旁觀者清”，“第二雙眼睛”往往可以發現您在自己的代碼中，那些永遠不會察覺到的問題。據此，開發人員不但可以了解項目中的某些內置功能，而且能夠提出更好、更便捷的實現方法。

那么，我們是否能引入更多的“眼睛”、更全面的“掃描”呢?通常，靜態分析器是由龐大的開源社區提供支持的。這就意味著，所有為該工具做出貢獻的人，都可以間接地檢查了您的代碼，以發現任何遺漏的錯誤。

例子：

如下代碼段展示了一個讓用戶挑選水果的例子。如果用戶不做選擇，則默認為“Mango”。

let fruits = ['Apple', 'Banana', 'Cherry', 'Mango'] 
function getFruit(index) { 
    index = index || 3 // Everybody likes mangoes 
    return fruits[index] 
} 

只要用戶的輸入不為0，那么各種測試都能順利通過。

getFruit()  // Mango 
getFruit(2) // Cherry 
getFruit(0) // Mango (expected Apple!) 

而由于0的存在，用戶無法選擇Apple。因此針對null和undefined之類的虛假值(falsy value)，您應該改用null-coalescing(空值合并)運算符--??(請參見如下代碼段)。

let fruits = ['Apple', 'Banana', 'Cherry', 'Mango'] 
 
function getFruit(index) { 
 
index = index ?? 3 // Everybody likes mangoes 
 
return fruits[index] 
 
} 

風格統一

每個開發人員都可以采用自己的風格去編寫代碼。但是，在許多開發人員需要協同工作時，通過風格指南的一致性來約束大家的編程，就顯得極為重要了。不過，我們不可能要求開發人員記住指南中的數百條規則，并依靠人工進行逐行對照與檢查。因此，我們需要依靠自動化來完成。

每一種語言都有自己的代碼校驗器(lint)，例如：JavaScript有ESLint(https://eslint.org/)、Python有Black(https://black.readthedocs.io/en/stable/)、而Ruby有RuboCop(https://github.com/rubocop-hq/rubocop)。這些校驗器可以確保您的代碼遵循相關的風格規則，進而讓代碼更加整潔。例如，RuboCop便可以通過檢測和修復錯誤，以確保函數與變量名具有更好的原子一致性。

例子：

如下JavaScript代碼段，旨在從列表中打印水果的名稱。同時，該列表在整個程序中應保持不變。

var fruits = ['Apple', 'Banana', 'Cherry', 'Mango'] 
console.log(fruits[0]) 

通過配置，ESLint可以確保盡可能地使用常量，以避免對代碼產生副作用。

const fruits = ['Apple', 'Banana', 'Cherry', 'Mango'] 
console.log(fruits[0]) 

如上述代碼所示，倘若我們用let和const兩個關鍵字來替換var，則會讓代碼更加易于調試。

立即發現問題

以測試為驅動的開發實踐，往往強調編寫各種用于測試的用例。但是，為了盡可能地覆蓋所有輸入，開發人員需要花費時間和精力去編寫測試用例。最終，測試用例不但十分臃腫，而且需要花費數小時，才能完成大型代碼庫的構建。

而靜態代碼分析器則不會遇到此類問題。您不需要編寫測試用例，即可導入整個預設的代碼庫。同時，由于無需執行代碼，因此靜態分析器的運行速度會更快。實際上，許多代碼校驗器都能夠與代碼編輯器相集成，并在您輸入代碼時，實時地突顯代碼中的問題。

例子： 

大多數靜態分析器，尤其是linters和formatter，不僅會指出代碼問題，而且可以解決問題。同時，諸如Python的Black和JavaScript的ESLint還能夠與IDE相集成。在用戶保存代碼時，它們便可以自動修復當前已編輯的文件。這種實時提高代碼質量的方式，已廣受開發者的歡迎。

例子：

ESLint帶有一個可用來修復常見問題的參數—fix，可用來修復：不必要的分號、尾部空格、以及多余的逗號。在如下代碼段中，一個·代表著一個空格。

var fruits = [ 
    'Apple', 
  'Banana', 
  'Cherry',·· 
    'Mango' 
]; 

而在運行了帶有—fix的ESLint后，代碼會變成：

const fruits = [ 
    'Apple', 
    'Banana', 
    'Cherry', 
    'Mango', 
] 

修復依賴項

在構建應用程序時，您不可避免地會用到由其他開發人員所構建的框架和工具。當然，其他開發人員也可能會用到更多第三方的框架。如此下去，就算是一個簡單的Vue.js應用，也可能在其node_modules/的目錄中，被放置了成千上萬個軟件包。

然而，在這種“疊羅漢”式的依賴鏈中，您的應用程序會受到最薄弱的依賴性的制約。而作為另一種靜態分析器的漏洞掃描程序，正好可以通過強大的漏洞簽名數據庫的優勢，對依賴關系樹中的每個依賴項進行檢查。而所有被發現的漏洞，都能夠被掃描程序通過一條命令，來予以更新和修復。

例子：

GitHub會使用Dependabot來掃描依賴項。而npm會使用npm audit命令來掃描漏洞。Dependabot和npm audit在它們的新版本中，都提供了帶有自動化漏洞修復功能的更新包。

自動化重復性事務

相對于繁瑣地手動遍歷與審查代碼，各種linter、formatters、以及拼寫檢查器(spell checkers)能夠大幅簡化整個過程。那么它們又是怎么實現的呢?首先，預提交的鉤子(pre-commit hook)將確保在檢入VCS(版本控制系統)之前，對代碼已進行校驗和格式化。其次，構建管道或GitHub工作流形式的項目級自動化，會在每次提交時檢測代碼的質量，并突顯代碼自身的問題。最后，由于代碼的各種小問題已經被處理了，因此審查人員可以去關注代碼邏輯等其他問題。可見，軟件自動化不但可以減少人工的工作量，還能夠提高審查的速度，以及遍歷的覆蓋率。

項目示例

下面，讓我們來逐步創建一個項目示例。首先，我們為項目創建一個新的目錄。在該目錄中，我們通過npm init向導(如下圖所示)，逐步完成Node.js包的初始化。

$ mkdir wuphf.com 
$ cd wuphf.com 
$ npm init 

我們使用如下簡單的命令來安裝ESLint。

$ npm install eslint 

我們運行如下命令，來激活ESLint向導。

$ ./node_modules/.bin/eslint --init 

該向導會通過與您的互動，完成在項目中如何使用ESLint的相關問題。此本例中，請選擇Airbnb的規則集。在完成設置后，該目錄中將出現一個.eslintrc.js的文件。

下面的代碼段展示了一個控制臺應用。在此，我們可以自定義規則，并關閉針對它的各種警告。

module.exports = { 
  env: { 
    es2021: true, 
    node: true, 
  }, 
  extends: [ 
    'airbnb-base', 
  ], 
  parserOptions: { 
    ecmaVersion: 12, 
  }, 
  overrides: [ 
        { 
      files: ['*.js'], 
      rules: { 
        'no-console': 'off', 
      }, 
    }, 
    ], 
}; 

最后，我們將此文件提交到版本控制系統中，以便ESLint持續掃描項目中的所有JS文件。此外，我建議您通過安裝Husky(https://typicode.github.io/husky/#/)，以實現在每次提交之前，運行一次代碼校驗的作業，以保證不會有不良的代碼被檢入VCS中。

使用DeepSource來實現自動化

作為一個靜態代碼分析器，DeepSource(https://deepsource.io/)可以在代碼庫中查找問題，并自動修復它們。目前，它可以支持大多數主流編程語言，并能夠集成到GitHub、GitLab和Bitbucket中。為了在項目中設置DeepSource，您可以將名為.deepsource.toml的文件放置在存儲庫的根目錄中，以便對項目進行持續掃描。

原文標題：Beginner's Guide to JavaScript Static Code Analysis，作者：Dhruv Bhanushali

【51CTO譯稿，合作站點轉載請注明原文譯者和出處為51CTO.com】