安装 Prettier

pnpm

pnpm add --save-dev --save-exact prettier

pnpm add --save-dev --save-exact prettier

npm

npm install --save-dev --save-exact prettier

npm install --save-dev --save-exact prettier

yarn

yarn add --dev --exact prettier

yarn add --dev --exact prettier

创建 Prettier 配置文件

新建.prettierrc.yml 配置如下

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

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

创建 Prettier 忽略文件

新建 .prettierignore 配置如下

\*.vue
dist
pnpm-lock.yaml
cache
template
temp
!CHANGELOG.md
.temp

\*.vue
dist
pnpm-lock.yaml
cache
template
temp
!CHANGELOG.md
.temp

使用 Prettier 格式化所有文件

pnpm

pnpm exec prettier . --write

pnpm exec prettier . --write

npm

npx prettier . --write

npx prettier . --write

yarn

yarn prettier . --write

yarn prettier . --write

配置 commit 自动格式化

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

pnpm install simple-git-hooks lint-staged

pnpm install simple-git-hooks lint-staged

配置 package.json

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

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