Skip to content

安装 Prettier 及插件

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

Prettier 配置

新建 .prettierrc.yaml 配置如下

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 格式化所有文件

shell
pnpm exec prettier . --write
shell
npx prettier . --write
shell
yarn prettier . --write

配置 commit 自动格式化

安装 simple-git-hookslint-staged 插件

zsh
pnpm install simple-git-hooks lint-staged

配置 package.json

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