**ESLint + Prettier + VSCode自動校驗/修復Eslint語法規則**

小程序、前端交流羣：609690978

寫在前面： 本教程爲有一定代碼規範的開發者提供。如果您是新手，建議嚴格按照規範矯正自己的代碼風格。儘量在沒有ESLint的情況下也能寫出漂亮規範的代碼

您是否還在爲ESLint的語法校驗規則而頭疼？
您是否還飽受ESLint的語法規則的折磨？
您是否還在手動修改ESLint的錯誤？

彆着急，這篇文章將徹底讓你告別ESLint所帶來的各種困擾。（視頻以Vue-js錄製，適用於anglar中的ts）

先上效果：

自動校驗ESLint

準備工作：

1. VSCode
   
   

2. ESLint插件
   
   

3. Prettier插件
   
   

4. 安裝ESLint、Prettier(其實可以忽略掉)

npm install eslint --save-dev

npm install --save-dev --save-exact prettier

5.在項目根目錄創建.eslint.json、.prettier.json文件或.eslintre.js、.prettierrc.js文件
.prettierrc.js寫入校驗規則，具體自行百度

module.exports = {
   
   
  printWidth: 200,
  tabWidth: 2,
  useTabs: false,
  semi: false, //
  singleQuote: true, //
  quoteProps: 'as-needed',
  trailingComma: 'none', // for better git history
  bracketSpacing: true,
  arrowParens: 'avoid', // avoid (default): Omit parens when possible. Example: x => x
  htmlWhitespaceSensitivity: 'ignore', // for better format
  endOfLine: 'lf', // windows users: git config core.autocrlf false --global
  // eslintIntegration: 'true',
}

.eslintrc.js寫入配置,具體自行百度

module.exports = {
   
   
  root: true,
  env: {
   
   
    browser: true,
    node: true,
  },
  parserOptions: {
   
   
    parser: 'babel-eslint',
  },
  extends: [
    '@nuxtjs',
    'prettier',
    'prettier/vue',
    'plugin:prettier/recommended',
    'plugin:nuxt/recommended',
  ],
  plugins: ['prettier'],
  rules: {
   
   
    'camelcase': 'off',
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
  },
  globals: {
   
   
    WxLogin: true,
  },
}

1. 修改vscode的用戶設置文件，setting.json

{
   
   
  "editor.defaultFormatter": "SimonSiefke.prettier-vscode",
  // 縮進字符 2
  "editor.tabSize": 2,
  "editor.suggestSelection": "first",
  "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
  "java.semanticHighlighting.enabled": true,
  "window.zoomLevel": 0,
  //  #去掉代碼結尾的分號
  "prettier.semi": true,
  // 讓prettier使用eslint的代碼格式進行校驗
  "prettier.eslintIntegration": true,
  // 使用單引號替代雙引號
  "prettier.singleQuote": true,
  // 函數名和後面的括號之間加個空格
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  // 每次保存自動格式化
  "editor.formatOnSave": true,
  // eslint格式化字符串
  "editor.codeActionsOnSave": {
   
   
    "source.fixAll.eslint": true,
    // "eslint.autoFixOnSave": false,
    "source.fixAll.tslint": false
  },
  "eslint.codeAction.disableRuleComment": {
   
   },
  "editor.fontLigatures": false,
  "explorer.confirmDelete": false,
  "java.configuration.checkProjectSettingsExclusions": false,
  // tslint配置
  "[typescript]": {
   
   
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "javascript.updateImportsOnFileMove.enabled": "always",
  "editor.rulers": [
  
  ]
}

最後一步，非常重要！！！
很多開發配置完上述內容後發現並沒有生效，或者沒有完全生效。這裏要注意，vscode右下角有兩個按鈕，注意其狀態，一定要鉤上

至此，當我們保存後，代碼就會自動根據ESLint的校驗規則進行自動修復。再也不需要手動修改了，效率大大提升～～～～

小程序、前端交流羣：609690978