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

安装 Prettier

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

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

npm install --save-dev prettier

或者

yarn add --dev prettier

如果是适用于vue3以下：

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

适用于vue3：

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

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

配置示例

{
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
  "trailingComma": "es5",
  "bracketSpacing": true,
  "jsxBracketSameLine": false,
  "arrowParens": "avoid",
  "endOfLine": "lf"
}

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

• 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

这个命令会自动格式化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
}

全局配置

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

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

{
  "tabWidth": 4
}

在项目中，我们可以在 .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

常见的配置项说明

.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

• 新建 .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'],
  },
}

• 配置 package.json

{
  "script": {
    // ... 省略 ...
    "lint": "eslint . --ext .vue,.js,.ts --fix --ignore-path .gitignore"
  }
}

• 运行

pnpm lint

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