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