一、Prettier介绍
Prettier是一个快速、强制一致的JavaScript/TypeScript代码格式化工具,不仅仅支持JavaScript和TypeScript,还支持HTML、CSS、JSON、Markdown等多种语言。
相较于其他代码格式化工具,Prettier有以下几个特点:
1、支持自动适应ES6+语法,比如箭头函数、模板字面量、可选链式调用等。
2、强制性格式化,相同的代码在不同的开发者环境下,格式都是一致的,避免了团队代码风格不统一的问题。
3、Prettier对于代码格式的优化和排版,比其他类似工具更优秀,让代码看起来更美观、简洁。
二、在项目中使用Prettier
1、全局安装Prettier:
npm install prettier -g
2、在项目中安装Prettier:
npm install prettier --dev --save-exact
安装完成后,可以使用Prettier的命令行工具格式化代码,如:
prettier --write src/**/*.js
其中--write的意思是将格式化结果覆盖到原文件中,src/**/*.js是格式化所有src目录下的js文件。也可以使用--check命令检查是否符合规范,如:
prettier --check src/**/*.js
3、在编辑器中使用Prettier:建议在编辑器中安装Prettier插件,当保存文件时会自动格式化代码。
在VS Code中安装Prettier插件的方法:
1、按Ctrl+Shift+X打开扩展搜索框,搜索Prettier安装即可。
2、在.vscode/settings.json文件中添加以下配置(可选):
{
"editor.formatOnSave": true, //每次保存代码自动格式化
"editor.defaultFormatter": "esbenp.prettier-vscode" //指定Prettier为默认代码格式化工具
}
三、Prettier的配置项
Prettier提供了很多配置项,可以根据自己的需要进行定制。例如:
1、tabWidth:指定缩进的空格数,默认为2。
{
"tabWidth": 4
}
2、semi:控制是否在语句末尾加上分号,默认为true。
{
"semi": false
}
3、singleQuote:控制是否使用单引号代替双引号。
{
"singleQuote": true
}
使用方法:在项目中新建一个.prettierrc.json文件,并添加需要的配置项。
四、与ESLint集成
ESLint是一个代码检查工具,常用于检查代码质量和风格问题。
将Prettier与ESLint结合使用可以实现代码格式化与代码质量检查的结合。
步骤如下:
1、安装ESLint的prettier插件:
npm install eslint-plugin-prettier --save-dev
2、在ESLint配置中添加prettier插件,并进行相关配置:
{
"extends": [
"eslint:recommended",
"plugin:prettier/recommended" //添加prettier插件
],
"plugins": [
"prettier"
],
"rules": {
"prettier/prettier": "error", //规则配置
//...
}
}
3、根据自己的需求添加其他需要的规则。
五、与Git结合使用
将Prettier与Git结合使用可以实现在代码提交前自动格式化代码,并确保代码仓库中所有的代码都符合同一种风格。
方法如下:
1、使用.git/hooks/pre-commit文件,在代码提交前自动执行Prettier检测和格式化:
#!/bin/sh
echo -e "\\033[1;33mRunning Prettier...\\033[0m"
if ! git diff --diff-filter=d --cached --exit-code --quiet -- '*.js' '*.jsx' '*.ts' '*.tsx' '*.html' '*.css'; then
echo -e "\\033[1;31mThis commit will not be executed because there are unformatted file(s)\\033[0m"
exit 1
fi
prettier --list-different '**/*.+(js|jsx|json|less|css|ts|tsx|md|graphql|yml|yaml)'
if [ $? -ne 0 ]; then
echo -e "\\033[1;31mThis commit will not be executed because there are unformatted file(s)\\033[0m"
exit 1
fi
echo -e "\\033[1;32mPrettier has completed !\\033[0m"
exit 0
2、安装Husky,并在.git/hooks/pre-commit文件中添加precommit命令:
npm install husky --save-dev
npx husky add .husky/pre-commit "bash .git/hooks/pre-commit"
3、在项目中添加Prettier配置文件,如上文所述。
六、小结
Prettier是一款优秀的代码格式化工具,能够让我们在开发中省去代码风格的细节问题。通过与编辑器、ESLint、Git等工具的结合,可以进一步提高代码质量和开发效率。在团队协作中,可以使用Prettier统一代码风格,规避风格不一致的问题。