vue進階筆記（一）vue使用eslint和自動fix

最近重構項目，找到了eslint自動fix的方法遂想大展身手，結果放開規則校驗瞬間出現了上千個error。只能慢慢摸索用了將近一天的時間和各類大招擺平了這個問題，下面步入正題：

首先確認安裝了vue-cli

npm install vue-cli -g
複製代碼

或者體驗一把vue-cli 3.0

npm install @vue/cli -g
複製代碼

接下來建立一個vue項目

vue init webpack studyEslint
複製代碼

選擇你想用的代碼規範

接下來看看項目中跟eslint有關的地方

腳手架生成的有三個eslint的配置文件

.editorconfig

此文件的做用是爲了防止團隊協做時你們所用ide不一樣致使代碼規範不一樣每次合併代碼時帶來大量的並無變化的代碼合併和沒必要要的衝突。 安裝插件(webstorm 跳過) 此處以 VS Code 爲例

去商店中搜索 EditorConfig for VS Code 進行安裝，這樣 VS Code 就會優先根據項目根目錄的.editorconfig 文件對縮進之類風格進行配置，覆蓋 VS Code 默認配置。

EditorConfig 插件會從文件所在目錄開始逐級向上查找 .editorconfig，直到到達根目錄或者找到包含屬性 root=true 的 .editorconfig 文件爲止。

當找到全部知足條件的 .editorconfig 配置文件後，插件會讀取這些配置文件的內容，距離文件路徑最短的配置文件中的屬性優先級最高，同一個文件按照從上到下方式讀取，底部定義的同名屬性優先級要高於頂部定義的。

大部分編輯器都有這個插件，即便團隊成員使用不一樣的 IDE，也能夠很好的統一代碼風格。

只要保證.editorconfig 這個文件一直便可

root = true                     // 表示當前是項目根目錄

[*]                             // 全部文件都使用配置
charset = utf-8                 // 編碼格式
indent_style = space            // Tab鍵縮進的樣式，由space和table兩種 通常代碼中是space
indent_size = 2                 // 縮進size爲2
end_of_line = lf                // 以lf換行 默認win爲crlf mac和linux爲lf
insert_final_newline = true     // 末尾加一行空行
trim_trailing_whitespace = true // 去掉行尾多餘空格
複製代碼

.eslintignore

此文件是eslint忽略文件配置，配置到此文件的文件文件夾都會被eslint的檢測規則忽略

/build/
/config/
/dist/
/*.js
/test/unit/coverage/
複製代碼

接下來是最核心的.eslintrc.js

下面是vue模版的默認配置

// https://eslint.org/docs/user-guide/configuring

module.exports = {
  root: true,
  parserOptions: {
    parser: 'babel-eslint'
  },
  env: {
    browser: true,
  },
  // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
  // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
  extends: ['plugin:vue/essential', 'airbnb-base'],
  // required to lint *.vue files
  plugins: [
    'vue'
  ],
  // check if imports actually resolve
  settings: {
    'import/resolver': {
      webpack: {
        config: 'build/webpack.base.conf.js'
      }
    }
  },
  // add your custom rules here
  rules: {
    // don't require .vue extension when importing 'import/extensions': ['error', 'always', { js: 'never', vue: 'never' }], // disallow reassignment of function parameters // disallow parameter object manipulation except for specific exclusions 'no-param-reassign': ['error', { props: true, ignorePropertyModificationsFor: [ 'state', // for vuex state 'acc', // for reduce accumulators 'e' // for e.returnvalue ] }], // allow optionalDependencies 'import/no-extraneous-dependencies': ['error', { optionalDependencies: ['test/unit/index.js'] }], // allow debugger during development 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off' } } 複製代碼

此內容中需重點關注env,這裏能夠配置開發環境內容，例如：

env: {
    browse: true,
    node: true
}
複製代碼

plugin是配置咱們須要用到的一些插件， 還有一個對象是globals，用來配置全局變量是否可變同時也有聲明的做用（親測）：

globals:{
    ping: true,
    var1: false
}
複製代碼

這樣就解決了引用第三方庫而後使用裏面的方法沒有聲明報錯的問題，true是代碼此全局變量能夠修改，false表明不可修改。

最後是rules，這裏配置了你的個性化規則，你可能以爲有些規範太嚴格或者不太須要那能夠在這裏修改校驗規則，報錯等級或者直接關掉。 ESLint 附帶有大量的規則。你可使用註釋或配置文件修改你項目中要使用的規則。要改變一個規則設置，你必須將規則 ID 設置爲下列值之一：

• "off" 或 0 - 關閉規則
• "warn" 或 1 - 開啓規則，使用警告級別的錯誤：warn (不會致使程序退出)
• "error" 或 2 - 開啓規則，使用錯誤級別的錯誤：error (當被觸發的時候，程序會退出)

這是全局的設置辦法，也能夠在文件中用註釋的辦法：

/*eslint getter-return: "error"*/
複製代碼

這樣就能修改此文件中的這個校驗規則。

重點----自動fix

此處以vscode爲例，安裝eslint的插件，修改vscode的配置文件

"eslint.enable": true,
"eslint.autoFixOnSave": true,
"eslint.validate": [
        "javascript",
        "javascriptreact",
        {
            "language": "html",
            "autoFix": true
        },
        {
            "language": "vue",
            "autoFix": true
        }
    ],
"editor.wordWrap": "wordWrapColumn",
"editor.formatOnSave": true,
複製代碼

裏面配置了一個80字符長度自動換行的規則。

能夠配合prettier插件一塊兒使用，vscode配置文件能夠配置

"prettier.eslintIntegration": true,
複製代碼

⚠️我的不建議將prettier的校驗規則配置到eslint和airbnb或者standard的規則一塊兒使用，這樣有衝突！有衝突！有衝突！prettier聽從的是google的規範。

如需瞭解更多的eslint的知識請訪問 eslint中文