vscode 配置prettier 代码自动格式化

安装Prettier

在项目路径下新建prettier.config.js文件

export default {
  printWidth: 100,
  tabWidth: 2,
  useTabs: false,
  semi: false,
  vueIndentScriptAndStyle: true,
  singleQuote: true,
  quoteProps: 'as-needed',
  bracketSpacing: true,
  trailingComma: 'es5',
  jsxBracketSameLine: false,
  jsxSingleQuote: false,
  arrowParens: 'always',
  insertPragma: false,
  requirePragma: false,
  proseWrap: 'never',
  htmlWhitespaceSensitivity: 'strict',
  endOfLine: 'auto',
  rangeStart: 0,
}

1. printWidth:- 定义每行代码的最大字符数。超过这个限制的行将被自动换行。此处设置为 100，即每行最多可以有 100 个字符。
2. tabWidth:- 设置制表符（tab）所占的空格数。此处为 2，意味着一个制表符的宽度等于 2 个空格。
3. useTabs:- 指定是否使用制表符代替空格进行缩进。false 表示使用空格。
4. semi:- 控制语句末尾是否使用分号。false 表示不使用分号，所有语句末尾都将省略分号。
5. vueIndentScriptAndStyle:- 当格式化 Vue 文件时，是否缩进 <script> 和 <style> 标签内的内容。true 表示启用缩进。
6. singleQuote:- 设置是否使用单引号（'）而不是双引号（"）。true 表示使用单引号。
7. quoteProps:- 定义在对象字面量中如何处理属性名的引号。as-needed 表示仅在必要时使用引号（如属性名包含空格或特殊字符时）。
8. bracketSpacing:- 控制对象字面量中大括号之间的空格。true 表示 { foo: bar } 的形式，而 false 则为 {foo: bar}。
9. trailingComma:- 控制对象、数组等结构末尾是否添加逗号。es5 表示在可以的情况下添加尾随逗号（如对象字面量、数组等），但不会在函数参数中添加。
10. jsxBracketSameLine:- 控制 JSX 元素的闭合括号是否与最后一行内容在同一行。false 表示闭合括号会独占一行。
11. jsxSingleQuote:- 指定在 JSX 中是否使用单引号。false 表示使用双引号。
12. arrowParens:- 控制箭头函数参数是否需要括号。always 表示即使只有一个参数也要使用括号，例如 (param) => {}。
13. insertPragma:- 控制是否在格式化的文件顶部插入一个特殊的注释。false 表示不插入。
14. requirePragma:- 控制是否仅格式化包含特定注释的文件。false 表示不要求注释。
15. proseWrap:- 设置如何处理文本块的换行。never 表示不进行换行。
16. htmlWhitespaceSensitivity:- 控制 HTML 中的空白字符敏感度。strict 表示严格遵循 HTML 规范。
17. endOfLine:- 定义行尾字符的处理方式。auto 表示使用操作系统的默认行尾格式。
18. rangeStart:- 设置格式化的起始字符位置。0 表示从文件的开始位置开始格式化。

设置setting

打开设置：file - preferences - settings

指向配置文件

输入@ext:esbenp.prettier-vscode ，config path 处填入 ./prettier.config.js

自动保存文件

输入 files.autoSave ，auto safe 选项选择onFocusChange

设置格式化插件为prettier

输入editor.defaultFormatter default formatter 下面则 prettier - Code formatter

设置Prettier插件保存时自动格式化代

输入editor.formatOnSave ， 选项打钩

验证

选择一个文件 右键选择 format document with

弹出提示 prettier 为 default 说明设置成功

问题处理

vue文件格式化 默认是 vue - official 的情况

如果提示vue - official 为 default，则点击 Configure Default Formatter

点击prettier即可

格式化时报错：Instead change the require of prettier.config.js in d:\xxxx\xx\admin-work-master\node_modules\prettier\third-party.js to a dynamic import() which is available in all CommonJS modules.

将prettier.config.js扩展名改成 .cjs
内容 改为 module.exports = 
重启 vscode 

原因：

package.json配置了

"type": "module"，

所有js文件默认使用ESM模块规范，不支持commonjs规范，所以必须显式的声明成xxx.cjs才能标识这个是用commonjs规范