vscode 使用Prettier插件格式化配置使用代码详解

一、介绍

Prettier 是一款应用广泛的代码格式化工具，可以将代码格式化为符合约定的样式。它支持多种编程语言，可以自动识别代码中的错误格式，并按照你的配置进行更改。而在 VSCode 中，借助插件 Prettier 可以很方便地使用这个强大的工具。

二、安装插件

在 VSCode 中，打开扩展面板（快捷键为 Ctrl + Shift + X 或者通过菜单栏「查看」-> 「扩展」），搜索 Prettier 插件并安装。

三、配置

安装完插件之后，我们还需要进行一些配置，才能更好的使用 Prettier。

1. 自动生成格式化配置文件

首先，我们需要生成一个格式化配置文件，这更加方便我们定制化自己的代码风格。

在终端输入以下命令：

npx prettier --write .

这个命令会在项目根目录下生成一个 .prettierrc 格式化配置文件，你可以在此基础上修改为自己需要的格式。

2. 设置 VSCode 使用 Prettier

通过以下步骤设置 VSCode 使用 Prettier：

1. 使用快捷键 Ctrl + Shift + P 或者菜单栏「查看」-> 「命令面板」，输入 「settings」，然后选择「首选项: 打开用户设置」。

2. 在搜索框中输入 「format」，找到「Developer: 在编辑器中格式化时使用的默认格式化程序」。

3. 点击「编辑 settings.json」并添加下面的配置：

"[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
},

"[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
},

"[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
},

"[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
},

这份设置表示：

当格式化 JavaScript、TypeScript、HTML 和 JSON 文件时，使用 Prettier 作为默认格式化程序并在保存文件时自动格式化。

3. 配置 Prettier 的规则

最后，我们需要配置 Prettier 的规则，以便它可以按照我们的要求自动格式化代码。

例如，我们可以在 .prettierrc 文件中配置以下规则：

{
  "endOfLine": "auto",
  "semi": false,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "all"
}

这个配置表示：

• endOfLine: 自动检测换行符类型
• semi: 不使用分号
• singleQuote: 使用单引号
• tabWidth: 缩进大小为 2
• trailingComma: 所有数组和对象都使用尾随逗号

以上就是配置 Prettier 的基本流程，有了这些配置，我们就可以自由地愉快地使用它了。

四、示例

1. 示例一

代码之前未使用 Prettier 格式化：

const arr = [1, 2, 3, 4];

for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}

将 Prettier 配置为自动格式化代码，保存后代码自动格式化为：

const arr = [1, 2, 3, 4];

for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}

2. 示例二

代码之前未使用 Prettier 格式化：

const foo = function () {
console.log('hello');
}

将 Prettier 配置为自动格式化代码，保存后代码自动格式化为：

const foo = function () {
  console.log('hello');
};

这些示例展示了 Prettier 自动格式化和美化代码的效果，方便开发者在写代码过程中处理代码规范。