1.什么是 Prettier？
javascript">// Prettier 是代码格式化工具，它可以自动调整代码格式
// 比如把这样的代码：
function foo ( a, b ){
return a+b;
}// 自动格式化成这样：
function foo(a, b) {return a + b;
}
2.基础配置详解
javascript">{// 控制每行代码的最大长度，超过会自动换行"printWidth": 80,// true: 使用单引号, false: 使用双引号"singleQuote": true,// 示例：// 单引号：const name = 'john'// 双引号：const name = "john"// 控制缩进的空格数"tabWidth": 2,// 示例：// tabWidth: 2function example() {··return true;}// 是否在语句末尾添加分号"semi": true,// true: const name = "john";// false: const name = "john"// 对象花括号中是否添加空格"bracketSpacing": true,// true: { foo: bar }// false: {foo: bar}
}
3.实际使用场景
javascript">// 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.在项目中使用
javascript"># 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.常见配置组合
javascript">// 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.与编辑器集成
javascript">// 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 的好处：
