日常在VS Code开发中没注意到的一些实用配置

前言

大家在使用vscode进行日常开发的时候，因为接触的项目不算多，所以会比较少关注一些实用的IDE配置，可能愿意花点时间去适应和操作，也不会主动去查找有没有更优的方案，毕竟只有这一两个项目需要关注，耗时也不算很多。但是有些比较实用的配置，我还是希望各位能在日常业务开发中能使用到，还是稍微有点收益的。

Vscode的配置是可以适配和迁移到Trae的

一、实用插件

在 VS Code 项目中添加推荐插件配置文件（.vscode/extensions.json），可以让团队成员或项目协作者快速安装所需插件。以下是作者常用的一些插件：

json 复制代码

{
  "recommendations": [
    "vue.volar", // Volar
    "rvest.vs-code-prettier-eslint",
    "MS-CEINTL.vscode-language-pack-zh-hans", // vscode 中文（简体）语言包
    "mhutchie.git-graph", // git 提交记录
    "donjayamanne.githistory", // git 历史记录
    "eamodio.gitlens", // git 实用插件
    "christian-kohler.npm-intellisense", // npm Intellisense
    "Alibaba-Cloud.tongyi-lingma", // 通义灵码
    "streetsidesoftware.code-spell-checker" // 单词拼写检查
  ]
}

这是一些作者在日常开发中会经常使用到的插件，插件系统是vscode的核心功能，这也为什么是vscode能替代WebStorm的原因之一，欢迎大家在评论区推荐有在日常开发中使用频率高且好用的插件。

如何获取插件ID

打开 VS Code 插件面板（Ctrl+Shift+X）
搜索目标插件，点击右侧 ⚙ 菜单 → 选择「复制扩展 ID」

二、项目配置

在 VS Code 项目中添加推荐插件配置文件（.vscode/settings.json），可以让团队成员或项目协作者优先使用这份vscode配置。以下是作者常用的一些配置：

json 复制代码

{
  // 控制是否已在资源管理器中启用文件嵌套。
  //文件嵌套允许目录中的相关文件在单个父文件下以可视方式组合在一起。
  "explorer.fileNesting.enabled": true,
  // 控制是否自动扩展文件嵌套。要使此操作生效，必须设置 #explorer.fileNesting.enabled#。
  "explorer.fileNesting.expand": false,
  // 控制资源管理器中的文件嵌套
  "explorer.fileNesting.patterns": {
    "*.ts": "$(capture).test.ts, $(capture).test.tsx",
    "*.tsx": "$(capture).test.ts, $(capture).test.tsx",
    "CHANGELOG.md": "CHANGELOG*",
    ".env.dev": ".env.dev,.env.prod,.env.test",
    "project.config.json": "postcss.config.js,project.tt.json,jest.config.ts,babel.config.js,.stylelintrc.js,.eslintrc.js,tailwind.config.js,.prettierrc,.prettierignore,openapi.config.ts",
    "package.json": "pnpm-lock.yaml,pnpm-workspace.yaml,LICENSE,.gitattributes,.gitignore,.gitpod.yml,CNAME,.npmrc,.browserslistrc",
    ".eslintrc.cjs": ".eslintignore,.prettierignore,.stylelintignore,.commitlintrc.*,.prettierrc.*,.stylelintrc.*,.eslintrc-auto-import.json,.editorconfig,.commitlint.cjs"
  }
}

这里的配置作者主要喜欢的是将一些相关文件的进行折叠，避免项目中过多的配置文件影响目录结构在视觉上的干扰。具体效果如图：

三、代码片段

代码片段也是在日常开发中比较提效的一个方法，不仅可以设置为个人使用，也可以配置在项目中供团队使用。

在 VS Code 项目中添加项目级代码片段，可通过 .vscode/snippets.json 实现团队共享。以下是作者在开发中常用到的console.log代码片段：

json 复制代码

{
  "console log": {
    "prefix": "cls",
    "body": ["console.log('--- $1${CLIPBOARD} ---', ${CLIPBOARD})"],
    "description": "Log output to console"
  }
}

大家可以试用一下，主要功能就是输入cls时选中对应弹出提示的代码，他会根据你剪切板的内容替换相应的占位符，并输出console.log("--- $1${CLIPBOARD} ---", ${CLIPBOARD})，$1 为输出后光标所在位置。如下图所示：

内置变量

VS Code 提供了不少内置变量,可以在代码片段中使用。这些变量会在插入片段时被实际值替换。

常用内置变量:

$TM_FILENAME: 当前文件的文件名
$TM_FILENAME_BASE: 当前文件的文件名(不含扩展名)
$TM_DIRECTORY: 当前文件所在的目录
$TM_FILEPATH: 当前文件的完整文件路径
$CLIPBOARD: 当前剪贴板中的内容

注意事项

避免全局覆盖：项目级片段优先级低于用户全局设置，同名前缀以项目配置为准
占位符顺序 ：$1 是首个光标位置，$0 是最终位置（如末尾分号）
敏感信息：勿包含密钥、路径等私有内容
格式化 ：复杂模板可配合 Prettier 插件自动格式化（需在 settings.json 配置 "editor.formatOnTab": true）

如果大家还有其他实用或者有趣的功能，欢迎在评论区留言！！！