项目中 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
}