prettier的使用
prettier是个格式化插件,与eslint存在部分功能重复,但在格式化方面更加强大,可以配合eslint-config-prettier或者stylelint-config-prettier来关闭eslint中prettier已有的功能或者冲突的功能
安装
shell
# --save-exact表示固定版本号,即不用 ^ ~ 等
pnpm add --save-dev --save-exact prettier
创建配置文件 prettier.config.js
js
// 每个配置项的测试命令
// pnpm prettier temp.html --write
// 一些常用配置说明
module.exports = {
printWidth: 100, // 一行超过100个字符就换行,默认是80
semi: false, // 行尾是否加分号,默认true
// vue单文件组件中,是否对script中的根内容进行缩进, 默认false,设置为false可以少占用一次tab空间
vueIndentScriptAndStyle: false,
singleQuote: true, // 使用单引号代替双引号, 默认false
trailingComma: 'all', // 是否允许尾逗号,比如对象末尾的逗号,函数参数末尾,函数调用末尾,默认all,表示自动添加尾逗号,这样下次添加一行后,不会在diff时出现修改了2行
proseWrap: 'never', // md文件超出printWidth后是否换行,never 强制一段文字都在一行, 默认值preserve,表示不做任何操作
// html标签内的空格是否保留, 默认值css
// css: 对于inline元素,和strict行为一样,对于block元素,删除所有空格, 如果超出了printWidth,不带标签换行
// strict: 行内元素(span)内部如果有多个空格或者换行,保留一个空格,因为多个空格和一个是一样的效果
// block元素,内部有多个空格也是保留一个空格,换行也会转回不换行,只保留一个空格,如果一行内容超出了printWidth且没有空格,block元素会带着标签换行,保证不出现空格
// <div
// >内容</div
// > // 这就是带标签换行, 保证和原先一样没有空格,即空格敏感型
// ignore:删除标签所有两侧所有空格
htmlWhitespaceSensitivity: 'strict',
endOfLine: 'lf', // 换行符用哪个符号,默认lf, auto表示保留文件原先的换行符,如果一个文件有多种换行符,默认取第一行的换行符
}
创建过滤文件.prettierignore
/dist/*
.local
/node_modules/**
**/*.svg
**/*.sh
/public/*
对项目进行一次全局格式化
shell
pnpm exec prettier --write .
编辑器集成
添加git hook,提交时自动格式化
shell
# 安装husky,方面写git hook的工具, 安装lint-staged, lint-staged只会处理staged中的文件
pnpm add --save-dev husky lint-staged
# 初始化husky,主要就是创建了.husky文件夹,如果你遇到了问题,可以看后续的关于husky初始化的问题介绍,或者直接看官网
pnpm exec husky install
# 添加prepare命令,这样项目组其他人 pnmp i之后会自动执行pnpm prepare,就能实现husky的初始化
npm pkg set scripts.prepare="husky install"
# 添加git hooks, 在commit时候会先执行pnpm exec lint-staged,执行这个命令时需要有个配置文件,也可以把配置写在package.json里面,参照下面的package.json里面的配置
pnpm exec husky add .husky/pre-commit "pnpm exec lint-staged"
# 把生成的hook文件提交到git, 共享给其他成员
git add .husky/pre-commit
在package.json里面添加lint-staged
json
{
"lint-staged": {
"**/*": "prettier --write --ignore-unknown"
}
}
现在git commit时会先执行pnpm exec lint-staged, 如果格式化失败,本次提交也会失败
husky初始化的问题
当husky初始化目录与.git目录不同时,需要手动在package.json里面添加命令,指定目录
json
{
"scripts": {
"prepare": "cd .. && husky install front/.husky"
}
}
同时添加的hook也要先打开目录
shell
pnpm exec husky add .husky/pre-commit "cd front && pnpm exec lint-staged"