Prettier v3.0.3

Prettier 是一个代码格式化工具，旨在通过自动调整代码的格式，提供一致的编码风格。它适用于多种编程语言，包括 JavaScript、TypeScript、CSS、HTML、JSON 等。>

安装

npm install prettier -D

配置

文件格式

• package.json：在 package.json 文件中创建 prettier 属性并自定义配置
• Prettier：使用 .prettierrc 来定义配置结构，支持 JSON 和 YAML 格式
• JSON/YAML：使用 .prettierrc.json / .prettierrc.yml / .prettierrc.yaml / .prettierrc.json5 来定义配置结构
• JavaScript：使用 .prettierrc.js / prettier.config.js 来定义配置结构，且需要进行导出(export default 或 module.exports 取决于 package.json 中的 type 值）
• JavaScript(ESM)：使用 .prettierrc.mjs / prettier.config.mjs 来定义配置结构，且需要使用 export default 导出
• JavaScript(CommonJS)：使用 .prettierrc.cjs / prettier.config.cjs来定义配置结构，且需要使用 module.exports 导出
• TOML：使用 .prettierrc.toml 来定义配置结构

DANGER

官网介绍说支持 .prettierrc.js .prettierrc.mjs .prettierrc.cjs 文件，经测试发现不知为何，目前不支持这些格式的文件。

TIP

在项目根目录创建一个空的 .prettierrc.* 文件，或执行以下命令：

# 创建 .prettierrc.json 文件
echo "{}" > .prettierrc.json

# 创建 .prettierrc.js 文件
echo "module.exports = {}" > .prettierrc.js

基础配置

• package.json 文件

{
  "name": "admin",
  "version": "0.0.0",
  "private": true,

  "prettier": {
    "tabWidth": 4,
    "semi": true,
    "singleQuote": false
  }
}

• JSON 格式

{
  "trailingComma": "es5",
  "tabWidth": 4,
  "semi": false,
  "singleQuote": true
}

• JS(CommonJS)

/** @type {import("prettier").Config} */
const config = {
  trailingComma: 'es5',
  tabWidth: 4,
  semi: false,
  singleQuote: true
}

module.exports = config

• JS(ESM)

/** @type {import("prettier").Config} */
const config = {
  trailingComma: 'es5',
  tabWidth: 4,
  semi: false,
  singleQuote: true
}

export default config

覆盖配置

覆盖允许您对某些文件扩展名、文件夹和特定文件进行不同的配置。

{
  "semi": false,
  "overrides": [
    {
      "files": "*.test.js",
      "options": {
        "semi": true
      }
    },
    {
      "files": ["*.html", "legacy/**/*.js"],
      "options": {
        "tabWidth": 4
      }
    }
  ]
}

解析器配置

默认情况下，Prettier 会根据输入文件扩展名自动推断要使用的解析器。结合 overrides 你可以教 Prettier 如何解析它无法识别的文件。

{
  "overrides": [
    {
      "files": ".prettierrc",
      "options": { "parser": "json" }
    }
  ]
}

注意

切勿将该解析器选项放在配置的顶层。只能在里面 overrides 使用。

忽略文件

创建一个 .prettierignore 文件，让 Prettier CLI 和编辑器知道哪些文件不格式化。也可以直接引入 .gitignore 文件中的规则。

prettier --ignore-path .gitignore

忽略代码

使用 prettier-ignore 注释来忽略文件的某些部分。

• JavaScript：// prettier-ignore
• HTML：<!-- prettier-ignore --> / <!-- prettier-ignore-attribute --> / <!-- prettier-ignore-attribute (mouseup) -->
• CSS：/* prettier-ignore */
• Markdown：<!-- prettier-ignore --> / <!-- prettier-ignore-start -->...<!-- prettier-ignore-end -->

插件

在 .prettierrc.* 文件中通过使用 plugins 属性设置插件。

{
  "plugins": ["prettier-plugin-foo"]
}

prettier-plugin-tailwindcss

用于格式化 Tailwind CSS 样式代码。它可以帮助你在项目中维护一致的 Tailwind CSS 代码风格，并提高代码的可读性。此插件现在需要 Prettier v3 并且仅限 ESM (不能通过 require() 加载)。

• 安装

npm install -D prettier-plugin-tailwindcss

• 配置

{
  "plugins": ["prettier-plugin-tailwindcss"]
}

选项

{
  "printWidth": 80, //指定打印换行的行长度
  "tabWidth": 2, //指定每个缩进级别的空格数
  "useTabs": false, //是否使用制表符而不是空格缩进行
  "semi": true, //是否在语句末尾打印分号
  "singleQuote": true, //使用单引号还是双引号
  "quoteProps": "as-needed", //更改对象中的属性被引号的时间,："<as-needed|consistent|preserve>"
  "jsxSingleQuote": false, //在 JSX 中使用单引号而不是双引号
  "trailingComma": "all", //尽可能以多行逗号分隔的语法结构打印尾随逗号,："<all|es5|none>"
  "bracketSpacing": true, //在对象文本的方括号之间打印空格
  "bracketSameLine": false, //将多行 HTML（HTML、JSX、Vue、Angular） `>` 元素放在最后一行的末尾，而不是单独放在下一行（不适用于自闭合元素）
  "jsxBracketSameLine": false, //将多行 JSX 元素 `>` 放在最后一行的末尾，而不是单独放在下一行（不适用于自闭合元素）
  "arrowParens": "always", //在箭头函数参数只有一个时两边加上括号
  "rangeStart": 0, //仅格式化文件的一个片段，从这里开始
  "rangeEnd": "Infinity", //仅格式化文件的一个片段，到这里结束
  "parser": "None", //指定要使用的解析器，Prettier 会自动从输入文件路径推断解析器，不必更改此设置
  "filepath": "Nome", //指定用于推断要使用的解析器的文件名
  "requirePragma": false, //Prettier 可以将自身限制为仅格式化文件顶部包含特殊注释（称为杂注）的文件
  "insertPragma": false, //Prettier 可以在文件顶部插入一个特殊的 @format 标记，指定文件已使用 Prettier 格式化
  "proseWrap": "preserve", //文本是否换行："<always|never|preserve>"
  "htmlWhitespaceSensitivity": "css", //指定HTML, Vue, Angular, and Handlebars全局空格敏感度："<css|strict|ignore>"
  "vueIndentScriptAndStyle": false, //是否缩进 Vue 文件中的代码 <script> 和 <style> 标签
  "endOfLine": "lf", //文本换行符样式："<lf|crlf|cr|auto>"
  "embeddedLanguageFormatting": "auto", //控制是否 Prettier 格式化文件中嵌入的引用代码："<off|auto>"
  "singleAttributePerLine": false //在 HTML、Vue 和 JSX 中每行强制使用单个属性
}

在 package.json 的 script 中添加命令

"scripts": {
    "format": "prettier . --write --ignore-path .gitignore"
  }