VScode

设置

安装插件

Chinese (Simplified) (简体中文) Language Pack for Visual : 简体中文语言包
Code Spell Checker : 拼写检查
GitHub Copilot Chat : AI 助手（帮我想提交代码的commit message）
JavaScript (ES6) code snippets : JavaScript（ES6）代码片段
Live Server : 实时预览
Markdown Preview Enhanced : Markdown 预览
**Prettier - **Code formatter** : 代码美化
VSCode Great Icons : 图标美化
vscode-fileheader : 文件头注释生成
vscode-styled-components : Styled Components 语法支持（JS中写style代码提示）
GitLens — Git supercharged : Git 增强（代码行历史）

用户设置(JSON)

Ctrl + Shift + P 打开命令面板，输入 Preferences: Open User Settings(JSON) ，回车，粘贴以下配置保存

{
  "cSpell.ignoreWords": ["APIVER", "APPKEY", "UDID", "WXAPP", "bindinput", "brapi", "catchtap", "erro", "unionid", "wxmp"], // 拼写检查时忽略特定单词
  "editor.autoIndentOnPaste": true, // 粘贴代码时自动调整缩进
  "editor.defaultFormatter": "esbenp.prettier-vscode", // 默认使用 Prettier 进行代码格式化
  "editor.fontSize": 16, // 编辑器中显示的默认字体大小
  "editor.formatOnSave": true, // 保存时自动格式化代码
  "editor.guides.bracketPairs": "active", // 启用括号匹配指南，仅在活动括号对上显示
  "editor.linkedEditing": true, // 启用链接编辑，修改标签时自动同步闭合标签
  "editor.minimap.autohide": "mouseover", // 缩略图仅在鼠标悬停时显示
  "editor.tabSize": 2, // 缩进宽度设置为 2 个空格
  "editor.wordWrap": "on", // 启用自动换行（长行会自动换行显示）
  "files.associations": {
    // 文件类型关联
    "*.wxml": "html", // 将 .wxml 文件视为 HTML 进行语法高亮
    "*.wxss": "css" // 将 .wxss 文件视为 css 进行语法高亮
  },
  "files.insertFinalNewline": true, // 确保文件末尾始终有一个换行符
  "files.trimTrailingWhitespace": true, // 保存时自动删除行尾多余的空格
  "git.confirmSync": false, // 同步操作不再弹出确认对话框
  "git.enableSmartCommit": true, // 启用智能提交功能，允许直接在源代码管理视图中输入提交消息并提交更改
  "github.copilot.enable": {
    // 已知语言标识符 https://code.visualstudio.com/docs/languages/identifiers#_known-language-identifiers
    "javascript": false // 在 JavaScript 文件中禁用 GitHub Copilot
  },
  "liveServer.settings.port": 5500, // Live Server 本地服务器运行的端口号
  "prettier.arrowParens": "avoid", // 箭头函数参数只有一个时省略括号
  "prettier.printWidth": 300, // 设置最大行宽度为 300 个字符
  "prettier.singleAttributePerLine": false, // 关闭 HTML 中每个属性单独占一行的格式化
  "prettier.singleQuote": true, // 使用单引号而非双引号
  "prettier.semi": false, // 关闭语句末尾的分号
  "prettier.trailingComma": "none", // 关闭尾随逗号
  "terminal.integrated.fontSize": 16, // 终端中的字体大小
  "update.showReleaseNotes": false, // 禁止更新后显示发布说明
  "update.mode": "none", // 禁止自动检查更新
  "workbench.iconTheme": "vscode-great-icons", // 工作台使用的图标主题
  "workbench.tree.indent": 12, // 文件资源管理器中的缩进距离
  "[markdown]": {
    // Markdown 文件专属设置
    "files.trimTrailingWhitespace": false // 关闭 Markdown 中行尾空格的自动删除
  }
}

设置 `Snippets`

Ctrl + Shift + P 打开命令面板，输入 Snippets: Configure Snippets ，回车，找到 HTML ，回车，粘贴以下配置保存

{
  "html": {
    "prefix": "hh",
    "body": [
      "<!doctype html>",
      "<html lang=\"zh-CN\">",
      "  <head>",
      "    <meta charset=\"utf-8\" />",
      "    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1, minimum-scale=1\" />",
      "    <title>$1</title>",
      "    <meta name=\"description\" content=\"$2\" />",
      "    <meta name=\"keyword\" content=\"$3\" />",
      "  </head>",
      "  <body>",
      "    $4",
      "  </body>",
      "</html>"
    ],
    "description": "自定义的 HTML5 基础结构"
  }
}

Ctrl + Shift + P 打开命令面板，输入 Snippets: Configure Snippets ，回车，点击 新建全局代码片段文件 ，点击，文件命名为 wxmp ，后缀自动生成，粘贴以下配置保存

{
  "view tag": {
    "prefix": "vv",
    "body": "<view class=\"$1\">$2</view>",
    "description": "Create view tag"
  }
}

所有的 Snippets 保存在 C:\Users\用户名\AppData\Roaming\Code\User\snippets 下

不常见问题

云端和本地恢复初始设置

左下角 用户头像 — 设置同步已打开 — 设置同步: Turn off — 勾选 关闭所有设备上的同步设置，并从云中清除数据 — 点击关闭
上一步退出登录后，卸载vscode
卸载后，手动删除 C:\Users\用户名\AppData\Roaming\Code 和 C:\Users\coder\.vscode

设置 — 配置文件 — 文件夹和工作区下的文件路径无法删除

Ctrl + Shift + P 打开命令面板，输入 Developer: Reset Workspace Profiles Associations ，回车

设置

安装插件

用户设置(JSON)

设置 Snippets

不常见问题

云端和本地恢复初始设置

设置 — 配置文件 — 文件夹和工作区 下的文件路径无法删除

设置 `Snippets`

设置 — 配置文件 — 文件夹和工作区下的文件路径无法删除