一、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统一代码风格，规避风格不一致的问题。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/294188.html
微信扫一扫 
支付宝扫一扫 