VSCode插件

1 添加自动格式化插件Prettier-Code formatter

0. 添加插件

   搜索并添加插件Prettier-Code formatter

1. 在settings.json中修改默认格式化的工具，代码如下：

   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "editor.formatOnSave": true

2. 在工程的根目录设置创建文件.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 相同。

3. 配置文件存放位置

• 项目根目录: .prettierrc、.prettierrc.js 或 package.json 中的 prettier 字段。
• 全局配置: 在用户主目录下

4. 在settings.json中配置如下

   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "editor.formatOnSave": true