代码自动格式化prettier

1、安装prettier code formatter插件

2、安装依赖 npm add –save-dev –save-exact prettier

3、项目根目录创建 .prettierrc 文件

{
"useTabs": false,
"tabWidth": 2,
"printWidth": 200,
"singleQuote": false,
"bracketSpacing": true,
"semi": false,
"htmlWhitespaceSensitivity": "ignore",
"jsxSingleQuote": false,
"jsxBracketSameLine": false,
"vueIndentScriptAndStyle": true,
"quoteProps": "as-needed",
"trailingComma": "es5",
"arrowParens": "always",
"endOfLine": "lf"
}

描述

{
  printWidth: 80, //单行长度
  tabWidth: 2, //缩进长度
  useTabs: false, //使用空格代替tab缩进
  semi: true, //句末使用分号
  singleQuote: true, //使用单引号
  quoteProps: 'as-needed', //仅在必需时为对象的key添加引号
  jsxSingleQuote: true, // jsx中使用单引号
  trailingComma: 'all', //多行时尽可能打印尾随逗号
  bracketSpacing: true, //在对象前后添加空格-eg: { foo: bar }
  jsxBracketSameLine: true, //多属性html标签的‘>’折行放置
  arrowParens: 'always', //单参数箭头函数参数周围使用圆括号-eg: (x) => x
  requirePragma: false, //无需顶部注释即可格式化
  insertPragma: false, //在已被preitter格式化的文件顶部加上标注
  proseWrap: 'preserve', //不知道怎么翻译
  htmlWhitespaceSensitivity: 'ignore', //对HTML全局空白不敏感
  vueIndentScriptAndStyle: false, //不对vue中的script及style标签缩进
  endOfLine: 'lf', //结束行形式
  embeddedLanguageFormatting: 'auto', //对引用代码进行格式化
};

4、修改编辑器的自动格式化设置,保存时格式化和使用prettier格式化

代码自动格式化prettier

这个设置也可以配置到项目的.vscode文件夹中,在.vscode文件夹中新建settings.json

{

"editor.formatOnSave": true, //保存时自动格式化

"editor.defaultFormatter": "esbenp.prettier-vscode"

}

默认.vscode是不会被git推送的,可将.gitignore文件中相关代码注释。如非必要还是手动设置吧

# .vscode/*
# !.vscode/extensions.json
© 版权声明

相关文章