1 添加自动格式化插件Prettier-Code formatter
-
添加插件
搜索并添加插件
Prettier-Code formatter -
在
settings.json中修改默认格式化的工具，代码如下："editor.defaultFormatter": "esbenp.prettier-vscode", "editor.formatOnSave": true -
在工程的根目录设置创建文件
.prettierrc
设置Google chrome风格，内容如下：
{
"printWidth": 80,
"tabWidth": 2,
"useTabs": false,
"singleQuote": true,
"trailingComma": "es5",
"bracketSpacing": true,
"arrowParents": "always"
#"jsxBracketSameLine": false,
#"endOfLine": "lf",
#"htmlWhitespaceSensitivity": "css"
}
printWidth: 设置每行代码的最大长度，超出部分自动换行。这里设置为 80，符合常见的代码行长度限制。
tabWidth: 设置缩进宽度，这里设置为 2 个空格，符合 Google 的代码风格。
useTabs: 设置为 false，表示使用空格进行缩进，而不是制表符。
semi: 设置为 true，表示在语句末尾添加分号。
singleQuote: 设置为 true，表示使用单引号。
trailingComma: 设置为 "es5"，表示在对象和数组的最后一个元素后添加逗号，符合 ES5 的规范。
bracketSpacing: 设置为 true，表示在对象属性的冒号后添加空格。
jsxBracketSameLine: 设置为 false，表示 JSX 元素的闭合标签不与开始标签在同一行。
arrowParens: 设置为 "always"，表示箭头函数的参数总是用括号包裹。
endOfLine: 设置为 "lf"，表示使用 Unix 风格的行结束符。
htmlWhitespaceSensitivity: 设置为 "css"，表示对 HTML 中的空白字符的敏感度与 CSS 相同。
- 配置文件存放位置
- 项目根目录: .prettierrc、.prettierrc.js 或 package.json 中的 prettier 字段。
- 全局配置: 在用户主目录下
-
在settings.json中配置如下
"editor.defaultFormatter": "esbenp.prettier-vscode", "editor.formatOnSave": true