1. 简单介绍
prettier 是一款强制的风格统一工具。
-
WebStorm安装Prettier Plugin -
VsCode安装 Prettier Extention
提交前增加husky构子，使用prettier格式化代码，防止提交未格式化的代码。
2. 实现步骤
2.1 安装 包prettier, husky，lint-staged
npm install prettier@2 --save-dev
npm install husky --save-dev
npm install lint-staged --save-dev
2.2 package.json > scripts 增加
"prepare": "husky install",
"precommit": "lint-staged"
2.3 package.json 增加
"lint-staged": {
"*.{js,jsx,tsx,less,css,json,md}": "prettier --write"
}
2.4 执行 husky 安装(本地执行一次)
npm run prepare
2.5 生成husky脚本并提交到仓库
npx husky add .husky/pre-commit "npm run precommit"
git add .husky/pre-commit
2.6 和 eslint 结合 （老项目可以不做这个步骤，太难改代码了）
安装eslint-config-prettier，覆盖冲突的规则。
npm install --save-dev eslint-config-prettier
// 有些项目可能还需要安装 eslint
修改.eslintrc，把prettier加在extends最后
"extends": ["airbnb", "prettier"],
// 如果是h5端的话，加上airbnb会报错，可能要改成 "extends": ["airbnb", "prettier"],
eslintrc 定义的 rules 权限是最高的，和 prettier 冲突的话可以去掉。
git 提交前同时增加 eslint 检查和 prettier
"lint-staged": {
"*.{js,jsx,tsx}": "eslint --fix",
"*.{js,jsx,tsx,less,json,md}": "prettier --write"
},
2.7 添加 .prettierignore 忽略文件
// 根据项目配置
/dist/*
.local
.output.js
/node_modules/**
**/*.svg
**/*.sh
/public/*
注意
有些项目按照以上步骤下来，还会存在各种报错，可以尝试着增加以下配置
- 修改 .eslintrc.js ，可能还需要安装 @typescript-eslint/parser ，代码如下
module.exports = {
extends: ["prettier"],
parser: "@typescript-eslint/parser",
parserOptions: {
ecmaFeatures: {
legacyDecorators: true,
jsx: true,
},
ecmaVersion: 2018,
sourceType: "module",
},
};
- 增加 .eslintignore 文件，参考代码
.idea
bin
mock
node
/dist/*
/node_modules/**
public
src/.umi
src/.umi-production
src/style/index.ts
src/agent/*
.prod.config.json
*.json
*.lock
*.md
typings.d.ts
- 再增加 .editorconfig ，代码如下
root = true
[*]
end_of_line = lf
indent_style = space
indent_size = 4
charset = utf-8
trim_trailing_whitespace = false
insert_final_newline = false
2.8 批量格式化项目代码
在 package.json 文件中配置 scripts
"prettier": "prettier --write ."
执行 npm run prettier 将项目中所有代码格式化。
