前言:
本章內容,我們在項目中加入eslint配置,來審查校驗代碼,這樣能夠避免一些比較低級的錯誤。並且在團隊協作的時候,保持同一種風格和規範能提高代碼的可讀性,進而提高我們的工作效率。
安裝:
eslint-config-standard 是一種較爲成熟通用的代碼審查規則,這樣就不用我們自己去定義規則了,使用起來非常方便,記住還需要安裝一些依賴插件:
npm install --save-dev eslint eslint-config-standard eslint-plugin-standard eslint-plugin-promise eslint-plugin-import eslint-plugin-node
配置:
在項目根目錄下創建 .eslintrc 文件:
{
"extends": "standard",
"rules": {
"no-new": "off"
}
}
在vue項目中,.vue文件中的 script標籤內的代碼,eslint 是無法識別的,這時就需要使用插件: eslint-plugin-html
npm i eslint-plugin-html -D
然後在 .eslintrc 中配置該插件:
{
"extends": "standard",
"plugins": [
"html"
],
"rules": {
"no-new": "off"
}
}
這樣就能解析 .vue文件中的JS代碼了,官方也是如此推薦。
使用:
配置完成,如何使用呢?
在 package.json 文件中添加一條 script:
"scripts": {
"build": "cross-env NODE_ENV=production webpack --config config/webpack.config.js --progress --inline --colors",
"lint": "eslint --ext .js --ext .vue src/"
}
- -ext 代表需要解析的文件格式,最後接上文件路徑,由於我們的主要代碼都在src 目錄下,這裏就配置 src 文件夾。
npm run lint
可見控制檯給出了很多錯誤:
在項目前期沒有加入eslint的情況下,後期加入必然會審查出許多錯誤。出現這麼多錯誤之後,如果我們逐條手動去解決會非常耗時,此時可以藉助eslint自動修復,方法也很簡單。
只需要添加一條命令即可:
"scripts": {
"build": "cross-env NODE_ENV=production webpack --config config/webpack.config.js --progress --inline --colors",
"lint": "eslint --ext .js --ext .vue src/",
"lint-fix": "eslint --fix --ext .js --ext .jsx --ext .vue src/"
}
然後執行
npm run lint-fix
我們希望在開發過程中能夠實時進行eslint代碼審查,需要安裝兩個依賴:
npm i eslint-loader babel-eslint -D
修改 .eslintrc:
{
"extends": "standard",
"plugins": [
"html"
],
"rules": {
"no-new": "off"
},
"parserOptions":{
"parser": "babel-eslint"
}
}
由於我們的項目使用了webpack並且代碼都是經過Babel編譯的,但是Babel處理過的代碼有些語法可能對於eslint支持性不好,所以需要指定一個 parser。
下一步,在webpack.config.js中添加loader:
{
test: /\.(vue|js)$/,
loader: 'eslint-loader',
exclude: /node_modules/,
enforce: 'pre'
}
enforce: 'pre' 表示預處理,因爲我們只是希望eslint來審查我們的代碼,並不是去改變它,在真正的loader(比如:vue-loader)發揮作用前用eslint去檢查代碼。
記得在你的IDE中安裝並開啓eslint插件功能,這樣就會有錯誤提示了。
比如:
圖中的錯誤是未使用的變量。
editorconfig:
editorconfig是用來規範我們的IDE配置的,在根目錄創建 .editorconfig文件:
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true
這樣就能在各種IDE使用相同的配置了。
同樣需要在IDE中安裝editorconfig插件
以上就是eslint的配置方法了。
本人才疏學淺,如有不當之處,歡迎批評指正