节流网

主题

00:00:00

外卖卷：非常划算 扫码领劵 省点小钱钱

2026-04-09学习电脑学习
2777
10.5m
0

VSCode 设置 ​

​

Chinese (Simplified) Language Pack for Visual Studio Code - 中文（简体）语言包
Import Cost - 导入文件大小
vscode-fileheader - 自动记录文件修改时间 - CTRL+ALT+I
vscode-icons - vscode 风格文件 icon
Beautify - 自动格式化代码
Bookmarks - 书签
Bracket Pair Colorizer - 匹配括号，并给他们独特的匹配颜色 Prettier - 格式化代码 SVG - SVG 代码格式化，预览 SVG

前端 ​

javascript console utils - 快速 console - CTRL+SHIFT+L
Live Server - 静态网页开启服务
open in browser - 快速开启浏览器浏览网页 - ALT+B
Better Comments - 不同风格注释
Auto Rename Tag - 自动修改同 HTML 标签对 Auto Close Tag - 自动删除 HTML 标签对

Vue ​

Vetur
Vue VSCode Snippets - 它为常用的 Vue 用例提供了自动填充的代码片段
Vue Peek - 速览组件

Git ​

VSCode 是目前前端最常用的编辑器，优点无需多说。这里记录下我使用过程中让 VSCode 变得更好用的一些理解

设置级别 ​

VSCode 中的设置分为三级，打开项目后会读取每一级别的设置，小区域级别的设置会覆盖大区域级别的设置

项目 > 工作区 > 用户

项目级 ​

也就是项目中.vscode文件夹下的配置文件，需要手动添加，常用的包括：

Markdown
- .vscode
  - settings.json 编辑器设置
  - extensions.json 扩展应用推荐
  - launch.json 调试设置
- 根目录

extensions.json 中添加推荐的扩展 ID，工程化项目中 git 提交后可以提醒团队项目成员安装必要的插件。当打开项目编辑器发现有推荐的插件未安装时，会在编辑器右下角提示安装

格式如下：

JSON
{
  "recommendations": ["vue.volar"],
  "unwantedRecommendations": [], // 不推荐使用的扩展
}

扩展 ID 通过 右击插件 → 复制扩展 ID 获得

settings.json 在下文介绍；launch.json 会在运行调试后自动生成，更详细的配置本文不做介绍

工作区 ​

通过 文件 → 将工作区另存为 即可保存一个扩展名为.code-workspace的工作区文件，工作区内可以通过 文件 → 将文件夹添加到工作区 添加项目。

一个工作区内可以存在多个项目。例如当手头同时有 vue2 和 vue3 的项目时，由于 vue2 使用 vuter，vue3 使用 volar，每次打开都切换插件很不方便。就可以建立 vue2 和 vue3 两个工作区，将同类的项目放至工作区，并针对工作区级别独立设置，这样通过工作区打开项目就无需频繁切换设置

工作区的编辑器设置位于 **设置 → 工作区 **中 插件通过 启用/禁用 旁边的下拉箭头中选择 启用/禁用(工作区) 实现仅在当前工作区中开启或关闭该插件（直接点击启用/禁用是全局生效的）

用户 ​

用户级别设置即全局设置，未登录账号时保存在电脑中，登录账号后会自动进行同步

部分教程讲的同步需要通过安装特定插件等复杂操作，但现在只需要在 VSCode 中登录账号，并打开设置同步就可以了。新环境中登录后会自动同步设置以及安装插件

个性化设置 ​

编辑器设置也就是每一级 settings.json 中的配置，除了项目级别手动添加外，工作区和用户级别均在设置界面中

VSCode 提供了可视化和源码配置两种设置方式，进入设置界面默认显示可视化配置，可以通过右上角打开设置图标切换为源码视图

安装 Chinese 插件后大部分的设置项都有中文说明，除了 VSCode 自身的设置外，部分插件也会有设置项

设置项非常庞杂，而且部分说明也没法快速清晰的理解具体效果。所以我个人并不推荐手动修改配置，可以参考Anthony Fu大佬分享的配置文件，并在实际使用中根据自身需求再去了解通过什么配置项修改

界面样式 Theme 相关，以及字体设置 fontFamily 需要已安装对应的样式、字体，样式通过在插件中搜索，字体需要自行下载安装

大佬配置的界面是 Mac 风格，侧边栏在右边，关闭按钮在选项卡左边，可以自行修改

JSON
  "workbench.sideBar.location": "left", // 侧边栏位置
  "workbench.editor.tabCloseButton": "right", // tab关闭按钮位置

大佬使用的格式化操作是仅使用 eslint，所以关闭了 prettier，为什么我会在后文介绍

可以根据需求选择全局或项目/工作区级别设置中开启 prettier

JSON
"prettier.enable": false, // 用户级别中注释该句开启prettier，或在特定的设置级别中设置为true

其他推荐设置：

JSON
"editor.linkedEditing": true, // 编辑时自动修改关联的标签，如HTML标签（功能同Auto Rename Tag插件，添加这条配置后这个插件就可以卸载了）

设置中可能有灰色的设置项，显示是未知的配置。可能的情况有：

  1. 该设置项不存在
  2. 仅在其他系统中生效
  3. 属于插件设置项，但并未安装该插件

快捷键 ​

熟悉常用快捷键能大幅度提升编码速度与体验，常用的操作比如：

  • 选择相同单词

  • 插入、移动、复制、删除行

  • 多光标操作

  • 单行、多行注释

  • 保存单个、多个文件

  • 命令面板

    ctrl + shift + p打卡命令面板，通过输入命令的方式执行编辑器或插件提供的操作。例如：

    • reload window：重新加载窗口，编辑器卡住或插件未生效时很有用（重新加载不会停止终端中运行的服务）
    • sort json（sort package.json）：安装这两个插件后可以选中 json 代码执行命令，即可完成排序

  • 切换文件

    ctrl + p打开项目文件目录，能够快速打开最近使用的文件或通过缩写定位文件

  • ...

可以参考官方键盘快捷方式参考（帮助 → 键盘快捷方式参考），或者在 左下角管理 → 键盘快捷方式 中查看或修改常用快捷键

代码片段（snippets） ​

代码片段也就是通过敲几个字母的缩写，生成所需要的模板，例如 Emmet 语法就是一种代码片段。VSCode 内置的还包括log生成console.log()，!生成基本 HTML 结构等

vetur 等插件提供代码片段也是通过这种方式，我们可以根据自己的需求自定义代码片段

通过 命令面板 → configure user snippets → 新建全局/项目代码片段 → 输入片段名 即可新建代码片段文件

文件中的注释说明了代码片段的书写格式以及提供了例子：

JSONC
{
  // 代码片段名字
  "Print to console": {
    // 生效文件类型
    "scope": "javascript,typescript",
    // 触发关键字
    "prefix": "log",
    // 模板内容
    "body": [
      "console.log('$1');",
      "$2"
    ],
    // 描述
    "description": "Log output to console"
  }
}

$n表示光标占位符，表现形式是可以通过tab键在这些占位符中快速切换。$0比较特殊是最后定位的位置，${n:placeholder}可以为占位符添加描述，还支持多选项形式${1|one,two,three|}

body 中每一条字符串为一行，支持使用\n\t等转义字符，也可以通过在线工具快速生成 snippets

还有更多的操作，例如使用变量，插入后转换等。不常使用，感兴趣可以参考官方文档

实用功能 ​

NPM 脚本 ​

资源管理器栏中的 NPM 脚本栏，会自动读取项目 package.json 中配置的命令，可以在这里快速查看命令并执行

源代码管理 ​

侧边栏中提供的 git 工具，安装了 gitlens 插件还会有查看提交记录等更多操作

实现了 git 常用操作，而且是中文命令，比手敲更快捷稳定

状态栏左下角会显示当前 git 分支以及更改数量，点击分支能快速切换分支

VSCode 插件推荐 ​

简体中文 ​

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

ID: MS-CEINTL.vscode-language-pack-zh-hans

拼写检查 ​

名称: Code Spell Checker

ID: streetsidesoftware.code-spell-checker

检查单词拼写，错误的拼写会有下划线提示

可以在对应单词的快速修复中选择 Add: "xxx" to workspace/user settings，将这个单词添加对应级别设置中，后续该级别下文件不会再提示该单词错误（添加至项目级别方便 git 同步给团队成员共用）

编辑器配置 Editorconfig ​

名称: EditorConfig for VS Code

ID: EditorConfig.EditorConfig

editorconfig 插件，安装后会识别项目中的.editorconfig配置，用于覆盖编辑器配置，详见官方文档

增强异常信息显示 ​

名称: Error Lens

ID: usernamehw.errorlens

可以设置显示级别，和排除部分类型异常

JSON
"errorLens.enabledDiagnosticLevels": ["warning", "error"], // 仅增强显示警告和错误
"errorLens.excludeBySource": ["cSpell", "Grammarly", "eslint"], // 排除拼写、语法异常

增强注释显示以及索引 ​

名称: Todo Tree

ID: Gruntfuggly.todo-tree

注释中写对应标签时会突出显示，并在左侧 todoTree 插件栏中添加索引。可以自行设置标签关键字以及颜色

编码时长统计 ​

名称: WakaTime

ID: WakaTime.vscode-wakatime

记录编辑器使用时间等信息，可以生成开发统计数据。需要注册账号

修改界面图标 ​

名称: Carbon Product Icons

ID: antfu.icons-carbon

修改文件图标 ​

名称: file-icons

ID: file-icons.file-icons

增强 git 能力 ​

名称: Git History

ID: donjayamanne.githistory

名称: GitLens — Git supercharged

ID: eamodio.gitlens

语法检查+格式化 ​

名称: ESLint

ID: dbaeumer.vscode-eslint

名称: Prettier - Code formatter

ID: esbenp.prettier-vscode

国际化辅助插件 ​

名称: i18n Ally

ID: lokalise.i18n-ally

iconify 标签直接显示为对应图标 ​

名称: Iconify IntelliSense

ID: antfu.iconify

JSON 排序 ​

名称: Sort JSON objects

ID: richie5um2.vscode-sort-json

名称: Sort package.json

ID: unional.vscode-sort-package-json

排序 json 与排序 package.json，package.json 有自己推荐的顺序

通过ctrl + shift + p调出命令窗口并输入命令执行

其他 ​

Vuter、Volar、Less、Sass、Stylelint、PostCss Language Support 等根据需要，大多数需求都有对应的插件

但不要随意安装插件，插件会占用较多的内存。另外部分插件有重复的功能，互相影响会出现一些意想不到的情况

部分插件功能 VSCode 已内置，可以参考这篇文章排查是否可以卸载某些插件

最近更新

评论