Prettier

前端项目工程依赖Prettier，前端代码格式化工具，它可以支持JS/JSX/TS/Flow/JSON/CSS/LESS等文件格式

安装

安装到开发环境

npm install -D prettier@2.8.8

依赖包

{
    "devDependencies": {
        "prettier": "^2.8.8",
        "eslint-config-prettier": "^9.1.0",
        "eslint-plugin-prettier": "^4.2.1"
    }
}

配置

配置规则文件

.prettierrc.json

{
    "printWidth": 120, // 定义每行代码的最大字符数。超过这个限制的行将被自动换行。此处设置为 120，即每行最多可以有 120 个字符。
    "tabWidth": 4, // 设置制表符（tab）所占的空格数。此处为 4，意味着一个制表符的宽度等于 4 个空格。
    "useTabs": false, // 指定是否使用制表符代替空格进行缩进。false 表示使用空格。
    "semi": false, // 控制语句末尾是否使用分号。false 表示不使用分号，所有语句末尾都将省略分号。
    "vueIndentScriptAndStyle": false, // 当格式化 Vue 文件时，是否缩进 <script> 和 <style> 标签内的内容。true 表示启用缩进。
    "singleQuote": true, // 设置是否使用单引号（'）而不是双引号（"）。true 表示使用单引号。
    "quoteProps": "as-needed", // 定义在对象字面量中如何处理属性名的引号。as-needed 表示仅在必要时使用引号（如属性名包含空格或特殊字符时）。
    "bracketSpacing": true, // 控制对象字面量中大括号之间的空格。true 表示 { foo: bar } 的形式，而 false 则为 {foo: bar}。
    "trailingComma": "none", // 控制对象、数组等结构末尾是否添加逗号。es5 表示在可以的情况下添加尾随逗号（如对象字面量、数组等），但不会在函数参数中添加。
    "jsxBracketSameLine": false, // 控制 JSX 元素的闭合括号是否与最后一行内容在同一行。false 表示闭合括号会独占一行。
    "jsxSingleQuote": true, // 指定在 JSX 中是否使用单引号。false 表示使用双引号。
    "arrowParens": "always", // 控制箭头函数参数是否需要括号。always 表示即使只有一个参数也要使用括号，例如 (param) => {}。
    "insertPragma": false, // 控制是否在格式化的文件顶部插入一个特殊的注释。false 表示不插入。
    "requirePragma": false, // 控制是否仅格式化包含特定注释的文件。false 表示不要求注释。
    "proseWrap": "always", // 设置如何处理文本块的换行。never 表示不进行换行。
    "htmlWhitespaceSensitivity": "css", // 控制 HTML 中的空白字符敏感度。strict 表示严格遵循 HTML 规范。
    "endOfLine": "auto", // 定义行尾字符的处理方式。lf 仅换行;crlf 回车符 + 换行符;cr 仅回车符;auto 维护现有的行尾
    "rangeStart": 0, // 设置格式化的起始字符位置。0 表示从文件的开始位置开始格式化。
    "ignorePath": ".prettierignore", // 格式化忽略文件
    "singleAttributePerLine": false, // 在 HTML、Vue 和 JSX 中每行强制使用单个属性
    "bracketSameLine": false, // 在对象文本的方括号之间打印空格
    "embeddedLanguageFormatting": "auto", // 控制是否自动格式化嵌入的语言（如Markdown中的代码块）。其值设置为"auto"，表示Prettier将尝试自动格式化嵌入的语言。
    "experimentalTernaries": false, // true: 三元符在条件后加上问号/false: 不限制
}

忽略规则文件

.prettierignore

build
.cache

# Ignore all HTML files:
*.html
*.yml
*.yaml

其他

解决和eslint冲突

1. 安装 eslint-config-prettier 插件 (关闭与prettier冲突的eslint规则)

npm install -D eslint-config-prettier@9.1.0

2. 在eslint的配置文件中写入以下内容

extends: ['plugin:prettier/recommended'],

将Prettier作为ESLint规则运行

1. 安装 eslint-plugin-prettier 插件

npm install -D eslint-plugin-prettier@4.2.1

2. 在eslint的配置文件中写入以下内容

eslintPluginPrettierRecommended: () => import('eslint-plugin-prettier/recommended'),