Prettier是什么
Prettier是一个代码格式化工具，它支持JavaScript等编程语言的代码格式化。它是一个“有态度”的代码格式化工具，它支持“Opinionated”的代码格式化，即你必须认同它的观点，按照它说的做。Prettier的特点是：自动化、一致性、可配置性、支持多种语言、易于集成。
Prettier使用
-
VSCode
VSCode中下载一个插件
Prettier - Code formatter插件，安装之后点击设置来进行代码配置 -
配置文件
这个需要项目配合，由于我是JS代码开发项目。所以我使用的环境是npm包管理器。需要执行以下命令安装插件
npm install --save-dev --save-exact prettier安装完成之后在项目根目录新建
.prettierrc.json文件，然后写入如下的内容{ "printWidth": 160, "arrowParens": "always", "bracketSameLine": true, "bracketSpacing": true, "semi": true, "singleAttributePerLine": false, "vueIndentScriptAndStyle": true, "htmlWhitespaceSensitivity": "ignore" }# 使用命令格式化项目文件 npx prettier . --write # 检查哪些文件没有格式化 npx prettier . --check下面给出官方的选项以及可选的配置值
{ "printWidth": 80, // 指定打印机换行的行长度。可以是任意正整数。 "tabWidth": 2, // 指定每个缩进级别的空格数。可以是任意正整数。 "useTabs": false, // 用制表符而不是空格缩进行。可以是true或false。 "semi": true, // 在语句末尾打印分号。可以是true或false。 "singleQuote": false, // 使用单引号而不是双引号。可以是true或false。 "quoteProps": "as-needed", // 改变对象属性中的引号。可以是"as-needed"，"consistent"或"preserve"。 "jsxSingleQuote": false, // 在JSX中使用单引号而不是双引号。可以是true或false。 "trailingComma": "es5", // 在多行逗号分隔的语法结构中打印尾随逗号。可以是"all"，"es5"或"none"。 "bracketSpacing": true, // 在对象字面量中的括号之间打印空格。可以是true或false。 "jsxBracketSameLine": false, // 将多行HTML元素的>放在最后一行的末尾，而不是单独放在下一行。可以是true或false。 "arrowParens": "always", // 在单个箭头函数参数周围包含括号。可以是"always"或"avoid"。 "rangeStart": 0, // 格式化文件的一部分的起始字符偏移量（包含）。可以是任意非负整数。 "rangeEnd": Infinity, // 格式化文件的一部分的结束字符偏移量（不包含）。可以是任意非负整数。 "parser": "babel", // 指定要使用的解析器。可以是"babel"，"babel-flow"，"babel-ts"，"typescript"，"json"，"json5"，"json-stringify"，"graphql"，"mdx"，"html"，"vue"，"angular"，"lwc"或者其他自定义解析器。 "filepath": "", // 指定要用于推断解析器的文件名。可以是任意字符串。 "requirePragma": false, // 只格式化包含特殊注释（称为pragma）的文件。可以是true或false。 "insertPragma": false, // 在格式化的文件顶部插入一个特殊的@format标记，指示该文件已经用Prettier格式化过了。可以是true或false。 "proseWrap": "preserve", // 控制是否对markdown文本进行换行。可以是"always"，"never"或者"preserve" "htmlWhitespaceSensitivity": "css", // 指定HTML，Vue，Angular和Handlebars中的全局空白敏感度。[^1^][1]参见空白敏感格式化以获取更多信息。可以是“css”，“strict”或“ignore”。 "vueIndentScriptAndStyle": false, // 是否在Vue文件中的<script>和<style>标签内缩进代码。可以是true或false。 "endOfLine": "lf", // 指定行尾字符。可以是“lf”，“crlf”，“cr”或“auto”。 "embeddedLanguageFormatting": "auto", // 控制Prettier是否格式化嵌入在文件中的代码。可以是“auto”或“off”。 }
忽略格式化配置文件
在根目录下配置新建.prettierignore 配置文件。里面写入你不想格式化的文件，格式和.gitignore 类似。
/dist/*
.local
.output.js
.github
.vscode
/node_modules/**
*.html
**/*.svg
**/*.sh
/public/**
配置文件优先级
Prettier使用cosmiconfig来支持配置文件。这意味着你可以通过以下方式配置Prettier（优先级从高到低）：
- 在你的package.json文件中的"prettier"键。
- 用JSON或YAML编写的.prettierrc文件。
- .prettierrc.json、.prettierrc.yml、.prettierrc.yaml或.prettierrc.json5文件。
- .prettierrc.js、.prettierrc.cjs、prettier.config.js或prettier.config.cjs文件，使用module.exports导出一个对象。
- .prettierrc.toml文件。
配置文件将从被格式化的文件的位置开始解析，并在文件树中向上搜索，直到找到（或找不到）配置文件。Prettier故意不支持任何形式的全局配置。这是为了确保当一个项目被复制到另一台计算机时，Prettier的行为保持不变。否则，Prettier将无法保证团队中的每个人都能获得相同的一致结果。
常见问题
- 配置不生效
- 重启下VSCode试试
- 查看自己是不是安装了其他的格式化工具。设置Prettier为格式化工具
评论区