<div style="display: none;" hidden="true" aria-hidden="true" data-nosnippet>Are you an LLM? You can read better optimized documentation at /pages/0aa7d0.md for this page in Markdown format</div>

基本使用

安装

yarn add --dev --exact prettier

创建配置文件

让编辑器和其他工具知道您正在使用 Prettier

echo {}> .prettierrc.json

{
    "printWidth": 100,
    "semi": true,
    "vueIndentScriptAndStyle": true,
    "singleQuote": true,
    "trailingComma": "all",
    "proseWrap": "never",
    "htmlWhitespaceSensitivity": "strict",
    "endOfLine": "auto"
}

创建忽略文件

让 Prettier CLI 和编辑器知道哪些文件不能格式化

.prettierignore建立在你的 .gitignore 和 .eslintignore上的

# Ignore artifacts:
build
coverage

/dist/*
.local
.output.js
/node_modules/**

**/*.svg
**/*.sh

/public/*

脚本命令

npx不明白的可以看我另一篇文章

• 格式化: npx prettier --write .(会格式化我们所有的文件,出prettierignore gitignore和eslintignore中的)

​ 我们可以命令加入到script中

// package.json
{
  "script": {
    "lint:prettier": "prettier --write  \"src/**/*.{js,json,tsx,css,less,scss,vue,html,md}\"",
  }
}

• 检查: npx prettier --check .(命令行中提示出不合格的文件)

进阶使用

搭配编辑器使用

以vscode为例

名称: Prettier - Code formatter
ID: esbenp.prettier-vscode
说明: Code formatter using prettier
版本: 9.5.0
发布者: Prettier
VS Marketplace 链接: https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

仓库地址: https://github.com/prettier/prettier-vscode

搭配eslint使用

eslint不明白的可以看我另外一篇文章

• eslint-plugin-prettier

将 Prettier 作为 ES Lint 规则运行，并将差异报告为单个 ES Lint 问题。

安装:

npm install --save-dev eslint-plugin-prettier
npm install --save-dev --save-exact prettier

• eslint-config-prettier禁用所有与格式化相关的ESLint规则

安装:yarn add eslint-config-prettier -D

配置:

// .eslintrc .eslint.json
{
  "plugins": ["prettier"],
  "extends": ["plugin:prettier/recommended"]
}

如果不想通过 ES Lint 配置文件将选项传递给 Prettier,你可以单独设置.prettierrc文件, vscode会自动读取

结合Git Hooks 使用

githooks不明白的可以看我另外一篇文章

这个功能点就是在代码提交之前重新格式化一遍

安装:npx mrm@2 lint-staged 此命令将安装和配置 husky 和 lint -staged 根据项目的 package.json 依赖项中的代码质量工具暂存

{
 "lint-staged": {
      "*.{js,jsx,ts,tsx}": [
          "eslint --fix",
          "prettier --write"
      ],
      "{!(package)*.json,*.code-snippets,.!(browserslist)*rc}": [
          "prettier --write--parser json"
      ],
      "package.json": [
          "prettier --write"
      ]
  } 
}