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

  • 不用再手动调整代码格式
  • 团队代码风格统一
  • 提高代码可读性
  • 减少代码审查中的格式相关讨论
  • 可以专注于代码逻辑而不是格式
相关推荐
Struggler2817 分钟前
Chrome插件开发
前端
前端 贾公子20 分钟前
Monorepo + vite 怎么热更新
前端
coding随想29 分钟前
掌控网页的魔法之书:JavaScript DOM的奇幻之旅
开发语言·javascript·ecmascript
然我1 小时前
不用 Redux 也能全局状态管理?看我用 useReducer+Context 搞个 Todo 应用
前端·javascript·react.js
前端小巷子1 小时前
Web 实时通信:从短轮询到 WebSocket
前端·javascript·面试
神仙别闹1 小时前
基于C#+SQL Server实现(Web)学生选课管理系统
前端·数据库·c#
web前端神器1 小时前
指定阿里镜像原理
前端
枷锁—sha1 小时前
【DVWA系列】——CSRF——Medium详细教程
android·服务器·前端·web安全·网络安全·csrf
枷锁—sha1 小时前
跨站请求伪造漏洞(CSRF)详解
运维·服务器·前端·web安全·网络安全·csrf
群联云防护小杜2 小时前
深度隐匿源IP:高防+群联AI云防护防绕过实战
运维·服务器·前端·网络·人工智能·网络协议·tcp/ip