阅读 2573

项目中 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 配置

负责样式文件代码质量检查,规则列表详见官网

安装依赖

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 文件代码检查、修复,文档详见官网

安装依赖

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
}
复制代码
文章分类
前端
文章标签