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

站长

2023年09月02日 23:15 · 阅读数 38

前言

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` 配置文件

我自己使用的配置项：

// 配置几个常用的就可以
module.exports = {
  "semi": true, // 结尾使用分号
  "tabWidth": 2,  // tab的宽度 2个字符
  "singleQuote": true,  // 使用单引号，要想使用双引号，改成 false 即可
  "printWidth": 120,  // 每行最多显示的字符树，超过这个就换行显示
  "trailingComma": "none",  // 结尾是否添加逗号
  "bracketSpacing": true,  // 对象括号两边是否用空格隔开
  // 下面两个配置项都是关于 标签结尾>的位置，如果Prettier版本过高，第一个配置项会失效 
  "jsxBracketSameLine": true,  // 在jsx中把'>' 是否单独放一行
  "bracketSameLine": true  // 在jsx中把'>' 是否单独放一行
}

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 即可，就能正常使用了；

转载自:https://juejin.cn/post/7264062850200158266

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

前言

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

Prettier 中文网

一、使用

1.1 使用方式

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

1.2.1 自动保存时格式化

1.2.2 配合 git 使用

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

2.1 我自己使用的配置

2.1.1 .prettierrc.js 配置文件

2.2.2 配置格式化命令

2.2 常见配置项

三、踩坑日记

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

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

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

2.1.1 `.prettierrc.js` 配置文件

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