項目中 Prettier + Stylelint + ESlint 配置

想要達到的效果

• 保存文件時自動校驗、修復代碼風格和質量
• 格式化多種類型文件
• CodeReview時只需關注代碼邏輯

Prettier 與 Lint 的區別

• Prettier
  • 側重代碼格式化話檢查：printWidth、semi、singleQuote...
  • 支持多語言：html、css、js、ts、json...
• Lint
  • 側重代碼質量檢查，例如 eslint：no-var、eqeqeq、no-multiple-empty-lines...

結合以上二者有助於咱們在開發過程當中保持代碼風格統一以及代碼質量檢查。

Prettier 配置

負責各文件代碼格式檢查、修復，文檔詳見官網。

安裝依賴

npm install -D prettier
複製代碼

配置 .prettierrc.js 文件

module.exports = {
  tabWidth: 2,
  useTabs: false,
  printWidth: 120,
  semi: true,
  singleQuote: true,
  arrowParens: 'avoid',
  trailingComma: 'all', // 尾隨逗號
  bracketSpacing: true, // 對象中打印空格
  jsxSingleQuote: true,
  jsxBracketSameLine: false, // 在jsx中把'>' 放同一行
  insertPragma: false, // 插入@format標識
  ignorePath: '.prettierignore',
};
複製代碼

Stylelint 配置

負責樣式文件代碼質量檢查，規則列表詳見官網。

安裝依賴

• stylelint-config-standard： 官網提供的 css 標準
• stylelint-config-recess-order： 屬性排列順序
• stylelint-prettier： 基於 prettier 代碼風格的 stylelint 規則
• stylelint-config-prettier： 禁用全部與格式相關的 Stylelint 規則，解決 prettier 與 stylelint 規則衝突，確保將其放在 extends 隊列最後，這樣它將覆蓋其餘配置。

npm install -D stylelint stylelint-config-standard stylelint-config-rational-order stylelint-prettier stylelint-config-prettier
複製代碼

配置 .stylelintrc.js 文件

module.exports = {
  extends: ['stylelint-config-standard', 'stylelint-config-rational-order', 'stylelint-prettier/recommended'],
  rules: {
    // 'prettier/prettier': [true, { singleQuote: false }],
    // at-rule-no-unknown: 屏蔽一些scss等語法檢查
    'at-rule-no-unknown': [true, { ignoreAtRules: ['mixin', 'extend', 'content'] }], // 禁止使用未知的 at 規則
    'rule-empty-line-before': [
      // 要求或禁止在規則聲明以前有空行
      'always-multi-line',
      {
        except: ['first-nested'],
        ignore: ['after-comment'],
      },
    ],
    'at-rule-empty-line-before': [
      // 要求或禁止在 at 規則以前有空行
      'always',
      {
        except: ['blockless-after-same-name-blockless', 'first-nested'],
        ignore: ['after-comment'],
      },
    ],
    'comment-empty-line-before': [
      // 要求或禁止在註釋以前有空行
      'always',
      {
        except: ['first-nested'],
        ignore: ['stylelint-commands'],
      },
    ],
    'block-no-empty': true, // 禁止出現空塊
    'declaration-empty-line-before': 'never', // 要求或禁止在聲明語句以前有空行。
    'declaration-block-no-duplicate-properties': true, // 在聲明的塊中中禁止出現重複的屬性
    'declaration-block-no-redundant-longhand-properties': true, // 禁止使用能夠縮寫卻不縮寫的屬性。
    'shorthand-property-no-redundant-values': true, // 禁止在簡寫屬性中使用冗餘值。
    'function-url-quotes': 'always', // 要求或禁止 url 使用引號。
    'color-hex-length': 'short', // 指定十六進制顏色是否使用縮寫
    'color-named': 'never', // 要求 (可能的狀況下) 或 禁止使用命名的顏色
    'comment-no-empty': true, // 禁止空註釋
    'font-family-name-quotes': 'always-unless-keyword', // 指定字體名稱是否須要使用引號引發來 | 期待每個不是關鍵字的字體名都使用引號引發來
    'font-weight-notation': 'numeric', // 要求使用數字或命名的 (可能的狀況下) font-weight 值
    'property-no-vendor-prefix': true, // 禁止屬性使用瀏覽器引擎前綴
    'value-no-vendor-prefix': true, // 禁止給值添加瀏覽器引擎前綴
    'selector-no-vendor-prefix': true, // 禁止使用瀏覽器引擎前綴
    'no-descending-specificity': null, // 禁止低優先級的選擇器出如今高優先級的選擇器以後
  },
};
複製代碼

ESlint 配置

負責 js 文件代碼檢查、修復，文檔詳見官網

安裝依賴

• eslint： JavaScript 和 JSX 檢查工具
• eslint-plugin-import： ES2015 +（ES6 +）導入/導出語法的檢查
• eslint-import-resolver-webpack 使eslint識別webpack配置，或者使用eslint-import-resolver-alias
• babel-eslint： 使 eslint 支持有效的 babel 代碼
• eslint-config-airbnb-base： 目前比較流行的 JavaScript 代碼規範, react 項目可下載 eslint-config-airbnb
• eslint-plugin-vue： 使用 ESLint 檢查 .vue文件 的 <template> 和 <script>
• eslint-plugin-prettier： 基於 prettier 代碼風格的 eslint 規則
• eslint-config-prettier： 禁用全部與格式相關的 eslint 規則，解決 prettier 與 eslint 規則衝突，確保將其放在 extends 隊列最後，這樣它將覆蓋其餘配置

npm install -D eslint eslint-plugin-import eslint-import-resolver-webpack babel-eslint eslint-config-airbnb-base eslint-plugin-vue@next eslint-plugin-prettier eslint-config-prettier
複製代碼

配置 .eslintrc.js

module.exports = {
  root: true,
  env: {
    node: true,
    browser: true,
  },
  parserOptions: {
    parser: 'babel-eslint',
    ecmaVersion: 8,
    sourceType: 'module',
  },
  extends: [
    'plugin:vue/vue3-recommended',
    'airbnb-base',
    'plugin:prettier/recommended', // 避免prettier規則與eslint衝突,衝突使用prettier規則, prettier須要放置在最後
    'prettier/vue', // 避免vue 與 prettier衝突
  ], 
  rules: {
    'no-unused-expressions': ['error', { allowShortCircuit: true, allowTernary: true }], // 容許使用短路、三目
    'func-names': ['error', 'as-needed'], // 須要時添加函數名稱
    'no-param-reassign': ['error', { props: false }], // 函數形參可修改
    'no-plusplus': 'off',
    'no-shadow': 'off',
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
  },
  settings: {
    'import/resolver': {
      webpack: {
      	// 以vue/cli爲例
        config: 'node_modules/@vue/cli-service/webpack.config.js',
      }
    }
  },
  globals: {},
};
複製代碼

VSCode 集成使用

經過保存文件實現自動格式化代碼，less、js、vue 等文件同時執行 stylelint 或者 eslint --fix 操做。

項目工做區 .vscode 目錄

.vscode/
|- extensions.json
|- README.md
|- settings.json
複製代碼

安裝插件

安裝插件，已寫入 extensions.json 文件，容許安裝便可。

extensions.json

{
  "recommendations": ["octref.vetur", "esbenp.prettier-vscode", "dbaeumer.vscode-eslint", "stylelint.vscode-stylelint"]
}
複製代碼

配置工做區

settings.json

{
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.fixAll.stylelint": true
  },
  "eslint.enable": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"，
  "vetur.format.enable": false,
  "vetur.validation.template": false,
  "vetur.validation.interpolation": false,
  "vetur.validation.style": false,
  "vetur.languageFeatures.codeActions": false,
  "vetur.validation.script": false
}
複製代碼