关于.prettierrc代码格式化配置方式

Prettier 是一款代码格式化工具，可以快速地帮助程序员完成代码格式化的需求，让代码整洁可读。在使用 Prettier 的过程中，我们可以通过配置 .prettierrc 来自定义代码格式化规则。

下面，我将详细讲解关于 .prettierrc 配置的完整攻略。

创建 .prettierrc 文件

首先，我们需要在项目根目录下创建一个 .prettierrc 文件。在该文件中，我们将会定义 Prettier 的代码格式化规则。

定义规则

在 .prettierrc 文件中，格式化规则都是以键值对的形式定义的。下面，我将对其中比较重要的几个规则进行讲解。

• tabWidth：规定一个制表符的宽度，默认为 2。
• printWidth：规定单行代码最多可以有多少个字符，默认为 80。
• semi：规定是否在语句末尾添加分号，默认为 true。
• singleQuote：规定是否使用单引号代替双引号，默认为 false。
• trailingComma：规定多行数组或对象字面量的最后一项后是否加逗号，默认为 none。

举个例子，如果我想要把制表符的宽度改为 4，同时取消掉在语句末尾添加分号这一规则，我可以这样定义：

{
  "tabWidth": 4,
  "semi": false
}

示例说明

以下是两个示例，用来说明如何在 .prettierrc 文件中定义规则：

示例 1：

下面是一个 JavaScript 文件，使用了单引号、不添加分号和取消结尾逗号等 Prettier 规则：

function greet(name) {
  console.log(`Hello, ${name}!`)
}

const people = [
  'Alice',
  'Bob',
  'Charlie'
]

export default greet

对应的 .prettierrc 文件应该长这样：

{
  "semi": false,
  "singleQuote": true,
  "trailingComma": "none"
}

示例 2：

下面是一个 TypeScript 文件，使用了一个制表符和 80 个字符宽度等 Prettier 规则：

interface MyInterface {
    name: string
    age: number
}

const me: MyInterface = {
    name: 'Alice',
    age: 18
}

function sayHi() {
    console.log('Hi!')
}

export { MyInterface, me, sayHi }

对应的 .prettierrc 文件应该长这样：

{
  "tabWidth": 1,
  "printWidth": 80
}

以上就是关于 .prettierrc 文件配置方式的详细攻略。希望能够对您有所帮助！