Prettier与Liniters代码规范
注意事项
使用 Prettier 进行格式化，使用 linters 来捕获错误！
基本概况
Prettier 是一个具有规范性的代码格式化程序。它通过解析您的代码并使用自己的规则重新打印它来执行一致的样式，这些规则考虑了最大行长度，并在必要时包装代码。
- 官网：https://prettier.io/
- 中文文档：https://www.prettier.cn/
- GitHub：https://github.com/prettier/prettier
- 规则效果实时演示：https://www.prettier.cn/playground/
支持语言
- JavaScript (including experimental features)
- JSX
- Angular
- Vue
- Flow
- TypeScript
- CSS, Less, and SCSS
- HTML
- Ember/Handlebars
- JSON
- GraphQL
- Markdown, including GFM and MDX v1
- YAML
安装配置
> npm install --save-dev --save-exact prettier
> npm install --save-dev eslint-config-prettier
文件目录与优先级顺序
- .prettierrc
- .prettierrc.json
开启自动检测
npm run lint检测指令
{
"scripts": {
"lint:prettier": "prettier --write \"**/*.{js,ts,json,css,less,scss,vue,html,md}\""
}
}
配置.vscode/settings.json
{
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true
}
配置文件
prettier.config.js
module.exports = {
printWidth: 120,
semi: true, // 分号
vueIndentScriptAndStyle: true,
singleQuote: true,
trailingComma: 'all',
proseWrap: 'never',
htmlWhitespaceSensitivity: 'strict',
endOfLine: 'auto',
};
.prettierrc
overrides:
- files: "**/*.{js,mjs,cjs}"
options:
parser: meriyah
.prettierrc
{
"printWidth": 100,
"tabWidth": 2,
"useTabs": false,
"semi": true,
"singleQuote": true,
"jsxBracketSameLine": true,
"bracketSpacing": true,
"trailingComma": "es5",
"endOfLine": "lf"
}
.prettierignore
.tmp
dist/
.cache/
coverage/
**/.git
**/.svn
**/.hg
**/node_modules
/tests/format/**/*.*
!/tests/format/**/jsfmt.spec.js
/tests/integration/cli/
/tests/integration/plugins/
/tests/integration/custom-parsers/
/website/build/
/website/static/lib/
/website/static/playground.js
.nyc_output
/vendors/
node_modules
public
.husky
.vscode
.idea
*.sh
*.md
src/assets
prettier rules规则
推荐配置
{
"trailingComma": "none"
}
配置文档
{
// 基本配置
"trailingComma": "none" // ESLint 和 Prettier 会有末尾逗号的冲突。ESLint 默认规则是结尾不加逗号，Prettier 规则结尾要加逗号。
// 字符串使用单引号
singleQuote: true,
// 每行末尾自动添加分号
semi: true,
// tab缩进大小,默认为2
tabWidth: 2,
// 使用tab缩进，默认false
useTabs: false,
// 对象中打印空格 默认true
// true: { foo: bar }
// false: {foo: bar}
bracketSpacing: true,
// 箭头函数参数括号 默认avoid 可选 avoid| always
// avoid 能省略括号的时候就省略 例如x => x
// always 总是有括号
arrowParens: 'avoid',
// 换行长度，默认80
printWidth: 80,
"prettier.printWidth": 100, // 超过最大值换行
"prettier.tabWidth": 4, // 缩进字节数
"prettier.useTabs": false, // 缩进不使用tab，使用空格
"prettier.semi": true, // 句尾添加分号
"prettier.singleQuote": true, // 使用单引号代替双引号
"prettier.proseWrap": "preserve", // 默认值。因为使用了一些折行敏感型的渲染器（如GitHub comment）而按照markdown文本样式进行折行
"prettier.arrowParens": "avoid", // (x) => {} 箭头函数参数只有一个时是否要有小括号。avoid：省略括号
"prettier.bracketSpacing": true, // 在对象，数组括号与文字之间加空格 "{ foo: bar }"
"prettier.disableLanguages": ["vue"], // 不格式化vue文件，vue文件的格式化单独设置
"prettier.endOfLine": "auto", // 结尾是 \n \r \n\r auto
"prettier.eslintIntegration": false, //不让prettier使用eslint的代码格式进行校验
"prettier.htmlWhitespaceSensitivity": "ignore",
"prettier.ignorePath": ".prettierignore", // 不使用prettier格式化的文件填写在项目的.prettierignore文件中
"prettier.jsxBracketSameLine": false, // 在jsx中把'>' 是否单独放一行
"prettier.jsxSingleQuote": false, // 在jsx中使用单引号代替双引号
"prettier.parser": "babylon", // 格式化的解析器，默认是babylon
"prettier.requireConfig": false, // Require a 'prettierconfig' to format prettier
"prettier.stylelintIntegration": false, //不让prettier使用stylelint的代码格式进行校验
"prettier.trailingComma": "es5", // 在对象或数组最后一个元素后面是否加逗号（在ES5中加尾逗号）
"prettier.tslintIntegration": false // 不让prettier使用tslint的代码格式进行校验
// 配置覆盖
// 共享配置
// 设置解析器选项
}
eslint-config-prettier
关闭所有不必要或可能与 Prettier 冲突的规则。
安装配置
> npm install --save-dev eslint-config-prettier
配置文件
在.eslintrc.js文件进行配置
{
"extends": [
"prettier",
"eslint-config-prettier"
]
}
Git Hooks预提交钩子
Git Hooks 就是那些在Git执行特定事件（如commit、push、receive等）后触发运行的脚本，挂钩是可以放置在挂钩目录中的程序，可在git执行的某些点触发动作。没有设置可执行位的钩子将被忽略。
Husky
husky - Git hooks
安装配置
npm install --save-dev husky lint-staged
npx husky install
npm pkg set scripts.prepare="husky install"
npx husky add .husky/pre-commit "npx lint-staged"
添加package.json
{
"gitHooks": {
"pre-commit": "lint-staged"
},
"lint-staged": {
"*.{js,jsx,vue}": ["npm run lint", "git add"]
}
}