吴志勇的博客
wuzhiyong
2024-09-22

VSCode的使用

# 一、VSCode的基础使用学习

# Ⅰ- VSCode的介绍

VS Code 的全称是 Visual Studio Code, 是一款开源的、免费的、跨平台的、高性能的、轻量级的代码编辑器。它在性能、语言支持、开源社区方面, 都做得很不错。

官方帮助文档: https://code.visualstudio.com/docs/

# Ⅱ - VSCode 快捷键

VS Code 用得熟不熟, 首先就看你是否会用快捷键

此处会列举部分常用快捷键, 以及本人快捷键习惯分享(仅分享, 不建议学, 每个人对于键位都有自己独特习惯)

# 1、 工作区快捷键

Mac 快捷键 Win 快捷键 作用 备注
Cmd + Shift + P Ctrl + Shift + P, F1 显示命令面板
Cmd + B Ctrl + B 显示/隐藏侧边栏 很实用
Cmd + \ Ctrl + \ 创建(拆分)多个编辑器
(或者可以直接在窗口中点击选中某个文件Tab, 右键(上下左右)拆分)		 注意:它与注释代码键位不一样
注释代码:Ctrl+/
Cmd + 1、2 Ctrl + 1、2 聚焦到第 1、第 2 个编辑器 此处主要是在拆分编辑器后切换使用
cmd +/- ctrl +/- 将工作区放大/缩小（包括代码字体、左侧导航栏） 在投影仪场景经常用到
Cmd + J Ctrl + J 显示/隐藏控制台
Cmd + Shift + N Ctrl + Shift + N 重新新建并打开一个软件的窗口
Cmd + Shift + W Ctrl + Shift + W 关闭软件的当前窗口
Cmd + N Ctrl + N 新建文件
Cmd + W Ctrl + W 关闭当前文件

# 2、 跳转操作

Mac 快捷键 Win 快捷键 作用 备注
Cmd + ` 没有 在同一个软件的多个工作区之间切换
Cmd + Option + 左右方向键 Ctrl + Pagedown/Pageup 在已经打开的多个文件之间进行切换 非常实用
Ctrl + Tab Ctrl + Tab 在已经打开的多个文件之间进行跳转 与上方一致
表现形式不一样而已
Cmd + Shift + O Ctrl + shift + O 在当前文件的各种方法之间进行跳转
Ctrl + G Ctrl + G 跳转到指定行
Cmd+Shift+\ Ctrl+Shift+\ 跳转到匹配的括号
F12 F12 跳转到变量或函数定义的快捷方法。 要先将光标移动到变量上
⌥ + F12 ALT + F12 查看定义,不是跳转,直接出现一个框查看

# 3、 移动光标

Mac 快捷键 Win 快捷键 作用 备注
方向键 方向键 在单个字符之间移动光标 大家都知道
option + 左右方向键 Ctrl + 左右方向键 在单词之间移动光标 很常用
Cmd + 左右方向键 Fn + 左右方向键 在整行之间移动光标 很常用
Cmd + ← Fn(笔记本独有) + ←（或 Win + ←） 将光标定位到当前行的最左侧 很常用
Cmd + → Fn + →（或 Win + →） 将光标定位到当前行的最右侧 很常用
Cmd + ↑ Ctrl + Home 将光标定位到文章的第一行
Cmd + ↓ Ctrl + End 将光标定位到文章的最后一行
Cmd + Shift + \ 在代码块之间移动光标
⌘ + L CTRL + L 选中当前鼠标所在行

# 4、 编辑操作

Mac 快捷键 Win 快捷键 作用 备注
Cmd + Enter Ctrl + Enter 在当前行的下方新增一行, 然后跳至该行 即使光标不在行尾, 也能快速向下插入一行
Cmd+Shift+Enter Ctrl+Shift+Enter 在当前行的上方新增一行, 然后跳至该行 即使光标不在行尾, 也能快速向上插入一行
Option + ↑ Alt + ↑ 将代码向上移动 很常用
Option + ↓ Alt + ↓ 将代码向下移动 很常用
Ctrl+Shift+↑/↓ 选中多行代码
Option + Shift + ↑ Alt + Shift + ↑ 将代码向上复制
Option + Shift + ↓ Alt + Shift + ↓ 将代码向下复制 写重复代码的利器
F2 F2 选中变量名后按F2
代码中所有变量名都会发生改变		 重构代码必不可少的快捷方式
但是要注意,此操作可能会改到同名变量

# 5、 多光标编辑

#

Mac 快捷键 Win 快捷键 作用 备注
Cmd + Option + 上下键 Ctrl + Alt + 上下键 在连续的多列上, 同时出现光标 本人改键为Ctrl+↓,
随后可随意上下选中
Option + 鼠标点击任意位置 Alt + 鼠标点击任意位置 在任意位置, 同时出现光标
Option + Shift + 鼠标拖动 Alt + Shift + 鼠标拖动 在选中区域的每一行末尾, 出现光标
Cmd + Shift + L Ctrl + Shift + L 在选中文本的所有相同内容处, 出现光标
⇧ + ⌥ + I Ctrl + Shift + I 在所选的每一行的末尾插入光标

其他的多光标编辑操作：（很重要）

  • 选中某个文本, 然后反复按住快捷键「 Cmd + D 」键（windows 用户是按住「Ctrl + D」键）, 即可将全文中相同的词逐一加入选择。

  • 选中一堆文本后, 按住「Option + Shift + i」键（windows 用户是按住「Alt + Shift + I」键）, 既可在每一行的末尾都创建一个光标。

# 6、 删除操作

Mac 快捷键 Win 快捷键 作用 备注
Cmd + shift + K Ctrl + Shift + K 删除整行 「Ctrl + X」的作用是剪切, 但也可以删除整行
option + Backspace Ctrl + Backspace 删除光标之前的一个单词 英文有效, 很常用
option + delete Ctrl + delete 删除光标之后的一个单词
Cmd + Backspace 删除光标之前的整行内容 很常用
Cmd + delete 删除光标之后的整行内容

ps：上面所讲到的移动光标、编辑操作、删除操作的快捷键, 在其他编辑器里, 大部分都适用。

# 7、 编程语言相关

Mac 快捷键 Win 快捷键 作用 备注
Cmd + / Ctrl + / 添加单行注释 很常用
Option + Shift + F Alt + shift + F 代码格式化 很常用
F2 F2 以重构的方式进行重命名 将文件中所有此变量更名
Ctrl + J 将多行代码合并为一行 Win 用户可在命令面板搜索”合并行
Cmd + U Ctrl + U 将光标的移动回退到上一个位置 撤销光标的移动和选择

# 8、 搜索相关

Mac 快捷键 Win 快捷键 作用 备注
Cmd + Shift + F Ctrl + Shift +F 全局搜索代码 (也可以直接左侧菜单栏呼出) 很常用
Cmd + P Ctrl + P 在当前的项目工程里, 全局搜索文件名
Cmd + F Ctrl + F 在当前文件中搜索代码, 光标在搜索框里
Cmd + G F3 在当前文件中搜索代码, 光标仍停留在编辑器里 与Ctrl+F就光标位置不同
⇧ + ⌘ + L CTRL + SHIFT + L 选中所有找到的匹配项,可以进行批量修改
⌘ + F2 CTRL + F2 选中所有匹配项 有了它，甚至不必选择任何东西，
只需要将光标放在要选择所有出现的单词上,跟上面一致,可以批量操作

# 9、 自定义快捷键

三种方式呼出快捷方式修改, 点击后就能查看并修改所有快捷键了

image-20210826142824734

快捷键速查表[官方]：https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf (opens new window)

# 10、组合快捷键

这种快捷键方式想必大家基本都不知道吧,就是连续按两个快捷键出现的

Mac 快捷键 Win 快捷键 作用 备注
⌘ + K ⌘ + X 先按CTRL + K 随后紧接着按 CTRL + X 裁剪尾随空格 即剪除本行代码后面所有空格
⌘ + K R 先按 CTRL + K 随后紧接着按 R 在资源管理器中显示活动文件 弹出Vscode视图显示文件
即打开当前文件目录
非常好用
⌘ + K V 先按 CTRL + K 随后紧接着按 V 打开 MarkDown 侧边预览 对于本人习惯用VSCode管理笔记来说是非常好用的
⌘ + K Z 先按 CTRL + K 随后紧接着按 Z 切换禅模式 其实就是切换为全屏且只留下活动窗口
⌘ + K ⌘ + F 先按 CTRL + K 随后紧接着按 CTRL + F 格式化选中代码 只格式化一部分代码格式

这是当你按下 Ctrl+K 时 VSCode 下方展示,没有进行计时,而是监听你按下 Ctrl+K 后在此按下的按键,不用按的很匆忙

# 11、常用快捷键

  • 移动行：alt+up/down
  • 显示/隐藏左侧目录栏 ctrl + b
  • 复制当前行：shift + alt +up/down
  • 删除当前行：shift + ctrl + k
  • 控制台终端显示与隐藏：ctrl + ~
  • 查找文件/安装vs code 插件地址：ctrl + p
  • 代码格式化：shift + alt +f
  • 新建一个窗口 : ctrl + shift + n
  • 行增加缩进: ctrl + [
  • 行减少缩进: ctrl + ]
  • 裁剪尾随空格(去掉一行的末尾那些没用的空格) : ctrl + shift + x
  • 字体放大/缩小: ctrl + ( + 或 - )
  • 拆分编辑器 : ctrl + 1/2/3
  • 切换窗口 : ctrl + shift + left/right
  • 切换全屏 : F11
  • 切换到下一行 : ctrl+enter
  • 显示git : ctrl + shift + g
  • 全局查找文件： ctrl + shift + f
  • 显示相关插件的命令(如：git log)：ctrl + shift + p
  • 选中文字：shift + left / right / up / down
  • 折叠代码： ctrl + k + 0-9 (0是完全折叠)
  • 展开代码： ctrl + k + j (完全展开代码)
  • 快速切换主题：ctrl + k / ctrl + t
  • 快速回到顶部 ： ctrl + home
  • 快速回到底部 : ctrl + end
  • 格式化选定代码 ：ctrl +f
  • 全局替换： ctrl + shift + h
  • 当前文件替换： ctrl + h
  • 打开最近打开的文件夹： ctrl + r
  • 打开最近打开的文件： ctrl + E

# 二、VSCode的常见配置

# 常规配置

crtl+p，搜索settings.json，输入以下配置:

{
  "workbench.startupEditor": "none",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "javascript.updateImportsOnFileMove.enabled": "always",
  "gitlens.views.commitDetails.files.layout": "tree",
  "[vue]": {
    "editor.defaultFormatter": "octref.vetur"
  },
  "editor.fontSize": 16, // 设置编辑器字体大小为 16
  "editor.wordWrap": "on", // 开启自动换行
  "editor.formatOnSave": true, // 保存时自动格式化代码
  "files.autoSave": "afterDelay",
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  } // 启用延迟自动保存
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# VS Code 配置云同步

我们可以将配置云同步, 这样的话, 当我们换个电脑时, 即可将配置一键同步到本地, 就不需要重新安装插件了, 也不需要重新配置软件。

我们还可以把配置分享其他用户, 也可以把其他用户的配置给自己用

# 1、将自己本地的配置云同步到 GitHub

  1. 安装插件 settings-sync，现在已经自带了。

  2. 安装完插件后, 在插件里使用 GitHub 账号登录。

  3. 登录后在 vscode 的界面中, 可以选择一个别人的 gist；也可以忽略掉, 然后创建一个属于自己的 gist。

  4. 使用快捷键 「Command + Shift + P」, 在弹出的命令框中输入 sync, 并选择「更新/上传配置」, 这样就可以把最新的配置上传到 GitHub。

image-20210826150600732

# 2、从云端同步配置到本地

  • 当我们换另外一台电脑时, 可以先在 VS Code 中安装 settings-sync 插件。

  • 安装完插件后, 在插件里使用 GitHub 账号登录。

  • 登录之后, 插件的界面上, 会自动出现之前的同步记录

  • 如果你远程的配置没有成功同步到本地, 那可能是网络的问题, 此时, 可以使用快捷键 「Command + Shift + P」, 在弹出的命令框中输入 sync, 并选择「下载配置」, 多试几次

# 3、使用别人的配置

如果我们想使用别人的配置, 首先需要对方提供给你 gist。具体步骤如下：

  • 安装插件 settings-sync。

  • 使用快捷键 「Command + Shift + P」, 在弹出的命令框中输入 sync, 并选择「下载配置」

  • 在弹出的界面中, 选择「Download Public Gist」, 然后输入别人分享给你的 gist。注意, 这一步不需要登录 GitHub 账号。

  • Gist就是上面上传配置时出现的提示: image-20210826150823335

# 三、VSCode推荐插件

每个人所接触项目、所有技术不同, 用到的插件不同, 但总有几个插件基本是必备的, 以下就给出几个插件推荐

image-20210826152404108

# Ⅰ - 必备插件

此处给出基本上最常用也是本人最推荐的几个插件

# 1、GitLens

我强烈建议你安装插件GitLens, 它是 VS Code 中我最推荐的一个插件, 简直是 Git 神器, 码农必备。

GitLens 在 Git 管理上有很多强大的功能, 比如：

  • 将光标放置在代码的当前行, 可以看到这行代码的提交者是谁, 以及提交时间。这一点, 是 GitLens 最便捷的功能。

  • 查看某个 commit 的代码改动记录

  • 查看不同的分支

  • 可以将两个 commit 进行代码对比

  • 甚至可以将两个 branch 分支进行整体的代码对比。这一点, 简直是 GitLens 最强大的功能。当我们在不同分支 review 代码的时候, 就可以用到这一招。

# 2、Chinese (Simplified) Language Pack for Visual Studio Code

中文包, 让软件显示为简体中文语言, 没啥好说的吧

当初在学校时傻傻的觉得直接用英文用习惯了就行了,不然以后工作了别人没用中文包怎么给人调试?事实证明,出来都用的中文包,你的英文编辑器别人给你调试时反而不习惯🐶

# 3、Live Server

在本地启动一个服务器, 代码写完后可以实现「热更新」, 实时地在网页中看到运行效果。就不需要每次都得手动刷新页面了。

特别是写demo的时候很好用

使用方式：安装插件后, 开始写代码；代码写完后, 右键选择「Open with Live Server」

# 4、open in browser

安装open in browser插件后, 在 HTML 文件中「右键选择 --> Open in Default Browser」, 即可在浏览器中预览网页。

也是初学前端更容易用到的插件

# 5、Settings Sync

惊喜和意外永远不知道哪个先来, 可能突然之间你的电脑就不行了, 那么的VSCode如果进行了大量个性化配置, 那就简直是灾难了

我们可以将配置云同步, 这样的话, 当我们换个电脑时, 即可将配置一键同步到本地, 就不需要重新安装插件了, 也不需要重新配置软件。

我们还可以把配置分享其他用户, 也可以把其他用户的配置给自己用

详细步骤详见上方 : VS Code 配置云同步

# 6、javascript console utils：快速打印 log 日志

安装这个插件后, 当我们按住快捷键「Cmd + Shift + L」后, 即可自动出现日志 console.log()。简直是日志党福音。

当我们选中某个变量 name, 然后按住快捷键「Cmd + Shift + L」, 即可自动出现这个变量的日志 console.log(name)。

其他的同类插件还有：Turbo Console Log。

不过, 生产环境的代码, 还是尽量少打日志比较好, 避免出现一些异常。

编程有三等境界：

  • 第三等境界是打日志, 这是最简单、便捷的方式, 略显低级, 一般新手或资深程序员偷懒时会用。
  • 第二等境界是断点调试, 在前端、Java、PHP、iOS 开发时非常常用, 通过断点调试可以很直观地跟踪代码执行逻辑、调用栈、变量等, 是非常实用的技巧。
  • 第一等境界是测试驱动开发, 在写代码之前先写测试。与第二等的断点调试刚好相反, 大部分人不是很习惯这种方式, 但在国外开发者或者敏捷爱好者看来, 这是最高效的开发方式, 在保证代码质量、重构等方面非常有帮助, 是现代编程开发必不可少的一部分。

# 7、Git History

有些同学习惯使用编辑器中的 Git 管理工具, 而不太喜欢要打开另外一个 Git UI 工具的同学, 这一款插件满足你查询所有 Git 记录的需求。

# 8、Git Graph

同上 是另一款GUI插件

# 9、代码跳转

# 前端开发必装
# ① vscode-elm-jump

常规的代码跳转定义，按ctrl，和webstrom一样

# ② CSS Peek

和webstrom一样，按ctrl可以跳转css定义，按ctrl，和webstrom一样

# ③ vue-helper

让你在vue单文件里面的变量函数跳转定义

# Ⅱ - 推荐的插件

# 1、TODO Highlight

写代码过程中, 突然发现一个 Bug, 但是又不想停下来手中的活, 以免打断思路, 怎么办？按照代码规范, 我们一般是在代码中加个 TODO 注释。比如：（注意, 一定要写成大写TODO, 而不是小写的todo）

//TODO:标注此处有个BUG, 暂存
1

或者：

//FIXME:How are You?
1

安装了插件 TODO Highlight之后, 按住「Cmd + Shift + P」打开命令面板, 输入「Todohighlist」, 选择相关的命令, 我们就可以看到一个 todoList 的清单。

# 2、Search node_modules

node_modules模块里面的文件夹和模块实在是太多了, 根本不好找。好在安装 Search node_modules 这个插件后, 输入快捷键「Cmd + Shift + P」, 然后输入 node_modules, 在弹出的选项中选择 Search node_modules, 即可搜索 node_modules 里的模块。

# 3、Local History(慎用)

维护文件的本地历史记录, 可以安装。代码意外丢失时, 有时可以救命。 但是有弊端,他会在你的项目下面生成一个 [ .history ] 文件,当你进行项目提交时,如果没有配置好,这些也会提交上去,造成不必要的提交,可能你就修改一个文件,但是生成了几百个记录文件,别问我是怎么知道的😀

详情可以看下方 [Ⅳ - IDEA和VS code设置默认换行符为LF](#Ⅳ - IDEA和VS code设置默认换行符为LF)部分,你就知道为何我这么说了

# 4、Image Preview

图片预览。鼠标移动到图片 url 上的时候, 会自动显示图片的预览和图片尺寸。

# 5、kiwi-linter -->国际化处理

kiwi 的 VS Code插件工具, 主要用于检测代码中的中文, 高亮出中文字符串, 并一键提取中文字符串到对应的语言 Key 库。

同时优化开发体验, 在 VS Code 中提供搜索中文, 提示国际化值对应的中文功能。

image-20210802182512649

# 6、Vscode counter --> 项目代码统计

快速统计项目中代码行数以及分类,直接拓展商店搜索安装即可

# ① 快速统计代码行数

image-20210917181537839

# ② 显示结果

这里用本笔记文件为例:image-20210917181746314

# ③查看详情

image-20210917182053310

# 7、korofileheader

  1. 自动生成文件头部注释，自动更新最后编辑人、最后编辑时间等。
  2. 一键生成函数注释，支持函数参数自动提取并列到注释中。
  3. 支持添加佛祖保佑永无bug、神兽护体、甩葱少女等好玩有趣的图像注释
  4. 配置非常灵活方便，各种细节都能配置，可以量身打造适合你的注释。
  5. 支持所有主流语言, 配置文档非常详细，齐全。

image-20220505115940341

# Ⅲ - 针对 框架 或 技术 的插件

此部分是针对技术或者框架出的插件

# 1、Vetur

Vue 多功能集成插件, 包括：语法高亮, 智能提示, emmet, 错误提示, 格式化, 自动补全, debugger。VS Code 官方钦定 Vue 插件, Vue 开发者必备。

# 2、Simple React Snippets

与上方Vetur类似, React代码提示与补全, 只不过是React开发者用的

# 3、ES7 React/Redux/GraphQL/React-Native snippets

React/Redux/react-router 的语法智能提示。

# 4、minapp:小程序支持

小程序开发必备插件

# 5、JavaScript(ES6) code snippets

ES6 语法智能提示, 支持快速输入。

# 6、Class autocomplete for HTML

自动重命名配对的HTML/XML标签(必备)

# Ⅳ - 个性化插件

# 1、highlight-icemode：选中相同的代码时, 让高亮显示更加明显

VSCode 自带的高亮显示, 实在是不够显眼。用插件支持一下吧。

所用了这个插件之后, VS Code 自带的高亮就可以关掉了：

在用户设置里添加"editor.selectionHighlight": false即可。

参考链接：vscode 选中后相同内容高亮插件推荐 (opens new window)

# 2、vscode-icons

vscode-icons 会根据文件的后缀名来显示不同的图标, 让你更直观地知道每种文件是什么类型的。

# 3、Markdown 相关插件

# a) Markdown Shortcuts

vscode预览md文件插件

安装完毕, 重启VSCode, 然后打开.md文件。Ctrl + Shift + V, 即可预览。然后双击相应位置即可修改对应内容

# b) Markdown Preview Enhanced

预览 Markdown 样式。

# c) Markdown All in One

这个插件将帮助你更高效地在 Markdown 中编写文档。

# 4、Prettier

Prettier 是一个代码格式化工具, 只关注格式化, 但不具备校验功能。在一个多人协同开发的团队中, 统一的代码编写规范非常重要。一套规范可以让我们编写的代码达到一致的风格, 提高代码的可读性和统一性。自然维护性也会有所提高。

# 5、Beautify

代码格式化工具。

备注：相比之下, Prettier 是当前最流行的代码格式化工具, 比 Beautify 用得更多。

# 6、ESLint：代码格式校验

ESLint, 一个让初学者或者萌新牙痒痒的东西, 包括空格缩进大小写都会进行判定

日常开发中, 可以用 Prettier 做代码格式化, 然后用 eslint 做校验。

# 7、 Courier New

一款好看字体

# 8、indent-rainbow：突出显示代码缩进

indent-rainbow插件：突出显示代码缩进。

其实如果你装了ESLint, 就不太需要这个了, 因为缩进错误会报错🐶

效果如图:image-20210826161115975

# 9、 Code Spell Checker：单词拼写错误检查

这个拼写检查程序的目标是帮助捕获常见的单词拼写错误, 可以检测驼峰命名。从此告别 Chinglish.

# 10、 Polacode-2020：生成代码截图

可以把代码片段保存成美观的图片, 主题不同, 代码的配色方案也不同, 也也可以自定义设置图片的边框颜色、大小、阴影。

尤其是在我们做 PPT 分享时需要用到代码片段时, 或者需要在网络上优雅地分享代码片段时, 这一招很有用。

image-20210826162323103

上次更新: 2024-09-29 11:22:28

← idea热部署→

Copyright © 2020-2026 wuzhiyong