vue cli選擇lint模式

選擇代碼檢測和格式化方案

選擇Linter / Formatter配置:
選項：
  ESLint with error prevention only  // 僅錯誤預防
  ESLint + Airbnb config  // Airbnb配置
  ESLint + Standard config // 標准配置
  ESLint + Prettier // 附帶Prettier

應用了 ESLint 后，通常是需要自己來配置繁雜的 rules 規則。
這也是一個喜好類的東西，多數人是不願意在這上面耗費太多精力的，比如手動配置數百個ESLint 規則。
於是github 上出現了一些開源的代碼規范庫，比較流行的有 airbnb、standard、prettier等。
相比之下大家都推薦Prettier預設規范，配置更少，用起來更舒服。
來看看不同的模式的選擇，進而生成不同的配置文件.eslintrc.js

僅錯誤預防
只檢測錯誤

module.exports = {
  root: true,
  env: {
    node: true
  },
  'extends': [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/typescript/recommended'
  ],
  parserOptions: {
    ecmaVersion: 2020
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
  }
}

Standard風格
生成Standard編碼規范

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: [
    'plugin:vue/vue3-essential',
    '@vue/standard',
    '@vue/typescript/recommended'
  ],
  parserOptions: {
    ecmaVersion: 2020
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
  }
}

Prettier 風格
生成Prettier 編碼規范

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: [
    "plugin:vue/vue3-essential",
    "eslint:recommended",
    "@vue/typescript/recommended",
    "plugin:prettier/recommended",
  ],
  parserOptions: {
    ecmaVersion: 2020,
  },
  rules: {
    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
  },
};

Airbnb風格
獨角獸公司 Airbnb 的前端編碼規范

選擇何時進行代碼檢測

Pick additional lint features: 
  Lint on save // 保存就檢測
  Lint and fix on commit // fix和commit時候檢查

參考

使用 Eslint & standard 規范前端代碼：https://www.cnblogs.com/zhoumingjie/p/11582862.html
各種lint預設pk：https://www.npmtrends.com/eslint-config-airbnb-vs-prettier-vs-standard
為什么推薦使用prettier：https://blog.csdn.net/qq_21567385/article/details/109136668
我為什么推薦Prettier來統一代碼風格：https://blog.csdn.net/Fundebug/article/details/78342784
Vue CLI 3.0 文檔：https://www.bluesdream.com/blog/vue-cli-3-document-install-and-create.html
ESLint 與 Prettier配合使用：https://segmentfault.com/a/1190000015315545