ESlint可以為項(xiàng)目代碼風(fēng)格檢查，統(tǒng)一規(guī)范項(xiàng)目成員的代碼風(fēng)格，利于后期維護(hù)和協(xié)作。
一般腳手架工具已經(jīng)自動(dòng)幫我們自動(dòng)集成了 eslint ，以 vue-cli 為例子,創(chuàng)建項(xiàng)目過(guò)程中，可以添加 eslint 配置

vue create project-exm 

安裝之后，一般會(huì)有一個(gè)文件叫做 .eslintrc.js,一般是下面這個(gè)樣子，在配置文件中，使用 "extends": "eslint:recommended" 來(lái)啟用推薦的規(guī)則，報(bào)告一些常見(jiàn)的問(wèn)題,我們可以在 rules 里配置我們自己的規(guī)則

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: ["plugin:vue/essential", "eslint:recommended", "@vue/prettier"],
  parserOptions: {
    parser: "babel-eslint"
  },
  rules: {
    // 開(kāi)啟 console
    'no-console': 'off',
    'no-useless-catch': 'off',
    'no-async-promise-executor': 'off',
    'no-unused-vars': 'off',
    // prettier配置
    'prettier/prettier': [
        'error',
        {
            singleQuote: true, //單引號(hào)
            tabWidth: 4, // tab是4個(gè)空格
            semi: false // 不要分號(hào)結(jié)尾
        }
    ],
    // "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off"
  }
};

可以參考官方的推薦配置，下圖截取了部分例子：

參考 eslint-rule, eslint-config

vue-cli eslint-loader配置

下面的配置是通過(guò) 運(yùn)行 vue inspect 來(lái)查看 eslint-loader的配置，正常是只檢測(cè) src 的業(yè)務(wù)代碼 ，排除 node_modules目錄，從而提高了編譯打包速度

{
        enforce: 'pre',
        test: /\.(vue|(j|t)sx?)$/,
        exclude: [
          /node_modules/,
          '/Users/***/Documents/WDH_library/myProject/my-vue-lib/node_modules/@vue/cli-service/lib'
        ],
        use: [
          /* config.module.rule('eslint').use('eslint-loader') */
          {
            loader: '/Users/***/Documents/WDH_library/myProject/my-vue-lib/node_modules/eslint-loader/index.js',
            options: {
              extensions: [
                '.js',
                '.jsx',
                '.vue'
              ],
              cache: true,
              cacheIdentifier: '171111d4',
              emitWarning: false,
              emitError: false,
              eslintPath: '/Users/***/Documents/WDH_library/myProject/my-vue-lib/node_modules/eslint',
              formatter: undefined
            }
          }
        ]
      }

我們可以添加.eslintignore文件，配置不檢測(cè)的文件

# 根據(jù)自己的實(shí)際需求進(jìn)行添加
node_modules/*
vue.config.js
postcss.config.js
build/
babel.config.js

VS Code ESLint extension

vs code 編輯器安裝 eslint 插件，可以為編輯器提供根據(jù) eslint配置自動(dòng)格式化的功能，每次保存的時(shí)候，進(jìn)行格式化，免去了手動(dòng)格式化的煩惱，舒服了很多。