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