[[397344]]

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

所謂靜態(tài)代碼分析，是指在執(zhí)行代碼之前，對其進行分析的過程。通過集成靜態(tài)代碼分析器，開發(fā)人員可以優(yōu)化整個工作流程。

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

什么是靜態(tài)代碼分析?

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

與測試有何不同?

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

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

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

為什么要使用靜態(tài)代碼分析?

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

全面審查

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

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

例子：

如下代碼段展示了一個讓用戶挑選水果的例子。如果用戶不做選擇，則默認為“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)，您應(yīng)該改用null-coalescing(空值合并)運算符--??(請參見如下代碼段)。

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

風格統(tǒng)一

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

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

例子：

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

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

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

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

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

立即發(fā)現(xiàn)問題

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

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

例子： 

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

例子：

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

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

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

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

修復(fù)依賴項

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

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

例子：

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

自動化重復(fù)性事務(wù)

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

項目示例

下面，讓我們來逐步創(chuàng)建一個項目示例。首先，我們?yōu)轫椖縿?chuàng)建一個新的目錄。在該目錄中，我們通過npm init向?qū)?如下圖所示)，逐步完成Node.js包的初始化。

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

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

$ npm install eslint 

我們運行如下命令，來激活ESLint向?qū)А?/p>

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

該向?qū)ㄟ^與您的互動，完成在項目中如何使用ESLint的相關(guān)問題。此本例中，請選擇Airbnb的規(guī)則集。在完成設(shè)置后，該目錄中將出現(xiàn)一個.eslintrc.js的文件。

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

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

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

使用DeepSource來實現(xiàn)自動化

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

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

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