代码格式化

我们使用 Prettier 来格式化代码。

快速开始

TIP

如果项目使用 pnpm Workspace，则​​应该添加 -w 参数安装在项目根目录。

ni -D prettier @ianvs/prettier-plugin-sort-imports

prettier.config.js

/** @type {import('@ianvs/prettier-plugin-sort-imports').PrettierConfig} */
export default {
  semi: false,
  overrides: [
    {
      files: "pnpm-lock.yaml",
      options: {
        requirePragma: true,
      },
    },
  ],
  plugins: ["@ianvs/prettier-plugin-sort-imports"],
  importOrder: [
    "<BUILTIN_MODULES>",
    "<THIRD_PARTY_MODULES>",
    "",
    "^~/(.*)$",
    "",
    "^[.]",
    "",
    "<TYPES>",
  ],
}

package.json

{
  "name": "@planet-matrix/tech-docs",
  "private": true,
  "type": "module",
  "scripts": {
    "dev": "vitepress dev docs",
    "build": "vitepress build docs",
    "preview": "vitepress preview docs",
    "format": "prettier --write .",
    "lint": "prettier --check ."
  },
  "packageManager": "pnpm@8.15.1",
  "devDependencies": {
    "@ianvs/prettier-plugin-sort-imports": "^4.1.1",
    "prettier": "^3.2.5",
    "vitepress": "^1.0.0-rc.42"
  },
  "pnpm": {
    "peerDependencyRules": {
      "ignoreMissing": [
        "@algolia/client-search",
        "search-insights"
      ]
    }
  }
}

.vscode/settings.json

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

WARNING

请确保安装了 Prettier VSCode 扩展

TIP

由于 Prettier 3.0 默认忽略 .gitignore 中指定的文件，因此大多数情况下不需要创建 .prettierignore 文件， monorepo 深层文件夹中的 .gitignore 文件除外。

约定

INFO

我们不讨论修改配置项。

1. 基于 Prettier 预设配置，仅移除分号。
2. 调整 pnpm-lock.yaml 文件的格式化规则，使得我们无需将其加入到 .prettierignore 中。
3. 使用 @ianvs/prettier-plugin-sort-imports 来对 import 语句进行排序。
   • 选择 ~ 作为内部模块的别名，因为 @ 易于与 npm 包的组织或个人名起始混淆。

为什么

不使用 ESLint

1. 目前流行度较高使用 ESLint 格式化代码的方案（如 @antfu/eslint-config，eslint-stylistic/eslint-stylistic），对于 jsx 的支持不够好。
2. Linter 与 Formatter 概念分开可能更好。

不使用 dprint

1. dprint 不如 Prettier 流行，更开箱即用
2. 配置项更丰富带来的弊端就是，需要开始争论哪种配置更好

EditorConfig（可选）

WARNING

请确保安装了 EditorConfig VSCode 扩展

EditorConfig 是一个可选的配置文件，因为大多数时候我们只使用 VSCode 作为编辑器，也只写 TypeScript 代码。

.editorconfig

root = true

[*]
charset = utf-8
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true