黑白梦

toggle nav

VSCode 常用操作、设置与插件

发布于 2022-04-16, 更新于 2024-06-30

VSCode 用于前端及 Node.js 开发功能已经足够，在 react 或 vue 的 ts 项目内都能做到较好的提示和跳转了，再配合设置和插件，整体开发体验不错。

而且前端及 Node.js 生态中的很多包都是优先更新到 VSCode，只有使用 VSCode 才能拥抱最新的生态。

常用设置

用户设置与工作区设置

在设置面板，有两个 tab 选项：

  • 用户设置，体现在 ~ 目录，所有项目生效
  • 工作区设置，会在当前位置生成 .vscode 目录，设置记录在该配置目录中。

同样的，如果需要指定某插件本项目不使用，或仅本项目使用，在插件中选择 启用（工作区）即可。

配置自动格式化

  • 设置中勾选 Format On Save 即可，适用于全部文件
  • 或者设置全部格式化，如
"editor.codeActionsOnSave": {
    "source.fixAll": "always"
}
  • 或者设置特定的格式化，如只指定 eslint 格式化
"editor.codeActionsOnSave": {
  "source.fixAll.eslint": "always"
}

配置新窗口打开目录

避免开启新目录、历史项目时直接把当前项目覆盖掉。

设置 Open Folders In New Window 为 on

设置退出确认

避免错按退出按钮，导致文件未保存、项目需重新启动等。

设置 Window: Confirm Before Close 为 always

终端设置

  • windows 设置默认终端为 git bash

左侧栏增加 npm 指令

搜索设置下 Enable Run From Folder ，勾选；

然后到 EXPLORER 中右上角打开，选中 NPM Scripts，即可看到 npm 指令已自动添加到面板里。

可将该面板拖出来，拖到跟 EXPLORER 同级，方便访问。

搜索 Script Explorer Action 设置，选择 run ，点击即可启动命令，更方便启动。

重启命令的方式：重新在 NPM Scripts 面板运行该命令即可，如果已运行它会提示重启。

设置窗口标题

默认窗口会显示文件名等信息，文件名比较长，在 Windows 中切换窗口，几乎就看不出哪个项目，很难找。

这就可以在设置中搜索 window.title ，将它改为 ${rootName} ，windows 可以设置为 ${dirty}${rootName} ，这样直接显示工作区的名字，如果是单目录打开它会是项目的名字。

设置分词符

比如选择 css 时，总是希望能带上 - 一起选择，可以搜索分词符设置 "editor.wordSeparators" ，将 - 去掉即可。

可设置到工作区或项目，指定项目使用。

可在设置中点击齿轮，很方便地重置此设置。

常用操作

终端操作

  • 从底部拖拽即可拉出终端，拉回底部即可隐藏（非关闭）
  • 可开启多个终端窗口，可分割并排显示

合并窗口 (MAC)

将 Window: Native Tabs 勾选即可。

需要合并时，在 Window 菜单勾选 Merge All Window。

项目设置别名跳转

VSCode 对别名 @ 的解析，是通过 tsconfig.json 或 jsconfig.json 来解析的。如果是 js 项目，项目内需建立一个 jsconfig.json 文件：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

未启用 ts 情况下，即使使用了 jsconfig 文件，体验还是不太友好，需要进行配置。

  • 安装 别名路径跳转 插件，未启用 tsconfig 的情况下，支持 @ 别名跳转
  • Image preview 不支持别名预览，可增加工作区配置 "gutterpreview.paths": { "@": "./src" },
  • 路径补全不完善，可增加一个工作区配置 "path-intellisense.mappings": { "@": "${workspaceRoot}/src" }, 使提示更完善，比如支持图片路径提示

全局正则搜索、替换

全局正则搜索，带括号时，在替换时使用 $1 可代表匹配的第一个括号内容，以此类推。

如 [0001 格式的题目链接标题，在前面批量加个内容：

  • 搜索： \[(\d\d\d\d)
  • 替换：[leetcode $1

git 相关操作：

  • 设置 git diff 双窗口显示：
    • 更新 VSCode 后，git 差异变成一个窗口内同时显示新增、删除的内容了，这样对比、搜索都不方便。
    • 点击右上角的 … 按钮，取消勾选【内联视图】和【空间受限时使用内联视图】。
  • 之前的 git commit 提交信息：在提交信息框中按上下方向键即可切换。
  • 从 git diff 中进入文件：在编辑器右上角也有一个文件 icon，点击可回到文件。

重启语言服务

  • 如果遇到代码提示或文件索引异常等，可重启该语言服务
  • 如: restart ts server / restart eslint server

编写 snippets

在 Perferences 中选择 Configure User Snippets，然后在弹窗选择需要设置 snippets 的语言。

根据模板样式进行设置即可。 $1 指光标出现的第一个位置，$2 指按 Tab 键切换后光标出现的第二个位置。

需要说明，光标处于 $1 这种位置时，是无法使用代码提示，这些占位符只适合值输入的场景。

设置终端环境变量

可指定VSCode 内的终端特定的环境变量，就不用到全局变量中设置了，如果工作流全都集中在 VSCode ，这样更方便。

又或者有时候 VSCode 读取不到某些变量，比如 NODE_OPTIONS ，可能是 VSCode 有些版本自身会使用这个变量，产生冲突之类的，这时就可以通过终端环境变量来设置了。

设置方式：设置 - 功能 - 终端 - Integrated › Env: Linux

在项目中启用/禁用插件

安装的插件比较多，会使得 VSCode 变慢，而且有时候某些插件会与当前的想要的操作冲突。这时希望能在项目中禁用插件。

可以到插件界面，Disable 按钮有一个下拉选项，选择 Disable (Workspace)，即可在当前项目禁用插件了。虽然这里说的是工作区，但直接打开目录时是对项目生效的。

也可以设置一个多目录工作区，可以定制各个方面的环境，包括单独设置插件是否启用。

.vscode 项目内设置

可以创建 .vscode 目录进行项目内的设置：

  • 创建 settings.json 文件进行项目内设置。
  • 在命令中输入 configure user snippets 后，选择 New snippets file for 当前目录创建项目级 snippets，会创建 .code-snippets 文件。

常用插件

插件可按流行度、最近更新等排序，插件的命令在 command palette 中可以搜到。

通用必选插件

  • Sublime Text Keymap and Settings Importer, 快捷键
  • GitLens, 提高了 Git 的功能, 如显示文件详细提交记录、当前行的提交人等
  • 翻译(英汉词典), 本地翻译插件，无需联网
  • Project Manager, 配置项目为目录，支持快速打开、切换目录
  • Code Runner, 运行单个插件，安装后设置:
    • "code-runner.runInTerminal": true 在终端运行
    • "code-runner.ignoreSelection": true 忽略选中，执行整个文件
    • "code-runner.saveFileBeforeRun": true 运行前保存文件
  • Code Spell Checker, 拼写检查
  • IntelliCode 代码智能提示插件

前端必选插件

  • HTML CSS Support 提供 HTML、CSS 的代码高亮和提示
  • JavaScript (ES6) code snippets
  • Path Intellisense, 地址提示优化
  • npm Intellisense
  • ESLint
  • Prettier
  • Prettier ESLint
  • EditorConfig for VS Code
  • Import Cost, 查看引入的包大小
  • Auto Rename Tag
  • CSS Modules
  • SVG Previewer
  • Image preview, 鼠标悬停可以预览图片
  • Stylelint
  • Color Highlight
  • node_modules, 从 package.json 中查看实际安装的依赖版本、跳转到 node_modules 内部该依赖的目录下

前端通用可选插件

  • ES7+ React/Redux/React-Native snippets
  • WXML - Language Service
  • Tailwind CSS IntelliSense
    • 需要配置：
      "tailwindCSS.includeLanguages": {
  "javascript": "javascript",
  "html": "HTML"
},
"editor.quickSuggestions": {
  "strings": true
},

vue 相关插件

  • 语言支持： vue 3 项目使用 Vue - Official ，vue 2 项目使用 Vetur ，不要混用。默认关闭，工作区开启。
  • CSS Navigation 安装后支持 vue 单文件组件内样式跳转
  • Vue 3 Snippets, 支持 vue 代码提示，也支持 vue 2
  • uni-helper, 支持 uniapp 开发的拓展包，按需启用

接口请求（可选）

  • Thunder client 发起接口请求，完整的 GUI 界面，可以直接替代 Postman
  • Rest Client, 通过创建 .rest 文件来请求接口 (不方便安装 Thunder client 时使用) ，通过 @xxx 在文件中设置变量，可通过 rest-client.environmentVariables.$shared 设置全局变量，也通过项目级设置变量在目录中设置变量。

其他工具（可选）

  • Paste JSON as Code, 复制粘贴，将 json 解析为 ts 及其他语言的类型定义文件
  • html to JSX, 将 html 转为 jsx
  • SonarLint 查找常见代码错误，较严格，按需选用

markdown 插件与配置

编辑器本身已经具备较强的markdown功能： https://code.visualstudio.com/Docs/languages/markdown

再配合一些设置和插件，VSCode 整体的 Markdown 编辑体验已经比较不错了。

一些 markdown 配置

// 设置换行符在 Markdown 预览中换行
"markdown.preview.breaks": true,
// 启用突出显示当前文档中的链接匹配项
"markdown.occurrencesHighlight.enabled": true,
// 重命名/移动工作区中的文件时，请尝试更新 Markdown 文件中的链接
"markdown.updateLinksOnFileMove.enabled": "always",
// 定义通过放置或粘贴操作复制或创建的文件应位于哪个位置
"markdown.copyFiles.destination": {
  "/**/*": "images/${documentBaseName}/"
},
"[markdown]": {
  // 设置语法提示位置于底部，写项目内链接时，避免提示覆盖在文件路径提示中，不好找
  "editor.snippetSuggestions": "bottom",
  "editor.defaultFormatter": "esbenp.prettier-vscode"
},

一些 markdown 操作

  • 预览时双击即可自动跳到编辑器的对应位置
  • 关联本地文档：
    • 设置链接时，可使用相对或绝对路径，有路径和文件提示，如 [链接文字](/notes/test.md)；文件名有空格的，可以使用 <> 扩住，如 [链接文字](</notes/1. test.md>)
    • 关联的文档，路径改变后，关联了它们的文档可自动更新其文件路径
    • 关联的本地文档可在编辑器中打开对应的编辑，以及在预览中打开对应的预览
  • 粘贴图片：
    • 支持直接把复制的图片粘贴进来，支持配置粘贴进来的位置
    • 图片路径更改后，会自动同步。文件更名后，只需要把原图片资源目录也改一下名即可

markdown 辅助插件

  • Markdown Table （必选） 支持表格编辑，如插入行、列，从 excel 粘贴等
  • Marp for VS Code （按需） 通过 markdown 制作 PPT
本文收录于专栏

好用的开发工具

整理一些开发相关的好用软件、网站、工具等