详细讲一下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 的好处:

  • 不用再手动调整代码格式
  • 团队代码风格统一
  • 提高代码可读性
  • 减少代码审查中的格式相关讨论
  • 可以专注于代码逻辑而不是格式
相关推荐
慧一居士11 分钟前
flex 布局完整功能介绍和示例演示
前端
DoraBigHead13 分钟前
小哆啦解题记——两数失踪事件
前端·算法·面试
一斤代码6 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子6 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年6 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子6 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina6 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路7 小时前
React--Fiber 架构
前端·react.js·架构
coderlin_7 小时前
BI布局拖拽 (1) 深入react-gird-layout源码
android·javascript·react.js
伍哥的传说8 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js