【编码效率】VS Code配置 JavaScript、HTML 自动化格式

在VS Code中配置JavaScript和HTML的自动格式化工具，可以使用Prettier插件。以下是配置步骤和示例代码：

1. 安装Prettier插件：

   打开VS Code，按下Ctrl+P（或Cmd+P在Mac上），输入ext install esbenp.prettier-vscode，然后点击安装。

2. 安装Prettier本身作为开发依赖：

   
   
   
   npm install --save-dev prettier

3. 配置VS Code的settings.json文件：

   打开VS Code设置（可以通过点击左下角的设置图标或通过Ctrl+,快捷键打开），然后在settings.json文件中添加以下配置：

   
   
   
   {
     "editor.formatOnSave": true,
     "editor.defaultFormatter": "esbenp.prettier-vscode",
     "[javascript]": {
       "editor.formatOnSave": true
     },
     "[html]": {
       "editor.formatOnSave": true
     },
     "prettier.singleQuote": true,
     "prettier.trailingComma": "es5",
     "prettier.printWidth": 80,
     "prettier.tabWidth": 2,
     "prettier.useTabs": false,
     "prettier.semi": true,
     "prettier.arrowParens": "avoid",
     "prettier.bracketSpacing": true,
     "prettier.endOfLine": "auto",
     "prettier.htmlWhitespaceSensitivity": "css",
     "prettier.jsxBracketSameLine": false,
     "prettier.jsxSingleQuote": false,
     "prettier.requirePragma": false,
     "prettier.proseWrap": "preserve",
     "prettier.quoteProps": "as-needed",
     "prettier.tslintIntegration": false,
     "prettier.vueIndentScriptAndStyle": false,
     "files.autoSave": "off",
     "editor.codeActionsOnSave": {
       "source.fixAll.eslint": true
     }
   }

这样配置后，每次保存文件时，Prettier会自动格式化JavaScript和HTML文件。你可以根据项目需求调整Prettier的规则。