ESlint-菜鳥入門

當我第一次使用ESlint的時候，簡直是個災難 沒錯！一次執行，處處報錯，令我苦不堪言
我在想，怎麼回事呢，有人能記住這麼多規則規範來進行編碼，那簡直是太棒了
很明顯，菜鳥有時候就是這麼天真...
本文使用Vue相關技術棧

新建Eslint配置檔案

//.eslintrc 
{
  "extends": "standard",
  "plugins": [
    "html" //Vue的檔案格式類似於html 需引入eslint-plugin-html 幫助解析
  ]
}
複製程式碼

安裝相應依賴項

// package.json
  "eslint": "^4.16.0",
  "eslint-config-standard": "^11.0.0-beta.0",
  "eslint-loader": "^1.9.0",
  "eslint-plugin-html": "^4.0.1",
  "eslint-plugin-import": "^2.8.0",
  "eslint-plugin-node": "^5.2.1",
  "eslint-plugin-promise": "^3.6.0",
  "eslint-plugin-standard": "^3.0.1"
  
  // package.json
  "lint": "eslint --ext .js --ext .jsx --ext .vue client/",
  "lint-fix": "eslint --fix --ext .js --ext .jsx --ext .vue client
複製程式碼

接下來 npm run lint 命令列會提示報錯 提示 ESlint 錯誤
然後 npm run lint-fix 會自動修復你的Eslint錯誤

擴充套件

為了提高我們工作的效率 讓每次修改程式碼後可以自動ESlint檢查 再安裝兩個依賴
npm i eslint-loader babel-eslint

//webpack.config.js
module: {
   rules: [
     {
       test: /\.(vue|js|jsx)$/,
       loader: 'eslint-loader',
       exclude: /node_modules/,
       //預處理 使用任何loader時 必先執行 eslint-loader 報錯則終止
       enforce: 'pre'
     },
     
     //.eslintrc
   {
       "extends": "standard",
       "plugins": [
         "html"
       ],
       //基於webpack和babel開發的專案可能對ESlint的語法相容性不夠完美，使用babel-eslint 保證程式碼的正常運轉
       +"parser": "babel-eslint" ,
       "rules": {
       	"no-new": "off" //允許new關鍵字
     	}
   }
複製程式碼

到這裡 我們的程式碼一旦書寫錯誤 程式碼會自動冒紅線提示你

提示 最新的webpack4 執行eslint 會報以下錯誤

Module build failed (from ./node_modules/eslint-loader/index.js):
TypeError: Cannot read property 'eslint' of undefined
問題解決：github.com/webpack/web…
LoaderOptionsPlugin 官網解釋：webpack.docschina.org/plugins/loa…
新增以下配置

//webpack.config.js
//新增外掛
+ new webpack.LoaderOptionsPlugin(
    {
      minimize: true,
      debug: false,
      options: {
        context: __dirname
      }
    }
)
複製程式碼

小擴充套件

EditorConfig可以幫助開發者在不同的編輯器和IDE之間定義和維護一致的程式碼風格

我使用的是Vscode編輯器 到商店安裝Editor Config VS code 外掛

在專案目錄下新建一下配置檔案即可生效

//.editorConfig
root = true

[*]
charset = utf-8
end_of_line = lf
indent_size = 2
indent_style = space
insert_final_newline = true
trim_trailing_whitespace = true
複製程式碼

希望每次git commit 時 自動檢查檔案Eslint規範 並自動修復
npm i husky -D -- 該外掛會在 git 目錄掛鉤 提交時自動執行設定的命令

//package.json 注意 ！lint-fix是上文配置的指令碼命令噢
+"precommit": "npm run lint-fix"
複製程式碼

接下來 git commit 時 都會先自動修復程式碼規範啦 釋出上線的程式碼就是非常規範的啦

如有不對的地方輕噴！謝謝閱讀