使用 Eslint & standard 規範前端代碼

前言

JavaScript的動態語言類型，給它帶來了獨特的魅力，產生了風格多樣的開發範式，同時也帶來了一些問題，從運行時常見的 undefined 、null 報錯，到代碼隨意的加減分號、換行、空格，引發的視覺混亂，若是是團隊開發，則這種狀況會更加的嚴重，必須加以約束，下文介紹基於 vue 的代碼嚴格模式及編程規範。

 

核心插件：  Eslint +  standard

Eslint 是什麼？

ESLint最初是由Nicholas C. Zakas 於2013年6月建立的開源項目。它的目標是提供一個插件化的javascript代碼檢測工具。與它相似的項目有 JSLint、JSHint。

 

使用 ESLint 能夠保證代碼的一致性和避免錯誤，接下來介紹 ESLint 的使用。

ESLint 的安裝與配置

1、vue-cli3 初始化引入ESLint

若是是用 vue-cli3 初始化搭建項目，能夠在命令行中執行 vue ui 打開vue-cli3 新增的圖形化界面，以建立和管理項目；默認是配置了 babel + eslint ，也能夠手動執行項目配置以引入更多特性，如router、vuex 、scss、typescript、unit測試、e2e測試;

 

若是是後期引入 ESLint，則須要手動安裝下圖所示的幾個與 ESLint 相關的插件，安裝指令爲

vue add @vue/eslint

提示: vue add 的設計意圖是爲了安裝和調用 Vue CLI 插件。對於普通的 npm 包而言，這不意味有一個替代（命令）。對於這些普通的 npm 包，你仍然須要（根據所選的 npm 包）使用包管理器。

 

vue add @eslint 會依次執行安裝和調用兩條命令，並智能生成須要的配置文件，可能會修改項目當前文件內容，因此在運行 vue add 前，須要先保存提交下項目當前狀態；vue add 的好處在於，能夠調用 vue cli 插件，好比我只是執行了 vue add @vue/eslint 一條指令，安裝後根據命令行的提示，會幫助你匹配安裝剩下的全部 eslint 配置，而不須要本身再一條條安裝了。

 

安裝完成後，能夠在根目錄發現多了一個 .eslintrc.js 文件，這是 eslint 的配置文件，能夠配置自定義規則（rules）等。

 

2、通用項目引入 ESLint

若是項目不是基於vue-cli3 或者 vue，則須要以 npm 包管理器安裝 eslint，安裝完成後在 ./node_modules/.bin/ 目錄下執行 eslint --init 命令，根據指引生成所需的 eslint 配置方案；這裏能夠選擇應用於 vue 或者其它例如 react 項目。

 

npm install eslint --save-dev   // 安裝並保存到項目開發依賴
./node_modules/.bin/eslint -- --init // 初始化命令

 

 

安裝完成後，能夠在 package.json 的 script 中配置 lint 命令，以執行eslint 校驗。

 

"lint": "vue-cli-service lint" //基於vue-cli3
"lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs" // 非vue-cli3　

編碼規範 Standard 的安裝與使用

應用了 ESLint 後，一般是須要本身來配置繁雜的 rules 規則，這也是一個喜愛類的東西，多數人是不肯意在這上面耗費太多精力的（好比手動配置數百個ESLint 規則），因而github 上出現了一些開源的代碼規範庫，比較流行的有 airbnb、standard、prettier等，下面介紹下 standard

 

在 vue 中的使用方式:

在 vue 中一般須要和 ESLint 一塊兒使用，上面講到 ESLint 時候有注意到麼，ESLint 初始化指令中有一個選擇開源編碼規範的指令，系統默認是有 standard 的選項的，直接選擇就能夠了。

 

常見問題

一、配置了 ESLint + standard 可是不生效?

在項目根目錄裏找到 .eslintrc.js 文件，注意 extends 和 plugins 屬性是否配置，下圖的extends 表明 ESLint 繼承了standard 的編碼規範。

 

二、只是 .js 文件生效了， .vue 文件沒有效果 ？

.vue 文件的校驗，須要注意你的 package.json 是否安裝了 eslint-plugin-html 插件，而且在 .eslintrc.js 中配置了 plugins；

 

若是是用 vscode 編輯器開發，需安裝 ESLint、Vetur 這兩個 vscode 插件，並在 設置 =》 settings.json 文件中添加如下配置，而後重啓下 vscode，便可生效。

 

"files.associations": {
    "*.vue": "vue"
},
"eslint.autoFixOnSave": true,
"eslint.validate": [
    "javascript",
    "javascriptreact",
    {
        "language": "vue",
        "autoFix": true
    },"html","vue"
]

　　

三、配置了 standard 後，還能自定義 rules 嗎？

standard 自己是不同意這樣作的，若是你必定要使用 standard 並須要對其中某些規則進行自定義的話，你須要使用 eslint-config-standard，固然， 在上面咱們執行的 ESLint init 指令安裝的配置中，就是以這種形式使用standard 的。

 

總結

本文介紹了用於前端編碼規範、代碼質量管理的幾個開源方案，搭建了基於 vue 的 ESLint + standard 方案，及對實際使用當中可能遇到的問題，進行了記錄。

 

參考連接

一、 VSCode環境下配置ESLint 對Vue單文件的檢測