项目中 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
}
复制代码