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格式化
这个设置也可以配置到项目的.vscode文件夹中,在.vscode文件夹中新建settings.json
{
"editor.formatOnSave": true, //保存时自动格式化
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
默认.vscode是不会被git推送的,可将.gitignore文件中相关代码注释。如非必要还是手动设置吧
# .vscode/*# !.vscode/extensions.json© 版权声明
文章版权归作者所有,未经允许请勿转载。