vscode 必须安装的前端插件,以及格式化的配置

VS Code 必须安装的前端插件会因人而异，以下是一些常用的插件：

- HTML 插件：用于编辑和语法高亮 HTML 文件，如 `HTML Snippets`。
- CSS 插件：用于编辑和语法高亮 CSS 文件，如 `CSS Peek`。
- JavaScript 插件：用于编辑和语法高亮 JavaScript 文件，如 `ESLint` 和 `Prettier`。
- 文件系统插件：用于在 VS Code 中浏览和管理文件，如 `File Utils` 和 `File Navigator`。
- 版本控制插件：用于与 Git 等版本控制工具集成，如 `GitLens`。

以下是 VS Code 格式化配置的示例：

{
  "editor.formatOnSave": true,
  "editor.formatOnType": true,
  "editor.tabSize": 2,
  "editor.insertSpaces": true,
  "editor.wordWrap": "on",
  "editor.detectIndentation": false,
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

其中：

- `editor.formatOnSave` 表示在保存时自动格式化代码。
- `editor.formatOnType` 表示在输入时自动格式化代码。
- `editor.tabSize` 表示制表符的大小。
- `editor.insertSpaces` 表示使用空格代替制表符。
- `editor.wordWrap` 表示在什么位置换行。
- `editor.detectIndentation` 表示自动检测缩进。
- `[javascript]`、`[html]`、`[css]` 表示针对不同的文件类型设置不同的默认格式化程序。例如，上述配置将 JavaScript、HTML 和 CSS 文件的默认格式化程序设置为 `Prettier`。