1. vscode 安装 prettier 插件
2. 下载依赖
yarn add -D prettier
3. 文件配置
在根目录下创建.prettierrc
配置文件及.prettierignore
忽略文件
.prettierrc
文件
{
printWidth: 800, //单行长度
tabWidth: 2, //缩进长度
useTabs: true, //使用空格代替tab缩进
semi: false, //句末使用分号
singleQuote: true, //使用单引号
quoteProps: 'as-needed', //仅在必需时为对象的key添加引号
jsxSingleQuote: true, // jsx中使用单引号
trailingComma: 'all', //多行时尽可能打印尾随逗号
bracketSpacing: true, //在对象前后添加空格
jsxBracketSameLine: true, //多属性html标签的‘>’折行放置
arrowParens: 'always', //单参数箭头函数参数周围使用圆括号
requirePragma: false, //无需顶部注释即可格式化
insertPragma: false, //在已被preitter格式化的文件顶部加上标注
htmlWhitespaceSensitivity: 'ignore', //对HTML全局空白不敏感
vueIndentScriptAndStyle: false, //不对vue中的script及style标签缩进
endOfLine: 'lf', //结束行形式
embeddedLanguageFormatting: 'auto', //对引用代码进行格式化
'prettier.proseWrap': 'preserve', // 是否要换行
'vetur.format.defaultFormatter.js': 'prettier', // vetur 使用 prettier格式化代码
}
.prettierignore
文件 根据自己需求配置
4. 选择Prettier格式化文件
右键格式化文档选择prettier