知识库

Appearance

Return to top
On this page

Prettier格式化规则

Prettier通过一系列内置规则来格式化代码，这些规则旨在提高代码的可读性和一致性。本指南详细介绍了Prettier的各种格式化规则和配置选项。

代码结构规则

换行规则

Prettier根据printWidth选项控制代码换行：

json
{
  "printWidth": 80
}

当代码超过指定宽度时，Prettier会自动换行。例如：

javascript
// 换行前
const veryLongVariableName = anotherVeryLongVariableName.someMethod(anotherVeryLongVariableName.anotherVeryLongProperty);

// 换行后
const veryLongVariableName = anotherVeryLongVariableName.someMethod(
  anotherVeryLongVariableName.anotherVeryLongProperty
);

缩进规则

Prettier使用tabWidth和useTabs选项控制缩进：

json
{
  "tabWidth": 2,
  "useTabs": false
}

语句和表达式规则

分号规则

通过semi选项控制分号的使用：

json
{
  "semi": true
}
javascript
// semi: true
console.log('hello');

// semi: false
console.log('hello')

对象和数组规则

对象括号间距

bracketSpacing选项控制对象括号内的间距：

json
{
  "bracketSpacing": true  // 默认值
}
javascript
// bracketSpacing: true
console.log({ foo: 'bar' });

// bracketSpacing: false
console.log({foo: 'bar'});

尾随逗号

trailingComma选项控制尾随逗号的使用：

json
{
  "trailingComma": "es5"
}
javascript
// trailingComma: "es5"
const obj = {
  foo: 'bar',
  baz: 'qux',  // 在ES5中合法
};

// trailingComma: "none"
const obj = {
  foo: 'bar',
  baz: 'qux'
};

// trailingComma: "all"
const obj = {
  foo: 'bar',
  baz: 'qux',  // 在所有情况下都添加逗号
};

函数和箭头函数规则

箭头函数参数括号

arrowParens选项控制箭头函数参数的括号：

json
{
  "arrowParens": "avoid"  // 默认值
}
javascript
// arrowParens: "avoid"
const greet = name => console.log(name);

// arrowParens: "always"
const greet = (name) => console.log(name);

字符串和引号规则

引号使用

singleQuote选项控制引号的使用：

json
{
  "singleQuote": false  // 默认值，使用双引号
}
javascript
// singleQuote: false
const message = "Hello World";

// singleQuote: true
const message = 'Hello World';

JSX引号

jsxSingleQuote选项控制JSX中的引号使用：

json
{
  "jsxSingleQuote": false
}
jsx
// jsxSingleQuote: false
<div className="container">Hello</div>

// jsxSingleQuote: true
<div className='container'>Hello</div>

空格规则

对象属性引号

quoteProps选项控制对象属性是否使用引号：

json
{
  "quoteProps": "as-needed"  // 默认值
}
javascript
// quoteProps: "as-needed"
const obj = {
  validProperty: 'value',
  'invalid-property': 'value'
};

// quoteProps: "consistent"
const obj = {
  'validProperty': 'value',
  'invalid-property': 'value'
};

// quoteProps: "preserve" (保留原始格式)
const obj = {
  validProperty: 'value',
  'invalid-property': 'value'
};

语言特定规则

JavaScript规则

空行处理

Prettier会自动处理空行，保持适当的间距：

javascript
function greet(name) {
  console.log('Hello');
  
  console.log(name);
}

立即执行函数

javascript
// 格式化前
(function() {
  console.log('Hello');
})();

// 格式化后
(function () {
  console.log('Hello');
})();

TypeScript规则

Prettier完全支持TypeScript，包括类型注解：

typescript
interface User {
  name: string;
  age: number;
  email?: string;
}

const createUser = (name: string, age: number): User => {
  return {
    name,
    age,
  };
};

CSS规则

Prettier也可以格式化CSS：

css
/* 格式化前 */
.container{margin:0;padding:10px;}

/* 格式化后 */
.container {
  margin: 0;
  padding: 10px;
}

JSON规则

json
{
  "name": "my-project",
  "version": "1.0.0",
  "dependencies": {
    "prettier": "^2.0.0"
  }
}

特殊语法处理

模板字符串

javascript
// 格式化前
const message = `Hello ${name}, you have ${count} messages`;

// Prettier会保持模板字符串的格式

解构赋值

javascript
// 格式化前
const {firstName,lastName,age,location:{city,state}} = user;

// 格式化后
const {
  firstName,
  lastName,
  age,
  location: { city, state },
} = user;

数组和对象展开

javascript
// 格式化前
const newArray = [...items,...otherItems,additionalItem];

// 格式化后
const newArray = [...items, ...otherItems, additionalItem];

条件和循环语句规则

if语句

javascript
// Prettier保持一致的if语句格式
if (condition) {
  doSomething();
} else if (anotherCondition) {
  doSomethingElse();
} else {
  fallback();
}

三元运算符

javascript
// 当三元运算符过长时，Prettier会换行
const result = someVeryLongCondition
  ? valueForTrue
  : valueForFalse;

注释处理

Prettier会保留注释并重新格式化它们：

javascript
// 这是一个注释
function example() {
  // 另一个注释
  return true;
}

特殊配置规则

行内注释禁用

您可以使用特殊注释在特定行禁用Prettier：

javascript
// prettier-ignore
const array = [1,2,3,4,5,6,7,8,9,10];

范围禁用

javascript
/* prettier-ignore-start */
const complicated = {
  // 格式保持不变
  "key1": "value1",
  "key2": "value2"
};
/* prettier-ignore-end */

性能相关规则

大文件处理

Prettier在处理大文件时会应用特殊的优化规则，确保格式化过程不会超时。

内存使用

Prettier被设计为高效使用内存，即使在处理大型代码库时也是如此。

规则优先级

Prettier的规则优先级如下：

  1. 语言语法要求（最高优先级）
  2. Prettier内置规则
  3. 用户配置选项
  4. 文件特定覆盖

规则的不可配置性

Prettier的许多规则是不可配置的，这是其设计理念的一部分。例如：

  • 使用空格还是制表符缩进（可通过useTabs配置）
  • 括号内的空格（可通过bracketSpacing配置）
  • 但是，括号的位置、运算符周围的空格等是固定的

这种设计旨在消除团队内部关于代码风格的争论，强制执行一致的代码格式。