安装 Prettier 及插件

pnpm

pnpm add --save-dev --save-exact prettier @trivago/prettier-plugin-sort-imports prettier-plugin-jsdoc prettier-plugin-packagejson prettier-plugin-sort-json

npm

npm install --save-dev --save-exact prettier @trivago/prettier-plugin-sort-imports prettier-plugin-jsdoc prettier-plugin-packagejson prettier-plugin-sort-json

yarn

yarn add --dev --exact prettier @trivago/prettier-plugin-sort-imports prettier-plugin-jsdoc prettier-plugin-packagejson prettier-plugin-sort-json

Prettier 配置

新建 .prettierrc.yaml 配置如下

.prettierrc.yaml

plugins:
  - '@trivago/prettier-plugin-sort-imports'
  - 'prettier-plugin-jsdoc'
  - 'prettier-plugin-packagejson'
  - 'prettier-plugin-sort-json'

printWidth: 80
semi: false
singleQuote: true
trailingComma: 'none'

importOrderSeparation: true
importOrderSortSpecifiers: true
importOrder:
  - '^vitepress$'
  - '^vitepress([-/].*)?$'
  - '^vue$'
  - '^vite$'
  - '^@[a-zA-Z0-9-]+/(.*)$'
  - '^@/(.*)$'
  - '^[./]'
  - '^(.*)$'

overrides:
  - files: ['*.json']
    options:
      jsonRecursiveSort: true

创建 Prettier 忽略文件

新建 .prettierignore 配置如下

.prettierignore

dist
pnpm-lock.yaml
cache
temp
.temp
*.vue

使用 Prettier 格式化所有文件

pnpm

pnpm exec prettier . --write

npm

npx prettier . --write

yarn

yarn prettier . --write

配置 commit 自动格式化

安装 simple-git-hooks 和 lint-staged 插件

pnpm install simple-git-hooks lint-staged

配置 package.json

{
  "lint-staged": {
    "*": ["prettier --write --ignore-unknown"]
  },
  "simple-git-hooks": {
    "pre-commit": "pnpm lint-staged"
  }
}