前端項目如何接入ESLint

ESLint介紹

ESLint 是在 ECMAScript/JavaScript 代碼中識別和報告模式匹配的工具，它的目標是保證代碼的一致性和避免錯誤。在許多方面，它和 JSLint、JSHint 相似，除了少數的例外：

• ESLint 使用 Espree 解析 JavaScript。
• ESLint 使用 AST 去分析代碼中的模式
• ESLint 是完全插件化的。每一個規則都是一個插件並且你可以在運行時添加更多的規則。

VueCli接入Eslint

執行 vue add eslint 選配既可

普通項目接入ESLint

ESLint只在開發階段生效，生產環境不會去校驗代碼是否具有格式錯誤。所以是開發依賴。

• 創建項目模板

  vue create stones1

手動創建一個不包含eslint的項目。我們自己手動添加eslint
目錄如下

執行

  PS E:\DDD\Vue3CLI\stones1> yarn add -D eslint
  PS E:\DDD\Vue3CLI\stones1> npx eslint --init
  √ How would you like to use ESLint? · problems    
  √ What type of modules does your project use? · esm
  √ Which framework does your project use? · vue
  √ Does your project use TypeScript? · No / Yes
  √ Where does your code run? · browser, node
  √ What format do you want your config file to be in? · JavaScript
  The config that you've selected requires the following dependencies:

  eslint-plugin-vue@latest @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest
  √ Would you like to install them now with npm? · No / Yes

執行完成后，根目錄下生成了一個.eslintrc.js文件，內容

  module.exports = {
    "env": {
        "browser": true,
        "es2021": true,
        "node": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:vue/essential",
        "plugin:@typescript-eslint/recommended"
    ],
    "parserOptions": {
        "ecmaVersion": 13,
        "parser": "@typescript-eslint/parser",
        "sourceType": "module"
    },
    "plugins": [
        "vue",
        "@typescript-eslint"
    ],
    "rules": {
      "no-console": "error"
    }
};

這里使用npx 是因為我們沒有使用全局安裝eslint，不能夠直接使用eslint --init，使用npx能夠幫我們找到./node_modules/.bin目錄下的eslint

直接啟動項目

發現並沒有報錯。咋回事呢。看下官方文檔 發現需要執行eslint file指定文件才行嘗試一下

  PS E:\DDD\Vue3CLI\stones1> npx eslint src/App.vue

  E:\DDD\Vue3CLI\stones1\src\App.vue
    2:7  error  Parsing error: '>' expected

  ✖ 1 problem (1 error, 0 warnings)

果然出現了校驗的格式錯誤，那如何進行在開發時實時進行格式校驗呢。
需要添加eslint-webpack-plugin來進行編譯時檢測語法

  // vue.config.js
  const ESLintPlugin = require('eslint-webpack-plugin');
  module.exports = {
    configureWebpack: {
      plugins: [new ESLintPlugin({
        extensions: ['js', 'vue']
      })]
    }
  }
  // Home.vue 添加測試代碼
  <template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <router-view/>
  </div>
  </template>

  <script>
  export default {
    created() {
      console.log("asdcsadc")
    }
  }
  </script>

  // main.js 添加測試代碼
  import Vue from 'vue'
  import App from './App.vue'
  import router from './router'
  import store from './store'

  Vue.config.productionTip = false

  new Vue({
    router,
    store,
    render: h => h(App)
  }).$mount('#app')

  let a = "123" // 添加未使用變量

啟動服務

  PS E:\DDD\Vue3CLI\stones1> yarn serve
  yarn run v1.22.11
  $ vue-cli-service serve
  INFO  Starting development server...
  98% after emitting CopyPlugin

  ERROR  Failed to compile with 1 error                                                                                                                 下午3:26:15

  E:\DDD\Vue3CLI\stones1\src\main.js
    14:5  error  'a' is assigned a value but never used  no-unused-vars

  E:\DDD\Vue3CLI\stones1\src\views\About.vue
    1:1  error  Component name "About" should always be multi-word  vue/multi-word-component-names

  E:\DDD\Vue3CLI\stones1\src\views\Home.vue
    13:9  error  Component name "Home" should always be multi-word  vue/multi-word-component-names

  ✖ 3 problems (3 errors, 0 warnings)


  You may use special comments to disable some warnings.
  Use // eslint-disable-next-line to ignore the next line.
  Use /* eslint-disable */ to ignore all warnings in a file.

成功。剩下就是進行配置具體規則。可以參考Eslint官方網址
https://eslint.bootcss.com/docs/rules/