ESLint + TypeScript + Stylelint + Prettier规范你的编程习惯

代码规则由 lint 负责，代码风格由 prettier 负责

格式化代码有两种方式，IDE 保存使用对应的扩展程序 和 使用命令调用 lint --fix，本人使用 VSCode，故下文需要安装的扩展均来自 VSCode

前菜

统一不同开发中不同编辑器风格，在项目根目录添加.editorconfig

# 必须安装 EditorConfig for VS Code 插件
# https://editorconfig.org/
root = true

[*]
charset = utf-8
indent_size = 2
indent_style = space
tab_width = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true

ESLint

ESLint: lint 代码的主要工具，所有的一切皆基于此包前往官网

安装 ESLint 扩展程序并设置保存自动格式化

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.probe": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "vue"
  ]
}

安装依赖

yarn add eslint -D

• eslint 规则基础包

在 packages.json 的 scripts 下添加"eslint": "eslint 'src/**/*.js' --fix

创建.eslintrc.yaml 配置文件（支持.js,.json 格式，依据个人爱好创建即可），可添加如下参考配置

root: true
env:
  browser: true
  es6: true
  node: true
extends:
  - eslint:recommended # 启用ESLint的推荐规则
parserOptions:
  ecmaVersion: 10
  sourceType: module
  extraFileExtensions:
    - .vue
  ecmaFeatures:
    jsx: true

此处未设置 rules，仅使用官方推荐，如需自定义，前往官网查找需要的规则添加即可

const example = {}

该代码在 IDE 中会提示no-unused-vars和no-extra-semi

保存或运行yarn eslint，会报告no-unused-vars错误并修复no-extra-semi

ESLint + Prettier

安装依赖

yarn add prettier eslint-config-prettier eslint-plugin-prettier -D

1. prettier prettier 基础包
2. eslint-config-prettier 禁用掉 ESLint 所有非必须或者和 Prettier 冲突的规则
3. eslint-plugin-prettier 辅助 ESLint 和 Prettier 合作

在配置文件中添加

extends:
  - plugin:prettier/recommended

以上配置相当于

plugins:
  - prettier
extends:
  - prettier
rules:
  prettier/prettier: error
  arror-body-style: off
  prefer-arrow-callback: off

const example = { key: 'value' }

该代码在 IDE 中可以看到Replace 'value' with "value" eslint(prettier/prettier)错误提示，prettier 默认规则要求使用双引号

保存或运行yarn eslint自动修复

检验是否生效添加规则：修改为使用单引号，取消末尾分号

rules:
  prettier/prettier:
    - error
    - singleQuote: true
      semi: false

推荐使用.prettierrc.yaml配置而不是写在.eslintrc.yaml中，因为 vscode 会识别 prettierrc 而不会识别 eslintrc 中的 prettier 配置，这样会导致不一致。而且 eslint 也会加载.prettierrc.yaml，完美。查看文档。

了解更多 Prettier 请查看前往官网

ESLint + TypeScript + Prettier

yarn add typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser -D

• typescript ts 基础包
• @typescript-eslint/eslint-plugin 针对 ts 的一系列 eslint 规则
• @typescript-eslint/parser 解析 ts 语句，eslint 本身不支持 ts 语法

在配置文件中添加

parser: '@typescript-eslint/parser'
plugins: '@typescript-eslint'
extends:
  - plugin:@typescript-eslint/recommended

集成 eslint-plugin-vue

yarn add eslint-plugin-vue -D

• eslint-plugin-vue Vue 官方提供的插件

在配置文件中添加

extends:
  - eslint:recommended
  - plugin:@typescript-eslint/recommended
+ - plugin:vue/strongly-recommended # 使用 vue/recommended 会和prettier有冲突
  - plugin:prettier/recommended

设置解析器

- parser: '@typescript-eslint/parser'
+ parser: vue-eslint-parser
  parserOptions:
+   parser: '@typescript-eslint/parser'
+   extraFileExtensions:
      - .vue
+   ecmaFeatures:
+     jsx: true

Stylelint + Prettier

Stylelint: lint css 代码的主要工具前往官网

安装 Stylelint 扩展程序，修改 settings.json

{
  "editor.codeActionsOnSave": {
    "source.fixAll.stylelint": true
  },
  "stylelint.validate": ["css", "less", "postcss", "scss"]
}

安装依赖

yarn add stylelint stylelint-config-standard -D

• stylelint css 规则基础包

创建.stylelintrc.yaml 配置文件，添加推荐配置

root: true
extends:
  - stylelint-config-standard

添加 Prettier

yarn add prettier stylelint-prettier stylelint-config-prettier -D

• stylelint-prettier 辅助 Prettier 和 stylelint
• stylelint-config-prettier 关闭与 Prettier 冲突的 stylelint 规则

在配置文件中添加

extends:
  - stylelint-prettier/recommended

以上配置相当于

plugins:
  - stylelint-prettier
extends:
  - stylelint-config-prettier
rules:
  prettier/prettier: true

和 eslint 一样，stylelint 同样会加载.prettierrc.yaml中的配置，故而也不在stylelintrc.yaml中写任何 prettier 的配置查看文档

添加 scss 配置

yarn add stylelint-config-standard-scss stylelint-config-prettier-scss -D

• stylelint-config-standard-scss 针对 stylelint 的 scss 标准配置，该包已扩展
  • stylelint-config-standard
    • stylelint-config-recommended
  • stylelint-config-recommended-scss
    • stylelint-config-recommended
    • stylelint-scss
    • postcss-scss
• stylelint-config-prettier-scss 关闭与 Prettier 冲突的 stylelint 规则

在配置文件中添加

extends:
  - stylelint-config-standard-scss
  - stylelint-config-prettier-scss

如需集成 vue，可使用stylelint-config-recommended-vue，以上配置由于原生 stylelint v14 不支持 vue3，不过用其验证样式文件即可，vue 文件由 eslint 格式化

添加 jest 单元测试

jest: 单元测试比较好用的插件 前往官网

安装 Jest 扩展

安装依赖

yarn add eslint-plugin-jest -D

添加配置

plugins:
  - jest
extends:
  - plugin:jest/all

添加 git hook

在提交时格式化代码

安装依赖及设置

# step one
yarn add husky lint-staged -D
# step two
yarn husky install
# step three
npx husky add .husky/pre-commit 'npx lint-staged --allow-empty'

添加钩子方法

在 package.json 中添加以下设置

{
  "lint-staged": {
    "*.{js,ts,vue}": ["eslint --fix"],
    "*.{css,scss,less}": ["stylelint --fix"],
    "*.{html,yaml,md,json}": ["prettier --write"]
  }
}

可能出现的 warning The '.husky/pre-commit' hook was ignored because it's not set as executable. 执行以下命令即可去除，原因我也不清楚，答案来自stackoverflow

chmod ug+x .husky/*
chmod ug+x .git/hooks/*

小结

至此，ESLint + TypeScript + StyleLint + Prettier + Vue + jest 的基础配置及官方推荐已设置完成

奉上本人此时的配置

// .vscode/settings.json
{
  "editor.codeActionsOnSave": {
    // 保存时所有支持的插件执行格式化，如stylelint,eslint
    "source.fixAll.eslint": true,
    "source.fixAll.stylelint": true
  },
  // eslint.validate 同样可以检测文件，官方已建议不再使用
  // eslint.probe 默认还检测html及markdown
  // html 及 markdown直接由 prettier 格式化
  "eslint.probe": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "vue"
  ],
  "stylelint.validate": ["css", "scss", "less", "postcss"],
  "[html]": {
    "editor.formatOnSave": true
  },
  "[json]": {
    "editor.formatOnSave": true
  },
  // tsconfig.json与jsconfig.json不会被[json]格式化
  "[jsonc]": {
    "editor.formatOnSave": true
  },
  "[markdown]": {
    "editor.formatOnSave": true
  },
  "[yaml]": {
    "editor.formatOnSave": true
  }
}

# .eslintrc.yaml
root: true
env:
  browser: true
  es6: true
  node: true
parser: '@typescript-eslint/parser'
plugins:
  - '@typescript-eslint'
extends:
  - eslint:recommended
  - plugin:@typescript-eslint/recommended
  - plugin:prettier/recommended
parserOptions:
  ecmaVersion: 10
  sourceType: module
  ecmaFeatures:
    jsx: true

# .prettierrc.yaml
printWidth: 90 # 换行阈值
# tabWidth: 2 # tab 宽度，默认使用editorconfig的indent_size或tab_width
# useTabs: true # 是否使用tab缩进，默认使用editorconfig的 indent_style
semi: false # 句末加分号
singleQuote: true # 是否使用单引号
quoteProps: as-needed # 给对象key加引号
trailingComma: all # 最后一个对象元素加逗号
bracketSpacing: true # 对象，数组属性前后加空格
bracketSameLine: true # 标签结束符号>是否在最后一行
arrowParens: avoid # x => {} 单个参数时不要有小括号
requirePragma: false # 是否要注释来决定是否格式化代码
proseWrap: preserve # 对于md文本的换行策略，什么都不做最好
embeddedLanguageFormatting: auto # 格式化文件中嵌入的代码
singleAttributePerLine: true # 每行只能有一个属性

# .stylelintrc.yaml
root: true
extends:
  - stylelint-prettier/recommended
  - stylelint-config-standard-scss
  - stylelint-config-prettier-scss

可能会有版本问题，同样奉上此时的版本

{
  "@typescript-eslint/eslint-plugin": "^5.17.0",
  "@typescript-eslint/parser": "^5.17.0",
  "eslint": "^8.12.0",
  "eslint-config-prettier": "^8.5.0",
  "eslint-plugin-prettier": "^4.0.0",
  "husky": "^7.0.4",
  "lint-staged": "^12.3.7",
  "prettier": "^2.6.2",
  "stylelint": "^14.6.1",
  "stylelint-config-prettier": "^9.0.3",
  "stylelint-config-prettier-scss": "^0.0.1",
  "stylelint-config-standard": "^25.0.0",
  "stylelint-config-standard-scss": "^3.0.0",
  "stylelint-prettier": "^2.0.0",
  "typescript": "^4.6.3"
}

其他

对于其他格式文件，设置 prettier 为默认格式化工具即可，但要切忌不要与 lint 范围有冲突，可对需要格式的文件单独设置

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[html]": {
    "editor.formatOnSave": true
  },
  "[json]": {
    "editor.formatOnSave": true
  }
}

1. eslint-config-jest-enzyme jest 和 enzyme 专用的校验规则
2. eslint-plugin-import支持 ES2015+ (ES6+) 导入/导出语法的 linting
3. eslint-config-airbnb-base主流的 eslint 规则集合
4. @babel/eslint-parser 允许你使用一些实验特性时，依然能够用上 eslint 语法检查，未使用实验特性无需安装 doc

参考链接

最全的 Eslint 配置模板，从此统一团队的编程习惯

VS Code 下 Eslint+Prettier+TypeScript 一步到位（规范配置）