Prettier、EditorConfig插件安装及配置文件讲解_prettier插件

安装 Prettier

我们在编写代码时，代码的格式规范非常重要，能提高代码的可读性，避免由于格式问题引起的 bug，也有利于多人协作开发时的统一风格。Prettier是一个非常好用的代码格式化工具，能自动格式化代码，让我们更专注于编写逻辑。

首先，需要在项目中安装Prettier。可以使用npm或yarn：

npm install --save-dev prettier
1

或者

yarn add --dev prettier
1

如果是适用于vue3以下：

npm i -D prettier eslint-plugin-prettier eslint-config-prettier prettier-eslint-cli
1

适用于vue3：

npm i -D prettier eslint-plugin-prettier @vue/eslint-config-prettier
1

安装完成后，在项目中创建一个 .prettierrc 文件来配置Prettier选项，例如设置缩进、换行符、引号等。这个文件可以放在项目的根目录或子目录中。

配置示例

{
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
  "trailingComma": "es5",
  "bracketSpacing": true,
  "jsxBracketSameLine": false,
  "arrowParens": "avoid",
  "endOfLine": "lf"
}
1
2
3
4
5
6
7
8
9
10
11
12

下面是各个选项的详细描述：

• printWidth：规定一行的最大宽度，在超过设定的宽度后会自动换行。默认为 80。
• tabWidth：设定缩进的空格数。默认为 2。
• useTabs：确定是否使用 tab 进行缩进。默认为 false，即使用空格进行缩进。
• semi：决定是否在语句末尾加上分号。默认为 true。
• singleQuote：设定是否使用单引号。默认为 false，即使用双引号。
• trailingComma：规定是否在对象或数组的最后一项后面添加逗号。可选值为 “none”、“es5” 和 “all”。
• bracketSpacing：决定在对象字面量的括号内是否添加空格。默认为 true。
• jsxBracketSameLine：规定是否将 JSX 元素的闭合括号放在末尾。默认为 false，即放在新的一行。
• arrowParens：设定在箭头函数的参数周围是否加上括号。可选值为 “avoid” 和 “always”。默认为 “avoid”。
• endOfLine：定义换行符的类型。可选值为 “auto”、“lf” 和 “crlf”。默认为 “auto”，即自动检测换行符类型。

这些是常用选项，Prettier 还提供了更多选项，具体可参考官方文档。此配置文件能够通过设置这些选项，影响 Prettier 格式化代码的方式。

使用Prettier

可以通过命令行工具、编辑器插件或自动化构建工具来使用Prettier格式化代码。例如，使用命令行工具：

prettier --write src/**/*.js
1

这个命令会自动格式化src目录下所有.js文件。

如果使用VS Code编辑器，可以安装Prettier插件，方便使用。安装完成后，可以在编辑器设置中搜索prettier进行相关配置。

局部配置和全局配置

局部配置

在项目中的某个文件夹或文件中单独配置Prettier选项。适用于项目中存在不同的代码格式化要求的情况。

在项目的根目录下创建.prettierrc文件（局部的只对本项目有效），设置需要的选项。例如：

{
  "printWidth": 200, // 规定一行的最大宽度，超过这个宽度则会自动换行。通常设置为100或120
  "tabWidth": 2, // tab缩进大小, 默认值为 2
  "useTabs": false, // 使用tab缩进, 默认false
  "semi": false, // 行末分号, 默认true
  "singleQuote": true, // 使用单引号, 默认false
  quoteProps: "as-needed", // 仅在需要时在对象属性周围添加引号, 默认'as-needed'
  "trailingComma": "none", // 结尾是否强制添加逗号，默认none, 可选 none|es5|all
  "bracketSpacing": true, // 对象中的空格, 默认true, 在对象，数组括号与文字之间加空格 "{ foo: bar }"
  "jsxBracketSameLine": false,  // 规定是否将 JSX 元素的闭合括号放在末尾。默认为 false，即放在新的一行。
  "arrowParens": "avoid",    // (x) => {} 箭头函数参数只有一个时是否要有小括号, avoid: 省略括号
  "endOfLine": "lf",  // 定义换行符的类型。可选值为 "auto"、"lf" 和 "crlf"。默认为 "auto"
  "jsxSingleQuote": false, // jsx中是否使用单引号, 默认false
  "vueIndentScriptAndStyle": false // vue文件的script标签和Style标签下的内容需要缩进, 默认false
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

全局配置

在本地计算机上单独配置Prettier选项。适用于多个项目中都需要相同的代码格式化要求的情况。

在本地安装Prettier后，在用户目录下创建.prettierrc文件，设置选项。例如：

{
  "tabWidth": 4
}
1
2
3

在项目中，我们可以在 .prettierrc 文件中设置这些选项，以便 Prettier 根据这些选项来格式化代码。另外，我们还可以在命令行中使用 --print-width、--tab-width 等选项来覆盖 .prettierrc 文件中的设置。

总之，.prettierrc 文件是 Prettier 的配置文件，用于设置 Prettier 的选项。根据需要进行设置，可以提高代码的可读性和可维护性。

安装EditorConfig

用来设置vscode的编程行为
安装 EditorConfig 可以帮助团队在不同的编辑器和IDE中保持一致的代码风格和格式。以下是安装 EditorConfig 的详细步骤：

步骤一：编辑器支持

首先，确保你使用的编辑器支持 EditorConfig 插件。大多数主流编辑器（如 VS Code、Sublime Text、Atom、IntelliJ IDEA 等）都有对应的 EditorConfig 插件，你可以在编辑器的插件市场或扩展商店中搜索并安装。

步骤二：安装 EditorConfig 插件

1. 使用 VS Code 编辑器的安装步骤：

   • 打开 VS Code，点击左侧的扩展图标（或使用快捷键 Ctrl+Shift+X）。
   • 在搜索框中输入 “EditorConfig for VS Code”。
   • 找到该插件并点击安装。

2. 其他编辑器的安装步骤：

   • 打开你的编辑器。
   • 转到编辑器的插件管理器或扩展商店。
   • 搜索 “EditorConfig” 并安装对应的插件。

步骤三：项目中配置 EditorConfig

1. 在项目的根目录创建一个名为 .editorconfig 的文件。

2. 编辑 .editorconfig 文件，添加你想要的代码风格和格式规则。例如：

# 顶部描述文件格式和风格的基本规则

# 通用设置，适用于所有文件类型
root = true

# 统一使用 LF 作为换行符
[*]
end_of_line = lf
indent_style = space
indent_size = 2
trim_trailing_whitespace = true
insert_final_newline = true
 
[*.md]
trim_trailing_whitespace = false

# JavaScript 和 TypeScript 文件
[*.js]
indent_size = 4

# Python 文件
[*.py]
indent_style = tab
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

常见的配置项说明

.editorconfig 文件中的每一项用于定义特定文件类型的编辑器配置。以下是常见的配置项说明：

root

• 说明：指定是否在查找 .editorconfig 文件时停止查找更高级别的目录。当设为 true 时，表示这是项目的根目录，编辑器将停止在父级目录中查找其他 .editorconfig 文件。
• 示例：root = true

[*]

• 说明：通用设置，适用于所有文件类型。
• 示例：
  • end_of_line：定义换行符类型，可选值为 lf（仅换行）、cr（回车）、crlf（回车+换行）。
  • indent_style：缩进风格，可选值为 space（空格）或 tab（制表符）。
  • indent_size：缩进的空格数或制表符宽度。
  • trim_trailing_whitespace：是否删除行尾多余的空格。
  • insert_final_newline：是否在文件末尾插入空行。

[.js], [.py], [*.html] 等

• 说明：针对特定文件类型的设置。
• 示例：
  • indent_size：特定文件类型的缩进宽度。
  • indent_style：特定文件类型的缩进风格。
  • max_line_length：特定文件类型的最大行宽度限制。
  • charset：特定文件类型的字符编码设置。

其他自定义设置

根据需要，可以添加其他自定义设置，根据文件扩展名或者文件名模式来定义特定文件类型的编辑器配置。

每个设置项都有不同的作用，能够影响文件的换行符类型、缩进风格、空格或制表符的数量、行尾空格的处理方式等。在实际使用中，根据项目需求和团队约定，适配合适的配置项来保持代码的一致性和可读性。

这个示例文件设置了通用规则（适用于所有文件类型）、JavaScript、TypeScript 和 Python 文件的格式规则。

3. 保存 .editorconfig 文件。

步骤四：验证配置

关闭并重新打开项目中的文件，确保编辑器能够根据 .editorconfig 文件中的规则自动调整文件的格式和风格。

安装 EditorConfig 的过程相对简单，但确保所有团队成员都按照相同的规则来编辑代码，从而确保代码的一致性和可读性。

安装 eslint + prettier

代码规范：如果没有统一代码风格，团队协作不便于查看代码提交时所做的修改。

例子：uni-app Vu3项目

pnpm i -D eslint prettier eslint-plugin-vue @vue/eslint-config-prettier @vue/eslint-config-typescript @rushstack/eslint-patch @vue/tsconfig
1

• 新建 .eslintrc.cjs 文件，添加以下 eslint 配置

/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution')

module.exports = {
  root: true,
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/eslint-config-typescript',
    '@vue/eslint-config-prettier',
  ],
  // 小程序全局变量
  globals: {
    uni: true,
    wx: true,
    WechatMiniprogram: true,
    getCurrentPages: true,
    getApp: true,
    UniApp: true,
    UniHelper: true,
    App: true,
    Page: true,
    Component: true,
    AnyObject: true,
  },
  parserOptions: {
    ecmaVersion: 'latest',
  },
  rules: {
    'prettier/prettier': [
      'warn',
      {
        singleQuote: true,
        semi: false,
        printWidth: 100,
        trailingComma: 'all',
        endOfLine: 'auto',
      },
    ],
    'vue/multi-word-component-names': ['off'],
    'vue/no-setup-props-destructure': ['off'],
    'vue/no-deprecated-html-element-is': ['off'],
    '@typescript-eslint/no-unused-vars': ['off'],
  },
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

• 配置 package.json

{
  "script": {
    // ... 省略 ...
    "lint": "eslint . --ext .vue,.js,.ts --fix --ignore-path .gitignore"
  }
}
1
2
3
4
5
6

• 运行

pnpm lint
1

提示：已经完成 eslint + prettier 的配置。

React 项目中使用 Prettier

要在 React 项目中使用 Prettier，你可以按照以下步骤安装并配置：

1. 安装 Prettier：首先，确保你的项目中已经安装了 Prettier。如果没有安装，可以使用 npm 或 yarn 进行安装：

   npm install --save-dev prettier
   1

   或者

   yarn add --dev prettier
   1

2. 创建 .prettierrc 文件：在项目的根目录下创建一个名为 .prettierrc 的文件。这个文件将用来存放 Prettier 的配置。

3. 配置 .prettierrc：在 .prettierrc 文件中，你可以设置 Prettier 的格式化规则。例如：

   {
     "semi": false,
     "singleQuote": true,
     "tabWidth": 2,
     "useTabs": false
   }
   1
   2
   3
   4
   5
   6

   这里的配置表示不使用分号、使用单引号、每个缩进使用两个空格等。

4. 集成编辑器插件：为了方便使用，你可以在你的代码编辑器中安装 Prettier 插件，以便自动应用这些格式化规则。

5. 运行 Prettier：你可以运行 prettier 命令，格式化你的代码文件。比如：

   npx prettier --write .
   1

   这个命令会格式化项目中的所有文件。

通过这些步骤，你就能够在 React 项目中成功安装并配置 Prettier。

.prettierrc不起作用是什么原因

.prettierrc 文件未能生效的原因可能有以下几种：

1. 文件位置错误：确保 .prettierrc 文件位于项目的根目录下。如果它被放置在了其他地方，Prettier 可能无法正确读取该配置文件。

2. 文件名错误：检查文件名是否拼写正确。确保文件名为 .prettierrc，没有拼写错误或者额外的后缀。

3. 格式错误：确认 .prettierrc 文件中的 JSON 格式是否正确。任何语法错误都会导致 Prettier 无法正确解析配置文件。

4. 编辑器插件冲突：某些情况下，其他格式化插件（如 ESLint）可能会与 Prettier 冲突。请检查编辑器中的插件设置，确保 Prettier 插件被正确配置并且没有被其他插件所覆盖。

5. 全局配置覆盖：全局 Prettier 配置有时会覆盖项目级别的配置。检查全局 Prettier 配置，或者尝试在项目中使用本地的 Prettier 包。

6. 缓存问题：有时候编辑器或构建工具可能会缓存配置文件。尝试清除缓存并重新启动编辑器或构建工具。

通过仔细检查这些方面，你应该能够找出为什么 .prettierrc 文件没有按预期工作的原因，并解决相应的问题。

总结

.prettierrc 文件是用来配置 Prettier 格式化工具的文件，就好像是给格式化工具一张“规则清单”，告诉它在处理代码时应该怎么做。你可以在这个文件中设置诸如是否使用分号、使用单引号还是双引号、缩进大小等格式化规则，确保整个团队的代码都能保持一致的风格。
要安装 EditorConfig 插件，你需要首先在你使用的编辑器中找到插件市场或扩展商店，搜索并安装名为 “EditorConfig” 的插件。安装完成后，你可以在项目根目录下创建一个名为 .editorconfig 的文件，并在其中定义代码风格规则，比如缩进类型、大小等。这个文件的作用就像是给团队内的开发者一份“规范手册”，确保大家都使用相同的代码风格，从而避免因为代码格式不一致而产生的问题。