eslint 搭配 prettier 格式化 + husky 搭配 lint-staged 实现提交格式化和检测

eslint 搭配 prettier 格式化 + husky 搭配 lint-staged 实现提交格式化和检测

注:本文基本是写给自己看的, 属于一个记录笔记, 避免每次配置都要查, 写得不清晰, 仅供参考, 如果看了有疑问也可以在评论指出

首先默认项目已经有 eslint 检测，如果没有自行查找相关资料配置，这里重点值如何和 prettier 搭配工作

安装 prettier 包

需要依赖的包有: prettier , eslint-config-prettier, eslint-plugin-prettier

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

配置 prettierrc 和 prettierignore

.prettierrc 文件用于配置规则, .prettierignore 文件用于忽略默写不需要处理的文件或目录

prettier 规则可以查阅官方文档, 一般会配置 printWidth(单行长度), singleQuote(使用单引号), endOfLine(行尾符), indentSize(缩进长度), 以下是我的配置供参考:

.prettierrc

{
  "singleQuote": true,
  "printWidth": 120,
  "trailingComma": "all",
  "arrowParens": "avoid",
  "endOfLine": "auto",
  "indentSize": 2,
  "semi": true,
  "alwaysParens": "avoid",
  "htmlWhitespaceSensitivity": "ignore"
}

.prettierignore 文件一般会忽略一些打包文件(/dist/), 构建配置(/build/, /config/), node_modeles/, 测试文件(tests/), lock 文件(package-lock.json, yarn.lock), 还有一些针对 ide 的配置文件, 我的 .prettierignore 如下:

.prettierignore

/build/
/config/
/dist/
node_modules/
/.husky/

tests/

# 根目录下的文件
/*.js
/*.ts
/*.json

# vue ts 配置
src/shims-*.d.ts

types/

yarn.lock
package-lock.json

# Log files
*.log
*.log.*

# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

配置 eslintrc

要将 prettier 与 eslint 结合起来, 就要吧 prettier 添加到 eslint 的配置中去

{
  ...
  "extends": [
    ...
    "prettier",
  ],
  plugins: ["prettier"]
  rules: [
    "prettier/prettier": "error",
    ...
  ],
  ...
}

现在 prettier 就会随着 eslint 一起工作了, 如果需要保存是自动格式化, 需要配置编辑器的插件配置, 网上有很多教程

lint-staged

安装 lint-staged

yarn add -D lint-staged

配置 package.json

{
  ...
  "script": {
    ...
    "lint-staged": "lint-staged",
    ...
  },
  ...
  "lint-staged": {
    "src/**/*.{ts,js,vue,tsx,jsx}": [
      "eslint --fix",
      "prettier --write",
      "git add"
    ]
  }
}

husky

yarn add husky -D
npm set-script prepare "husky install"
npm run prepare
npx husky add .husky/pre-commit npm run lint-staged