Prettier
实现快捷键格式化本地代码 Format Document with……
然后选择 Prettieryarn lint
格式化 eslint --init
创建一套基础配置, 这里选择了 airbnb 的配置package.json
添加一个 lint
的 scriptcommitlint.config.js
yarn commit
来调用 cz 以实现格式化 commitprettier --write src/**/*.{js, ts}
eslint src/**/*.{js, ts} --fix
.prettierrc.json
的配置.eslintrc.json
里面不需要再设置 prettier/prettier
规则 .prettierrc.json
来定制 prettier 的规则.prettierrc.json
文件.prettierrc.json
的配置和 prettier/prettier
规则合并并使用eslint --fix
和本地 Format Document 后代码不一致的情况prettier/prettier
规则, 如此就能保证两边规则一致.prettierrc.json
配置文件之后很可能需要重启 VSC 才能生效prettier --write src/**/*.{js, ts}
和 eslint src/**/*.{js, ts} --fix
之后结果是否相同项目根目录放一个 .prettierrc.json
文件:
echo {}> .prettierrc.json
里面放上一些基础配置
.prettierrc.json
:
{
"tabWidth": 2,
"semi": true,
"singleQuote": true,
"trailingComma": "none",
"endOfLine": "auto"
}
这部分会进行:
https://www.npmjs.com/package/lint-staged
记得到 package.json 编辑一下 lint 的脚本:
"lint-staged": {
"*.{ts,js}": [
"prettier --write src/**/*.{js,ts}",
"eslint src/**/*.{js,ts} --fix"
]
}
这部分会进行:
这部分会进行:
cz
被添加到了 package.json
的 scripts
中这部分会进行:
这部分会进行:
.husky
文件夹下面添加两个文件, 没有扩展名pre-commit
:
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
echo '#######################################'
echo '# Pre Commit Check: Lint Staged'
npx lint-staged
echo '# Finished'
echo '#######################################'
commit-msg
:
#!/bin/sh
# shellcheck source=./_/husky.sh
. "$(dirname "$0")/_/husky.sh"
echo '#######################################'
echo '# Pre Commit Check: Lint Commit Message'
npx --no-install commitlint --edit "$1"
echo '# Finished'
echo '#######################################'
{
"env": {
"browser": true,
"es2021": true
},
/* airbnb 基础包 + 2 个 prettier 的兼容包 */
"extends": ["airbnb-base", "plugin:prettier/recommended", "prettier"],
"parser": "@typescript-eslint/parser",
"parserOptions": {
"ecmaVersion": 12,
"sourceType": "module"
},
/* prettier 也要加到 plugin */
"plugins": ["@typescript-eslint", "prettier"],
"settings": {
/* 处理 import 的 issue */
"import/resolver": {
"node": {
"extensions": [".ts", ".js"]
}
}
},
"rules": {
/* 不再需要这个 rule 了 */
/*
"prettier/prettier": [
2,
{
}
],
*/
/* Other Rules */
}
}
{
"name": "szhshp-qa",
"version": "2.0.0",
"private": true,
"scripts": {
"lint": "eslint . --ext .tsx,.ts --fix", /* 主要 lint 命令 */
"lint-error": "eslint . --ext .tsx,.ts --fix --quite",
"check": "eslint . --ext .tsx,.ts",
"check-error": "eslint . --ext .tsx,.ts --quite",
"format": "prettier --write **/*.{js,ts,tsx,json}", /* 主要 prettier 命令 */
"prepare": "husky install",
"commit": "cz"
},
"dependencies": {
/* …… */
},
"devDependencies": {
/* …… */
},
"lint-staged": {
/* 对于任何 staged ts,tsx,js 文件都进行 Prettier 和 eslint */
"*.{ts,tsx,js}": ["yarn format", "yarn lint"]
},
"config": {
/* 对于使用 cz 进行 commit 的必要配置文件 */
"commitizen": {
"path": "./node_modules/cz-conventional-changelog"
}
}
}
hint: The '.husky/pre-commit' hook was ignored because it's not set as executable.
hint: You can disable this warning with `git config advice.ignoredHook false`.
Solution: chmod +x .husky