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

前言

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

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

怎么使用？

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

一、Prettier 常见配置

• prettier的配置项文件常见的一般都有两种格式：js + json；

  • js后缀的写起来方便一点，不用给属性名添加双引号；
  • json后缀的写起来比较繁琐，必须严格遵守json语法；

• 我自己的配置：

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

• 常见配置项：

  // 此处的常见配置是参考这位大佬的：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']
  }

二、踩坑日记

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