vscode 使用Prettier插件格式化配置_vscode prettier 格式化配置

prettier

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格式化代码
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

.prettierignore文件 根据自己需求配置

4. 选择Prettier格式化文件

右键格式化文档选择prettier