前言
Prettier是什么、能帮我们解决什么问题？
- Prettier 是一个代码格式化工具，可以格式化代码，但不具备代码检查功能，它可以通过解析代码并使用自己的规则重新打印它，并考虑最大行长来强制一致的样式，并在必要时包装代码，如今，它已成为解决所有代码格式问题的优选方案，支持多种语言，可以将 ESLint 和 Prettier 结合使用，提高代码质量。
怎么使用？
- 方式一：下载
Prettier插件； - 方式二：在项目中安装
npm i prettier，然后在项目根目录下创建配置文件（.prettierrc.js）进行配置； - 如果两种方式都使用了，那么
prettier配置文件的优先级首先是当前项目根目录下的配置文件；
一、Prettier 常见配置
-
prettier的配置项文件常见的一般都有两种格式：js + json；js后缀的写起来方便一点，不用给属性名添加双引号；json后缀的写起来比较繁琐，必须严格遵守json语法；
-
我自己的配置：
js// 配置几个常用的就可以 module.exports = { "semi": true, // 结尾使用分号 "tabWidth": 2, // tab的宽度 2个字符 "singleQuote": false, // 使用双引号，要想使用单引号，改成true即可 "printWidth": 120, // 每行最多显示的字符树，超过这个就换行显示 "trailingComma": "none", // 结尾是否添加逗号 "bracketSpacing": true, // 对象括号两边是否用空格隔开 "jsxBracketSameLine": true // 在jsx中把'>' 是否单独放一行 } -
常见配置项：
js// 此处的常见配置是参考这位大佬的：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报的错误，我们打开编译器的控制台，看输出，就会看到一下一大串的鬼东西；
-
详细报错信息：
js["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即可，就能正常使用了；
- 我们只需将 编码格式 换为