1.什么是 Prettier？
// Prettier 是代码格式化工具，它可以自动调整代码格式
// 比如把这样的代码：
function foo ( a, b ){
return a+b;
}
// 自动格式化成这样：
function foo(a, b) {
return a + b;
}
2.基础配置详解
{
// 控制每行代码的最大长度，超过会自动换行
"printWidth": 80,
// true: 使用单引号, false: 使用双引号
"singleQuote": true,
// 示例：
// 单引号：const name = 'john'
// 双引号：const name = "john"
// 控制缩进的空格数
"tabWidth": 2,
// 示例：
// tabWidth: 2
function example() {
··return true;
}
// 是否在语句末尾添加分号
"semi": true,
// true: const name = "john";
// false: const name = "john"
// 对象花括号中是否添加空格
"bracketSpacing": true,
// true: { foo: bar }
// false: {foo: bar}
}
3.实际使用场景
// 1. 对象格式化
// 格式化前：
const user={name:"john",age:20,city:"New York"};
// 格式化后：
const user = {
name: "john",
age: 20,
city: "New York"
};
// 2. 数组格式化
// 格式化前：
const fruits=['apple','banana','orange','grape'];
// 格式化后：
const fruits = [
'apple',
'banana',
'orange',
'grape'
];
// 3. 函数格式化
// 格式化前：
function calculate(a,b,c){return a+b*c;}
// 格式化后：
function calculate(a, b, c) {
return a + b * c;
}
4.在项目中使用
# 1. 安装 Prettier
npm install --save-dev prettier
# 2. 创建配置文件
# 在项目根目录创建 .prettierrc 文件
# 3. 添加格式化命令到 package.json
{
"scripts": {
"format": "prettier --write \"src/**/*.{js,jsx,ts,tsx,vue,css,scss}\""
}
}
# 4. 运行格式化
npm run format
5.常见配置组合
// 1. 基础配置（适合大多数项目）
{
"printWidth": 80,
"tabWidth": 2,
"singleQuote": true,
"semi": true,
"trailingComma": "es5",
"bracketSpacing": true
}
// 2. Vue项目配置
{
"singleQuote": true,
"semi": false,
"vueIndentScriptAndStyle": true,
"htmlWhitespaceSensitivity": "ignore",
"endOfLine": "auto"
}
// 3. React项目配置
{
"singleQuote": true,
"jsxSingleQuote": true,
"semi": true,
"tabWidth": 2,
"bracketSpacing": true,
"jsxBracketSameLine": false,
"arrowParens": "always"
}
6.与编辑器集成
// VS Code 设置
{
// 保存时自动格式化
"editor.formatOnSave": true,
// 将 Prettier 设置为默认格式化工具
"editor.defaultFormatter": "esbenp.prettier-vscode",
// 针对不同语言设置
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[vue]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
}
7.使用 Prettier 的好处：
