Prettier

概述

Prettier 是一个流行的代码格式化工具，它支持多种语言，包括 JavaScript、TypeScript、
CSS、SCSS、HTML、JSON、Vue、GraphQL、Markdown，甚至还有一些其他语言。
Prettier 的目标是提供一个全面的、无需配置的代码格式化工具，以此来确保代码的一致性。
Prettier 的主要优点包括：

1. 它可以自动格式化你的代码，使你不需要花费时间去手动进行格式化。
2. 它可以在团队中保持一致的代码风格，这对于团队的协作非常有帮助。
3. 它可以和许多编辑器和 IDE 集成，如 VS Code、WebStorm、Atom 等等。
4. 它也可以和像 ESLint 或者 TSLint 这样的 lint 工具进行集成，以在保存文件时自动格式化代码。

基本使用

安装和配置

安装、创建忽略文件见：Prettier 官网

虽然 Prettier 的目标是提供一个无需配置的代码格式化工具，但它仍然提供了一些基础的配置选项来满足特定的需求。可以在项目的根目录下创建一个 .prettierrc 文件来配置这些选项。

常见忽略文件：

# Ignore artifacts:
build
coverage
/dist/* # 忽略 dist 目录下的所有文件
.local # 忽略名为 .local 的文件
.output.js # 忽略名为 .output.js 的文件
/node_modules/** # 忽略 node_modules 目录以及其子目录下的所有文件
 **/*.svg # 忽略所有的 .svg 文件，无论它们在什么位置
**/*.sh # 忽略所有的 .sh 文件，无论它们在什么位置
/public/* # 忽略 public 目录下的所有文件

这是一些常见的配置选项：

• useTabs（使用制表符） ：此选项用来指定是否使用制表符进行缩进。当设置为 false 时，Prettier 将使用空格进行缩进。这样的设置有助于保持代码的一致性，并可以减少因为不同编辑器对制表符长度解析不同导致的格式问题
• tabWidth（制表符宽度） ：此选项用来指定一个缩进级别等于几个空格。例如，当设置为2时，表示一个缩进级别为2个空格。这样的设置可以让代码看起来更整洁、更易读
• printWidth（打印宽度） ：此选项用来指定一行代码的最大长度。当代码长度超过这个值时，Prettier 将进行换行。通常，我们推荐这个值设置为80，不过也有人喜欢设置为100或120。这样的设置可以让代码更易于阅读，特别是在有限的屏幕空间下
• singleQuote（单引号） ：此选项用来指定是否使用单引号。当设置为 true 时，Prettier 将使用单引号代替双引号。这样的设置可以保持代码的一致性，并且可以避免在JavaScript中切换引号类型时可能遇到的问题
• trailingComma（尾随逗号） ：此选项用来指定是否在多行结构的最后一个元素后面添加逗号。当设置为 “none” 时，表示不添加尾随逗号。这样的设置可以使得代码看起来更整洁，也更符合一些编程语言的习惯
• semi（分号） ：此选项用来指定是否在语句的末尾添加分号。当设置为 false 时，表示不添加分号。这样的设置可以使得代码看起来更简洁，但需要注意的是，省略分号可能在某些情况下导致代码解析错误

//.prettierrc.json文件，注释需要去掉，这里的json检测不能带注释
{
    "useTabs": false, // 使用空格代替制表符进行缩进。
    "tabWidth": 2, // 一个缩进级别等于2个空格。
    "printWidth": 80, // 一行代码的最大长度为80个字符，超过则换行。
    "singleQuote": true, // 使用单引号而不是双引号。
    "trailingComma": "none", // 不使用尾随逗号，即在多行结构的最后一个元素后面不添加逗号。
    "semi": false // 语句的末尾不使用分号。
}

使用 prettier ：

1. 手动使用

当配置好 prettier 后可以使用一个命令来格式化所有未忽略的文件：

npx prettier --write

这条命令会告诉 Prettier 格式化你项目中的所有文件（ . 表示当前目录）。 --write 标志表示将更改直接写入文件。如果你不包含 --write ，Prettier 将只输出它会做什么更改，但并不实际写入这些更改。

2. 插件使用

vscode 需要安装相关插件：

VSCode 中的配置：

• settings =>format on save => 勾选上
• settings => editor default format => 选择 prettier

硅谷甄选 - 配置prettier

prettier属于格式化工具，保证js代码美观。

可以安装 vscode 插件，Prettier Code formatter 。

2.1安装依赖包

pnpm install -D eslint-plugin-prettier prettier eslint-config-prettier

2.2.prettierrc.json添加规则

{
  "singleQuote": true,
  "semi": false,
  "bracketSpacing": true,
  "htmlWhitespaceSensitivity": "ignore",
  "endOfLine": "auto",
  "trailingComma": "all",
  "tabWidth": 2
}

常用：

2.3.prettierignore忽略文件

/dist/*
/html/*
.local
/node_modules/**
**/*.svg
**/*.sh
/public/*

package.json新增两个运行脚本

"scripts": {
    "lint": "eslint src",
    "fix": "eslint src --fix",
}

通过 pnpm run lint 去检测语法，如果出现不规范格式,通过 pnpm run fix 修改