eslint規(guī)則只是限制我們在寫代碼時(shí)候的標(biāo)準(zhǔn)化，尤其是在團(tuán)隊(duì)開發(fā)中成員的代碼一致性，如果大家都是自己的標(biāo)準(zhǔn)，那么寫出的項(xiàng)目將沒有辦法進(jìn)行閱讀，不利于后期的二次開發(fā)

vscode自動(dòng)格式化

而vscode寫項(xiàng)目時(shí)候保存文件自動(dòng)eslint格式化是在 文件 --> 首選項(xiàng) -- > 設(shè)置中找到settings.json中進(jìn)行設(shè)置，下面是代碼塊

添加這兩句代碼，就可以了

// 新版支持
    // 語言標(biāo)識(shí)符的數(shù)組，為此ESLint擴(kuò)展應(yīng)被激活，并應(yīng)嘗試驗(yàn)證文件。
    "eslint.probe": [
        "javascript",
        "javascriptreact",
        "vue-html",
        "vue",
        "html"
    ],
// 保存時(shí)對運(yùn)行的代碼進(jìn)行eslint規(guī)則自動(dòng)修復(fù)
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },

下面是我平常開發(fā)中使用到的vscode配置

{
    // 項(xiàng)目顏色主題
    "workbench.colorTheme": "Dracula",
    // 項(xiàng)目文件圖標(biāo)主題
    "workbench.iconTheme": "material-icon-theme",
    // 每次保存的時(shí)候自動(dòng)格式化
    "editor.formatOnSave": true,
    // 可視區(qū)域內(nèi)是否自動(dòng)換行
    "editor.wordWrap": "on",
    // 老版支持
    // "eslint.autoFixOnSave": true, //  啟用保存時(shí)自動(dòng)修復(fù),默認(rèn)只支持.js文件
    // "eslint.validate": [
    //     "javascript", //  用eslint的規(guī)則檢測js文件
    //     "vue",  // 用eslint規(guī)則檢測vue文件
    //     "html", // 用eslint規(guī)則檢測html文件
    // ],
    // 新版支持
    // 語言標(biāo)識(shí)符的數(shù)組，為此ESLint擴(kuò)展應(yīng)被激活，并應(yīng)嘗試驗(yàn)證文件。
    "eslint.probe": [
        "javascript",
        "javascriptreact",
        "vue-html",
        "vue",
        "html"
    ],
    // 保存時(shí)對運(yùn)行的代碼進(jìn)行eslint規(guī)則自動(dòng)修復(fù)
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true,
        "source.fixAll.stylelint": true
    },
    // 字體大小
    "editor.fontSize": 16,
    // 設(shè)置字體
    "editor.fontFamily": "'Droid Sans Mono', 'Courier New', monospace, 'Droid Sans Fallback'",
    // tab 一個(gè)制表符等于的空格數(shù)
    "editor.tabSize": 4,
    // 控制編輯器是否顯示內(nèi)聯(lián)顏色修飾器和顏色選取器
    "editor.colorDecorators": true,
    // 控制編輯器是否啟用了代碼折疊
    "editor.folding": true,
    // 代碼行高，0自動(dòng)計(jì)算，8作為倍數(shù)
    "editor.lineHeight": 24,
    // 是否顯示行號(hào)
    "editor.lineNumbers": "on",
    // 控制編輯器是否自動(dòng)格式化粘貼的內(nèi)容，格式化程序要可用，并且針對文檔中的某一范圍進(jìn)行格式化
    "editor.formatOnPaste": true,
    // 控制是否在編輯器中顯示CodeLens
    "diffEditor.codeLens": true,
    // 控制是否顯示縮略圖
    "editor.minimap.enabled": true,
    // 控制自動(dòng)保存未保存的編輯器文件，onFocusChange切換文件時(shí)保存，afterDelay操作代碼之后保存，onWindowChange切換編輯器之后保存
    "files.autoSave": "onFocusChange"
}

vue項(xiàng)目中.eslintrc.js文件配置（僅個(gè)人使用）---這里的配置，是上面vscode配置執(zhí)行的標(biāo)準(zhǔn)

module.exports = {
  root: true,
  env: {
    node: true,
    browser: true,
    commonjs: true,
    es6: true,
    amd: true,
    jquery: true
  },
  extends: [
    'plugin:vue/vue3-essential',
    'plugin:vue/base',
    '@vue/standard',
    'eslint:recommended'
  ],
  parserOptions: {
    // 因?yàn)閎abel-eslint已官方棄用，所以這里注釋或者刪掉，不然會(huì)一直報(bào)錯(cuò)找不到模塊‘babel-eslint’
    // parser: "babel-eslint",
    sourceType: 'module'
  },
  rules: {
    // console判斷
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    // debugger是否使用
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    // 禁用 alert、confirm 和 prompt
    'no-alert': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    // 這條驗(yàn)證目前只知道可以去除pubilc里面的index.html的規(guī)則報(bào)錯(cuò)，具體意思不清楚
    // 貌似關(guān)閉在模版中使用 eslint-disable-next-line 等注釋
    'vue/comment-directive': 'off',
    // eslint規(guī)則子組件不能修改props值得問題
    'vue/no-mutating-props': 'off',
    // notab--忽略用于縮進(jìn)的tab
    'no-tabs': ['error', { allowIndentationTabs: true }],
    // 方法名小括號(hào)之后沒有空格
    'space-before-function-paren': 'off',
    // 禁止在條件表達(dá)式中使用賦值運(yùn)算符
    'no-cond-assign': 'error',
    // 禁止與-0去比較
    'no-compare-neg-zero': 'error',
    // 禁止在循環(huán)中出現(xiàn) await
    'no-await-in-loop': 'error',
    // 強(qiáng)制 getter 函數(shù)中出現(xiàn) return 語句
    'getter-return': 'error',
    // 強(qiáng)制 “for” 循環(huán)中更新子句的計(jì)數(shù)器朝著正確的方向移動(dòng)
    'for-direction': 'error',
    // 禁止 function 定義中出現(xiàn)重名參數(shù)
    'no-dupe-args': 'error',
    // 禁止對象字面量中出現(xiàn)重復(fù)的 key
    'no-dupe-keys': 'error',
    // 禁止出現(xiàn)重復(fù)的 case 標(biāo)簽
    'no-duplicate-case': 'error',
    // 禁止出現(xiàn)空語句塊
    'no-empty': 'error',
    // 禁止對 catch 子句的參數(shù)重新賦值
    'no-ex-assign': 'error',
    // 禁止不必要的布爾轉(zhuǎn)換
    'no-extra-boolean-cast': 'error',
    // 禁止不必要的括號(hào)
    'no-extra-parens': 'error',
    // 禁止不必要的分號(hào)
    'no-extra-semi': 'error',
    // 禁止對 function 聲明重新賦值
    'no-func-assign': 'error',
    // 要求使用 === 和 !==
    eqeqeq: 'error',
    // 強(qiáng)制 typeof 表達(dá)式與有效的字符串進(jìn)行比較
    'valid-typeof': 'error',
    // 要求使用 isNaN() 檢查 NaN
    'use-isnan': 'error',
    // 禁止出現(xiàn)空函數(shù)
    'no-empty-function': 'error',
    // 禁止使用空解構(gòu)模式
    'no-empty-pattern': 'error',
    // 禁止在沒有類型檢查操作符的情況下與 null 進(jìn)行比較
    'no-eq-null': 'error',
    // 禁止使用多個(gè)空格
    'no-multi-spaces': 'error',
    // 禁止使用多行字符串
    'no-multi-str': 'error',
    // 禁止多次聲明同一變量
    'no-redeclare': 'error',
    // 禁止自我賦值
    'no-self-assign': 'error',
    // 禁止自身比較
    'no-self-compare': 'error',
    // 要求或禁止 var 聲明中的初始化
    'init-declarations': ['error', 'always'],
    // 禁用未聲明的變量，除非它們在 /*global */ 注釋中被提到
    'no-undef': 'error',
    // 禁止將變量初始化為 undefined
    'no-undef-init': 'error',
    // 禁止出現(xiàn)未使用過的變量
    'no-unused-vars': 'error',
    // 禁止在變量定義之前使用它們
    'no-use-before-define': 'error',
    // 是否允許非空數(shù)組里面有多余的空格
    'array-bracket-spacing': ['error', 'never'],
    // 要求箭頭函數(shù)的參數(shù)使用圓括號(hào)
    'arrow-parens': 'error',
    // 強(qiáng)制駝峰法命名
    camelcase: 'error',
    // this別名that
    'consistent-this': ['error', 'that'],
    // 必須使用 if(){} 中的{}
    curly: ['error', 'all'],
    // 縮進(jìn)風(fēng)格
    indent: ['error', 2],
    // 要求在注釋周圍有空行
    'lines-around-comment': 'off',
    // 函數(shù)最多只能有3個(gè)參數(shù)
    'max-params': ['off', 4],
    // 函數(shù)內(nèi)最多有幾個(gè)聲明
    'max-statements': ['off', 10],
    // 禁止在代碼后使用內(nèi)聯(lián)注釋
    'no-inline-comments': 'off',
    // 換行風(fēng)格-強(qiáng)制使用一致的換行符風(fēng)格
    'linebreak-style': ['off', 'windows'],
    // 禁止將全局對象當(dāng)作函數(shù)進(jìn)行調(diào)用
    'no-obj-calls': 'error',
    // 禁止對函數(shù)參數(shù)再賦值
    'no-param-reassign': 'error',
    // 不允許使用undefined變量
    'no-undefined': 'error',
    // 禁止使用令人困惑的多行表達(dá)式
    'no-unexpected-multiline': 'error',
    // 要求將變量聲明放在它們作用域的頂部
    'vars-on-top': 'error'
  }
}

然后就是和prettier搭配使用

1.vscode搜索擴(kuò)展工具prettier并安裝
2.在項(xiàng)目中新建".prettierrc文件"，并添加規(guī)則，格式如下

{
  "semi": false,
  "singleQuote": true,
  "trailingComma": "none"
}

3.在文件->首選項(xiàng)->設(shè)置中 搜索save找到Editor:Format On Save并勾選

完成這3步基本上就配置完成了，但是prettier和eslint本身會(huì)有沖突的地方，需要修改一些地方
1).prettier和eslint沖突問題解決：打開.eslintrc.js, 在rules規(guī)則下，添加代碼

rules: {
  'space-before-function-paren': 'off'
}

2).如果安裝了多個(gè)代碼格式化工具，那么在頁面保存的時(shí)候，右鍵->使用...格式化文檔，然后配置默認(rèn)prettier格式化文件就行了

3).在打開項(xiàng)目->public->index.html或者.html的文件時(shí)，會(huì)在代碼結(jié)構(gòu)的末尾報(bào)錯(cuò) 'vue/comment-directive': 'off', 解決辦法：在.eslintrc.js文件中添加規(guī)則：

rules: {
  // 這條驗(yàn)證目前只知道可以去除pubilc里面的index.html的規(guī)則報(bào)錯(cuò)，具體意思不清楚
    // 貌似關(guān)閉在模版中使用 eslint-disable-next-line 等注釋
    'vue/comment-directive': 'off',
}

4).在項(xiàng)目中，會(huì)遇到一個(gè)問題，子組件通過props獲取到父組件的值，子組件通過v-modal修改，eslint報(bào)錯(cuò)的問題，解決辦法：

rules: {
  // eslint規(guī)則子組件不能修改props值得問題
    'vue/no-mutating-props': 'off',
}