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

vue create project-exm 

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

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: ["plugin:vue/essential", "eslint:recommended", "@vue/prettier"],
  parserOptions: {
    parser: "babel-eslint"
  },
  rules: {
    // 開啟 console
    'no-console': 'off',
    'no-useless-catch': 'off',
    'no-async-promise-executor': 'off',
    'no-unused-vars': 'off',
    // prettier配置
    'prettier/prettier': [
        'error',
        {
            singleQuote: true, //單引號
            tabWidth: 4, // tab是4個空格
            semi: false // 不要分號結尾
        }
    ],
    // "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配置

下面的配置是通過 運行 vue inspect 來查看 eslint-loader的配置，正常是只檢測 src 的業(yè)務代碼 ，排除 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文件，配置不檢測的文件

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

VS Code ESLint extension

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