[[397344]]

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

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

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

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

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

與測試有何不同?

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

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

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

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

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

全面審查

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

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

例子：

如下代碼段展示了一個讓用戶挑選水果的例子。如果用戶不做選擇，則默認(rè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(空值合并)運(yùn)算符--??(請參見如下代碼段)。

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

風(fēng)格統(tǒng)一

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

每一種語言都有自己的代碼校驗(yàn)器(lint)，例如：JavaScript有ESLint(https://eslint.org/)、Python有Black(https://black.readthedocs.io/en/stable/)、而Ruby有RuboCop(https://github.com/rubocop-hq/rubocop)。這些校驗(yàn)器可以確保您的代碼遵循相關(guān)的風(fēng)格規(guī)則，進(jìn)而讓代碼更加整潔。例如，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ā)實(shí)踐，往往強(qiáng)調(diào)編寫各種用于測試的用例。但是，為了盡可能地覆蓋所有輸入，開發(fā)人員需要花費(fèi)時間和精力去編寫測試用例。最終，測試用例不但十分臃腫，而且需要花費(fèi)數(shù)小時，才能完成大型代碼庫的構(gòu)建。

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

例子： 

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

例子：

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

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

而在運(yùn)行了帶有—fix的ESLint后，代碼會變成：

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

修復(fù)依賴項(xiàng)

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

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

例子：

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

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

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

項(xiàng)目示例

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

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

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

$ npm install eslint 

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

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

該向?qū)ㄟ^與您的互動，完成在項(xiàng)目中如何使用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ù)掃描項(xiàng)目中的所有JS文件。此外，我建議您通過安裝Husky(https://typicode.github.io/husky/#/)，以實(shí)現(xiàn)在每次提交之前，運(yùn)行一次代碼校驗(yàn)的作業(yè)，以保證不會有不良的代碼被檢入VCS中。

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

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

原文標(biāo)題：Beginner's Guide to JavaScript Static Code Analysis，作者：Dhruv Bhanushali

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