VSCode 设置

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

设置级别

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

项目 > 工作区 > 用户

项目级

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

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

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

格式如下：

{
  "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 风格，侧边栏在右边，关闭按钮在选项卡左边，可以自行修改

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

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

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

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

其他推荐设置：

"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 → 新建全局/项目代码片段 → 输入片段名 即可新建代码片段文件

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

{
  // 代码片段名字
  "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 分支以及更改数量，点击分支能快速切换分支