详细讲一下Prettier对我们日常开发的作用，以及详细用法

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: 2
  function 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 的好处：

不用再手动调整代码格式

团队代码风格统一

提高代码可读性

减少代码审查中的格式相关讨论

可以专注于代码逻辑而不是格式