VScode 安装

VScode 下载

下载网站：Visual Studio Code

VScode 插件推荐

C/C++ Themes

作用：

• 为 C/C++ 语言的源代码提供 UI 主题和配色方案。
• 增强 C/C++ 代码的语法高亮和可读性。

Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code

作用：

• 提供 Visual Studio Code 用户界面的简体中文翻译。
• 将 VS Code 的菜单、设置等显示为中文，便于中文用户使用。

Dev Containers

作用：

• 允许用户在 Docker 容器内打开任何文件夹或代码仓库。
• 提供一个完整、隔离的开发环境，包含所有必要的工具链、运行时和依赖项。

ESLint

作用：

• 集成 ESLint，用于检查 JavaScript 代码中的潜在错误和风格问题。
• 提供代码静态分析和即时反馈（代码规范检查）。

GitHub Copilot Chat

作用：

• 提供由 GitHub Copilot AI 驱动的聊天功能。
• 用于提问、获取代码解释、生成代码片段或进行代码重构建议。

Markdown All in One

作用：

• 为 Markdown 写作提供一体化支持。
• 提供便捷的键盘快捷键、目录生成和自动预览等功能。

Markdown PDF

作用：

• 将 Markdown 文件转换为 PDF 格式。
• 方便将 Markdown 文档导出为可打印或分享的文档。

markdownlint

作用：

• 对 Markdown 文件执行格式检查 (linting) 和样式检查。
• 帮助用户遵循一致的 Markdown 编写规范。

open in browser

作用：

• 允许用户将当前编辑的 HTML 文件或本地文件快速在默认浏览器中打开。
• 方便前端开发人员快速查看页面效果。

Prettier - Code formatter

作用：

• 一个使用 Prettier 工具的代码格式化程序。
• 自动统一项目代码的风格和格式，例如缩进、引号、分号等。

使用方法：

1. 创建配置文件：在项目根目录下创建 .prettierrc.json（JSON 格式）或 .prettierrc.js（JavaScript 格式），例如：

// prettier的默认配置文件
module.exports = {
  // 一行最多 100 字符
  printWidth: 100,
  // 使用 2 个空格缩进
  tabWidth: 2,
  // 不使用缩进符，而使用空格
  useTabs: false,
  // 不尾随分号
  semi: false,
  // 使用单引号
  singleQuote: true,
  // 多行逗号分割的语法中，最后一行不加逗号
  trailingComma: 'none',
  // 单个参数的箭头函数不加括号 x => x
  arrowParens: 'avoid',
  // 对象大括号内两边是否加空格 { a:0 }
  bracketSpacing: true,
  //去除多余空行的设置
  htmlWhitespaceSensitivity: 'ignore'
}

2. 忽略特定文件：创建 .prettierignore 文件，指定不需要格式化的文件或目录：

# .prettierignore 示例
node_modules
dist
build

3. 高级配置（推荐）：为避免与 ESLint 等工具冲突，建议结合项目已有规则进行配置：

• 安装 eslint-config-prettier 禁用 ESLint 中与 Prettier 冲突的规则：

npm install --save-dev eslint-config-prettier

• 在 .eslintrc.json 中添加：

  "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescript]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}
{
  "extends": ["prettier"] // 确保 "prettier" 是最后一个扩展
}

• 在项目根目录下创建 .vscode/settings.json，确保团队成员使用统一的格式化规则：

  "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescript]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}
{
  "editor.defaultFormatter": "esbenp.prettier-vscode", // 设置默认格式化工具
  "editor.formatOnSave": true,                         // 保存时自动格式化
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,                      // 保存时自动修复 ESLint 问题
    "source.organizeImports": true                     // 保存时自动整理导入语句
  },
  "prettier.configPath": ".prettierrc.json"            // 指定 Prettier 配置文件路径
}

4. 仅对特定语言启用 Prettier：在 settings.json 中配置：

"[javascript]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescript]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}