前言

Prettier是什么、能帮我们解决什么问题？

Prettier 是一个代码格式化工具，可以格式化代码，但不具备代码检查功能，它可以通过解析代码并使用自己的规则重新打印它，并考虑最大行长来强制一致的样式，并在必要时包装代码，如今，它已成为解决所有代码格式问题的优选方案，支持多种语言，可以将 ESLint 和 Prettier 结合使用，提高代码质量。

Prettier 中文网

Prettier 中文网

一、使用

1.1 使用方式

方式一：下载 Prettier 插件；
方式二：在项目中安装 npm i prettier ，然后在项目根目录下创建配置文件（.prettierrc.js）进行配置；
如果两种方式都使用了，那么prettier配置文件的优先级首先是当前项目根目录下的配置文件；

1.2 格式化：配合自动保存或 git 使用

1.2.1 自动保存时格式化

我们可以在 VsCode 的设置中开启 保存文件时自动进行格式化：

1.2.2 配合 git 使用

和 git 配合使用，这块我自己没有用，所以没有确切的实际经验，大家可以去 Prettier 中文网看看，或者也可以自己百度一下哈；

二、我自己使用的配置以及 Prettier 常见配置

prettier的配置项文件常见的一般都有两种格式：js + json；
- js后缀的写起来方便一点，不用给属性名添加双引号；
- json后缀的写起来比较繁琐，必须严格遵守json语法；

2.1 我自己使用的配置

2.1.1 `.prettierrc.js` 或 `.prettierrc.json` 配置文件

我自己使用的配置项：

如果配置的是 json 文件，不需要拷贝 module.export = ，只需要拷贝对象即可；

// 配置几个常用的就可以
module.exports = {
    // 一行最多多少个字符
    "printWidth": 150,
    // 指定每个缩进级别的空格数
    "tabWidth": 2,
    // 使用制表符而不是空格缩进行
    "useTabs": true,
    // 在语句末尾打印分号
    "semi": true,
    // 使用单引号而不是双引号
    "singleQuote": true,
    // 更改引用对象属性的时间 可选值"<as-needed|consistent|preserve>"
    "quoteProps": 'as-needed',
    // 在JSX中使用单引号而不是双引号
    "jsxSingleQuote": false,
    // 多行时尽可能打印尾随逗号。（例如，单行数组永远不会出现逗号结尾。） 可选值"<none|es5|all>"，默认none
    "trailingComma": 'es5',
    // 在对象文字中的括号之间打印空格
    "bracketSpacing": true,
    // jsx 标签的反尖括号需要换行
    "jsxBracketSameLine": false,
    // 在jsx中把'>' 是否单独放一行
    "bracketSameLine": false,
    // 在单独的箭头函数参数周围包括括号 always：(x) => x \ avoid：x => x
    "arrowParens": 'always',
    // 这两个选项可用于格式化以给定字符偏移量（分别包括和不包括）开始和结束的代码
    "rangeStart": 0,
    "rangeEnd": Infinity,
    // 指定要使用的解析器，不需要写文件开头的 @prettier
    "requirePragma": false,
    // 不需要自动在文件开头插入 @prettier
    "insertPragma": false,
    // 使用默认的折行标准 always\never\preserve
    "proseWrap": 'preserve',
    // 指定HTML文件的全局空格敏感度 css\strict\ignore
    "htmlWhitespaceSensitivity": 'css',
    // Vue文件脚本和样式标签缩进
    "vueIndentScriptAndStyle": false,
    // 换行符使用 lf 结尾是 可选值"<auto|lf|crlf|cr>"
    "endOfLine": 'lf'
};

2.2.2 配置格式化命令

如果你在使用 保存文件时自动格式化 这一步就不需要；
如果没有使用，可以看看：

在 package.json 中配置格式化命令:

{
    ...,
    "scripts": {
        ...,
        "lint:pritter": "prettier --write src/",  // 配置的命令（键名）可以自行定义
        ...
    },
    ...
}

❗ 注意：
- 一般的命令都是 prettier --write ，这会格式化我们整个项目中的所有代码，为了避免这种情况，有两种方式：
  - ✅ 方式一：在原有命令后面加上文件限制 prettier --write src/，表示只格式化 src 文件下的所有文件；
  - ❌ 方式二：增加 prettier1 忽略文件配置：
    - 文件名：.prettierignore
    - 配置：
      - 使用这种方式，要增加的忽略文件太多了，好麻烦的，如果大家想练手自己配置玩一下，可以去 Prettier 中文网看一看格式啥的【进首页 ➡ 点击头部 开发文档 ➡ 左侧导航栏用法 ➡ 忽略代码】；
```
// 忽略以 .git .svn .hg 为后缀的文件
**/.git
**/.svn
**/.hg

// 忽略 node_modules 下的所有文件
**/node_modules
**/dist
**/mock
**/public 
```

2.2 常见配置项

常见配置项：

// 此处的常见配置是参考这位大佬的：https://blog.csdn.net/a843334549/article/details/115391605
/**
 * @see https://prettier.io/docs/en/options.html#print-width
 * @author lcm
 */
module.exports = {
  /**
   * 换行宽度，当代码宽度达到多少时换行
   * @default 80
   * @type {number}
   */
  printWidth: 80,
  /**
   * 缩进的空格数量
   * @default 2
   * @type {number}
   */
  tabWidth: 2,
  /**
   * 是否使用制表符代替空格
   * @default false
   * @type {boolean}
   */
  useTabs: false,
  /**
   * 是否在代码块结尾加上分号
   * @default true
   * @type {boolean}
   */
  semi: false,
  /**
   * 是否使用单引号替代双引号
   * @default false
   * @type {boolean}
   */
  singleQuote: true,
  /**
   * 对象属性的引号处理
   * @default "as-needed"
   * @type {"as-needed"|"consistent"|"preserve"}
   */
  quoteProps: 'as-needed',
  /**
   * jsx中是否使用单引号替代双引号
   * @default false
   * @type {boolean}
   */
  jsxSingleQuote: true,
  /**
   * 在jsx中使用是否单引号代替双引号
   * @default false
   * @type {boolean}
   */
  /**
   * 末尾是否加上逗号
   * @default "es5"
   * @type {"es5"|"none"|"all"}
   */
  trailingComma: 'none',
  /**
   * 在对象，数组括号与文字之间加空格 "{ foo: bar }"
   * @default true
   * @type {boolean}
   */
  bracketSpacing: true,
  /**
   * 把多行HTML (HTML, JSX, Vue, Angular)元素的>放在最后一行的末尾，而不是单独放在下一行(不适用于自关闭元素)。
   * @default false
   * @type {boolean}
   */
  bracketSameLine: false,
  /**
   * 当箭头函数只有一个参数是否加括号
   * @default "always"
   * @type {"always"|"avoid"}
   */
  arrowParens: 'always',
  /**
   * 为HTML、Vue、Angular和Handlebars指定全局空格敏感性
   * @default "css"
   * @type {"css"|"strict"|"ignore"}
   */
  htmlWhitespaceSensitivity: 'ignore',
  /**
   * 是否缩进Vue文件中的<script>和<style>标记内的代码。有些人(比如Vue的创建者)不使用缩进来保存缩进级别，但这可能会破坏编辑器中的代码折叠。
   * @default "always"
   * @type {"always"|"avoid"}
   */
  vueIndentScriptAndStyle: false,
  /**
   * 文件结束符
   * @default "lf"
   * @type {"lf"|"crlf"|"cr"|"auto"}
   */
  endOfLine: 'crlf',
  /**
   * 因为使用了一些折行敏感型的渲染器（如GitHub comment）而按照markdown文本样式进行折行
   */
  proseWrap: 'never',
  // 是否使用根目录下的EditorConfig配置文件
  useEditorConfig: false,
  /**
   * HTML\VUE\JSX每行只有单个属性
   * @default true
   * @type {boolean}
   */
  singleAttributePerLine: true,
  disableLanguages: ['html']
}

三、踩坑日记

3.1 新建的`prettier`配置文件格式化时报错

当我们新建好一个 prettier 配置文件之后。就会格式化代码，但是发现不成功，并且会在编译器右下角出现这么一个提示：
- 这是 prettier报的错误，我们打开编译器的控制台，看输出，就会看到一下一大串的鬼东西；

详细报错信息：

["INFO" - 17:48:07] Formatting 要格式化的文件路径
["ERROR" - 17:48:07] Error resolving prettier configuration for 要格式化的文件路径
["ERROR" - 17:48:07] Invalid or unexpected token
项目中prettier的配置文件路径:1
(function (exports, require, module, __filename, __dirname) { ��m


SyntaxError: Invalid or unexpected token
    at new Script (node:vm:100:7)
    at Module.u._compile (f:\VsCode\Microsoft VS Code\resources\app\out\vs\loader.js:4:1173)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1220:10)
    at Module.load (node:internal/modules/cjs/loader:1035:32)
    at Module._load (node:internal/modules/cjs/loader:876:12)
    at Function.c._load (node:electron/js2c/asar_bundle:5:13343)
    at Function.c._load (f:\VsCode\Microsoft VS Code\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:122:14101)
    at Function.m._load (f:\VsCode\Microsoft VS Code\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:117:62404)
    at Function.D._load (f:\VsCode\Microsoft VS Code\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:117:61797)
    at Module.require (node:internal/modules/cjs/loader:1059:19)
    at module2.exports (d:\Table top\zhongRuan\yunbg-platform\node_modules\prettier\third-party.js:83:61)
    at loadJs2 (d:\Table top\zhongRuan\yunbg-platform\node_modules\prettier\third-party.js:8050:22)
    at Explorer.loadFileContent (d:\Table top\zhongRuan\yunbg-platform\node_modules\prettier\third-party.js:8449:36)
    at Explorer.createCosmiconfigResult (d:\Table top\zhongRuan\yunbg-platform\node_modules\prettier\third-party.js:8453:40)
    at Explorer.loadSearchPlace (d:\Table top\zhongRuan\yunbg-platform\node_modules\prettier\third-party.js:8438:35)
    at Explorer.searchDirectory (d:\Table top\zhongRuan\yunbg-platform\node_modules\prettier\third-party.js:8428:31)
    at run (d:\Table top\zhongRuan\yunbg-platform\node_modules\prettier\third-party.js:8413:26)
    at Explorer.search (d:\Table top\zhongRuan\yunbg-platform\node_modules\prettier\third-party.js:8407:24)
    at Object.resolveConfigFile (d:\Table top\zhongRuan\yunbg-platform\node_modules\prettier\index.js:18499:22)
    at t.ModuleResolver.resolveConfig (c:\Users\CaiQian\.vscode\extensions\esbenp.prettier-vscode-10.1.0\dist\extension.js:1:6697)
    at t.ModuleResolver.getResolvedConfig (c:\Users\CaiQian\.vscode\extensions\esbenp.prettier-vscode-10.1.0\dist\extension.js:1:7529)
    at t.default.format (c:\Users\CaiQian\.vscode\extensions\esbenp.prettier-vscode-10.1.0\dist\extension.js:1:14563)
    at t.PrettierEditProvider.provideEdits (c:\Users\CaiQian\.vscode\extensions\esbenp.prettier-vscode-10.1.0\dist\extension.js:1:12672)
    at q.provideDocumentFormattingEdits (f:\VsCode\Microsoft VS Code\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:98:39883)

错误提示信息：
- Invalid or unexpected token - 无效或意外的令牌，简单来说就是 无效的配置；
- 然后我回到配置文件检查的时候，没发现错误，一切都是合适的语法，反复确认，搞得我脑壳大；
错误原因分析：
- 这个问题我想了好几天，百度上也没有找到合适的答案；
- 周末重新创建了一个 Vue3 的项目，选择了Prettier作为代码格式化的插件，发现这块可以正常使用（配置项都是一摸一样的），此时，错误原因就出来了，就是两种配置文件的创建方式不同，也就是说有可能两种文件在解析的时候，编码格式不一致导致的，然后我就看了两种文件的编码格式，创建项目是带的配置文件是UTF-8，而我自己新建的配置文件编码格式是UTF-16的；
解决问题：
- 我们只需将 编码格式 换为 UTF-8 即可，就能正常使用了；

前端代码格式化 - 【Prettier】 - 常见配置 + 踩坑日记

前言

Prettier是什么、能帮我们解决什么问题？

Prettier 中文网

一、使用

1.1 使用方式

1.2 格式化：配合 自动保存 或 git 使用

1.2.1 自动保存时格式化

1.2.2 配合 git 使用

二、我自己使用的配置 以及 Prettier 常见配置

2.1 我自己使用的配置

2.1.1 .prettierrc.js 或 .prettierrc.json 配置文件

2.2.2 配置格式化命令

2.2 常见配置项

三、踩坑日记

3.1 新建的prettier配置文件格式化时报错

1.2 格式化：配合自动保存或 git 使用

二、我自己使用的配置以及 Prettier 常见配置

2.1.1 `.prettierrc.js` 或 `.prettierrc.json` 配置文件

3.1 新建的`prettier`配置文件格式化时报错