相关文章推荐
小百科  ›  第一次使用VS Code时你应该知道的一切配置 -
热情的黑框眼镜
1 年前
首发于 从零开始学前端
第一次使用VS Code时你应该知道的一切配置

第一次使用VS Code时你应该知道的一切配置

前言

文章标题：《第一次使用 VS Code 时你应该知道的一切配置》。本文的最新内容，更新于 2020-06-19。大家完全不用担心这篇文章会过时，因为随着 VS Code 的版本更新和插件更新，本文也会随之更新。

本文的最新内容，也会在 GitHub 上同步更新，欢迎 star。

VS Code 软件实在是太酷、太好用了，越来越多的新生代互联网青年正在使用它。

前端男神 尤雨溪 大大这样评价 VS Code：



有一点你可能会感到惊讶：VS Code 这款软件本身，是用 JavaScript 语言编写的（具体请自行查阅基于 JS 的 PC 客户端开发框架 Electron ）。Jeff Atwood 在 2007 年提出了著名的 Atwood 定律：

任何能够用 JavaScript 实现的应用系统，最终都必将用 JavaScript 实现 。

Jeff Atwood 这个人是谁不重要（他是 Stack Overflow 网站的联合创始人），重要的是这条定律。

前端目前是处在春秋战国时代，各路英雄豪杰成为后浪，各种框架工具层出不穷，VS Code 软件无疑是大前端时代最骄傲的工具。

如果你是做前端开发（JavaScript 编程语言为主），则完全可以将 VS Code 作为「 主力开发工具 」。这款软件是为前端同学量身定制的。

如果你是做其他语言方向的开发，并且不需要太复杂的集成开发环境，那么，你可以把 VS Code 作为「 代码编辑器 」来使用，纵享丝滑。

甚至是一些写文档、写作的同学，也经常把 VS Code 作为 markdown 写作工具 ，毫无违和感。

退而求其次，即便你不属于以上任何范畴，你还可以把 VS Code 当作最简单的 文本编辑器 来使用，完胜 Windows 系统自带的记事本。

写下这篇文章，是顺势而为。

一、VS Code 的介绍

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

微软有两种软件：一种是 VS Code，一种是其他软件。

IDE 与 编辑器的对比

IDE 和编辑器是有区别的：

  • IDE （Integrated Development Environment，集成开发环境）：对代码有较好的智能提示和相互跳转，同时侧重于工程项目，对项目的开发、调试工作有较好的图像化界面的支持，因此比较笨重。比如 Eclipse 的定位就是 IDE。
  • 编辑器 ：要相对轻量许多，侧重于文本的编辑。比如 Sublime Text 的定位就是编辑器。再比如 Windows 系统自带的「记事本」就是最简单的编辑器。

需要注意的是，VS Code 的定位是 编辑器 ，而非 IDE ，但 VS Code 又比一般的编辑器的功能要丰富许多。可以这样理解：VS Code 的体量是介于编辑器和 IDE 之间。

VS Code 的特点

  • VS Code 的使命，是让开发者在编辑器里拥有 IDE 那样的开发体验，比如代码的智能提示、语法检查、图形化的调试工具、插件扩展、版本管理等。
  • 跨平台支持 MacOS、Windows 和 Linux 等多个平台。
  • VS Code 的源代码以 MIT 协议开源。
  • 支持第三方插件，功能强大，生态系统完善。
  • VS Code 自带了 JavaScript、TypeScript 和 Node.js 的支持。也就是说，你在书写 JS 和 TS 时，是自带智能提示的。当然，其他的语言，你可以安装相应的 扩展包 插件，也会有智能提示。

前端利器之争： VS Code 与 WebStorm

前端小白最喜欢问的一个问题是：哪个编辑器/IDE 好用？是 VS Code 还是 WebStorm （WebStorm 其实是 IntelliJ IDEA 的定制版）？我来做个对比：

  • 哪个更酷 ：显然 VS Code 更酷。
  • 内存占用情况 ：根据我的观察，VS Code 是很占内存的（尤其是当你打开多个窗口的时候），但如果你的内存条够用，使用起来是不会有任何卡顿的感觉的。相比之下，IntelliJ IDEA 不仅非常占内存，而且还非常卡顿。如果你想换个既轻量级、又不占内存的编辑器，最好还是使用「Sublime Text」编辑器。
  • 使用比例 ：当然是 VS Code 更胜一筹。先不说别的，我就拿数据说话，我目前所在的研发团队有 200 人左右（120个后台、80个前端），他们绝大部分人都在用 VS Code 编码，妥妥的。

所以，如果你以后还问这个问题，那就真有些掉底了。

VS Code 的安装

VS Code 的安装很简单，直接去官网下载安装包，然后双击安装即可。



上图中，直接点击 download，一键下载安装即可。

二、崭露锋芒：VS Code 快捷键

VS Code 用得熟不熟，首先就看你是否会用快捷键。以下列出的内容，都是常用快捷键，而加粗部分的快捷键，使用频率则非常高。

任何工具，掌握 20%的技能，足矣应对 80% 的工作。既然如此，你可能会问：那就只保留 20% 的特性，不久可以满足 80%的用户了吗？

但我想说的是： 那从来都不是同样的 20% ，每个人都会用到不同的功能。

掌握下面这些高频核心快捷键，你和你的工具，足矣露出锋芒。

1、工作区快捷键

2、跳转操作

3、移动光标

4、编辑操作

5、多光标编辑

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

  • 选中某个文本，然后反复按住快捷键「 Cmd + D 」键（windows 用户是按住「 Ctrl + D 」键）， 即可将全文中相同的词逐一加入选择。
  • 选中一堆文本后，按住「 Option + Shift + i 」键（windows 用户是按住「 Alt + Shift + I 」键），既可在 每一行的末尾 都创建一个光标。

6、删除操作

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

7、编程语言相关

8、搜索相关

9、自定义快捷键

按住快捷键「Cmd + Shift + P」，弹出命令面板，在命令面板中输入“快捷键”，可以进入快捷键的设置。

当然，你也可以选择菜单栏「偏好设置 --> 键盘快捷方式」，进入快捷键的设置：



10、快捷键列表

你可以点击 VS Code 左下角的齿轮按钮，效果如下：



上图中，在展开的菜单中选择「键盘快捷方式」，就可以查看和修改所有的快捷键列表了：



快捷键参考链接

三、命令面板的使用

Mac 用户按住快捷键 Cmd+Shift+P （Windows 用户按住快捷键 Ctrl+Shift+P ），可以打开命令面板。效果如下：



如果们需要修改一些设置项，可以通过「命令面板」来操作，效率会更高。这里列举一些。

1、设置字体大小

在命令面板输入“字体”，可以进行字体的设置，效果如下：



当然，你也可以在菜单栏，选择「首选项-设置-常用设置」，在这个设置项里修改字体大小。

2、快捷键设置

在命令面板输入“快捷键”，就可以进入快捷键的设置。

3、大小写转换

选中文本后，在命令面板中输入 transfrom ，就可以修改文本的大小写了。



4、使用命令行启动 VS Code

（1）输入快捷键「Cmd + Shift + P 」，选择 install code command ：



（2）使用命令行：

  • code 命令：启动 VS Code 软件
  • code pathName/fileName 命令：通过 VS Code 软件打开指定目录/指定文件。

四、私人订制：VS Code 的常见配置

1、VS Code 设置为中文语言

Mac 用户按住快捷键 Cmd+Shift+P （Windows 用户按住快捷键 Ctrl+Shift+P ），打开命令面板。

在命令面板中，输入 Configure Display Language ，选择 Install additional languages ，然后安装插件 Chinese (Simplified) Language Pack for Visual Studio Code 即可。

或者，我们可以直接安装插件 Chinese (Simplified) Language Pack for Visual Studio Code ，是一样的。

安装完成后，重启 VS Code。

2、面包屑（Breadcrumb）

打开 VS Code 的设置项，选择「用户设置 -> 工作台 -> 导航路径」，如下图所示：



上图中，将红框部分打钩即可。

设置成功后，我们就可以查看到当前文件的「层级结构」，非常方便。如下图所示：



有了这个面包屑导航，我们可以在任意目录、任意文件之间随意跳转。

3、左右显示多个编辑器窗口（抄代码利器）

Mac 用户按住快捷键 Cmd + \ ， Windows 用户按住快捷键 Ctrl + \ ，即可同时打开多个编辑器窗口，效果如下：



按快捷键「Cmd + 1 」切换到左边的窗口，按快捷键「Cmd + 2 」切换到右边的窗口。随时随地，想切就切。

学会了这一招，以后抄代码的时候，leader 再也不用担心我抄得慢了，一天工资到手。

4、是否显示代码的行号

VS Code 默认显示代码的行号。你可以在设置项里搜索 editor.lineNumbers 修改设置，配置项如下：



我建议保留这个设置项，无需修改。

5、右侧是否显示代码的缩略图

VS Code 会在代码的右侧，默认显示缩略图。你可以在设置项里搜索 editor.minimap 进行设置，配置项如下：



6、将当前行代码高亮显示（更改光标所在行的背景色）

当我们把光标放在某一行时，这一行的背景色并没有发生变化。如果想 高亮显示 当前行的代码，需要设置两步：

（1）在设置项里搜索 editor.renderLineHighlight ，将选项值设置为 all 或者 line 。

（2）在设置项里增加如下内容： 

"workbench.colorCustomizations": {
    "editor.lineHighlightBackground": "#00000090",
    "editor.lineHighlightBorder": "#ffffff30"
}

上方代码，第一行代码的意思是：修改光标所在行的背景色（背景色设置为全黑，不透明度 90%）；第二行代码的意思是：修改光标所在行的边框色。

7、改完代码后立即自动保存

方式一 ：

改完代码后，默认不会自动保存。你可以在设置项里搜索 files.autoSave ，修改配置项如下：



上图中，我们将配置项修改为 onFocusChange 之后，那么，当光标离开该文件后，这个文件就会自动保存了。 非常方便 。

方式二 ：

当然，你也可以直接在菜单栏选择「文件-自动保存」。勾选后，当你写完代码后，文件会立即实时保存。

8、保存代码后，是否立即格式化

保存代码后，默认 不会立即 进行代码的格式化。你可以在设置项里搜索 editor.formatOnSave 查看该配置项：



我觉得这个配置项保持默认就好，不用打钩。

9、空格 or 制表符

VS Code 会根据你所打开的文件来决定该使用空格还是制表。也就是说，如果你的项目中使用的都是制表符，那么，当你在写新的代码时，按下 tab 键后，编辑器就会识别成制表符。

常见的设置项如下：

  • editor.detectIndentation ：自动检测（默认开启）。截图如下：



  • editor.insertSpaces ：按 Tab 键时插入空格（默认）。截图如下：



  • editor.tabSize ：一个制表符默认等于四个空格。截图如下：



10、新建文件后的默认文件类型

当我们按下快捷键「Cmd + N」新建文件时，VS Code 默认无法识别这个文件到底是什么类型的，因此也就无法识别相应的语法高亮。

如果你想修改默认的文件类型，可以在设置项里搜索 files.defaultLanguage ，设置项如下：



上图中的红框部分，填入你期望的默认文件类型。我填的是 html 类型，你也可以填写成 javascript 或者 markdown ，或者其他的语言类型。

11、删除文件时，是否弹出确认框

当我们在 VS Code 中删除文件时，默认会弹出确认框。如果你想修改设置，可以在设置项里搜索 xplorer.confirmDelete 。截图如下：



我建议这个设置项保持默认的打钩就好，不用修改。删除文件前的弹窗提示，也是为了安全考虑，万一手贱不小心删了呢？

接下来，我们来讲一些更高级的配置。

12、文件对比

VS Code 默认支持 对比两个文件的内容 。选中两个文件，然后右键选择「将已选项进行比较」即可，效果如下：



VS Code 自带的对比功能并不够强大，我们可以安装插件 compareit ，进行更丰富的对比。比如说，安装完插件 compareit 之后，我们可以将「当前文件」与「剪切板」里的内容进行对比：



13、查找某个函数在哪些地方被调用了

比如我已经在 a.js 文件里调用了 foo() 函数。那么，如果我想知道 foo() 函数在其他文件中是否也被调用了，该怎么做呢？

做法如下：在 a.js 文件里，选中 foo() 函数（或者将光标放置在 foo() 函数上），然后按住快捷键「Shift + F12」，就能看到 foo() 函数在哪些地方被调用了，比较实用。

14、鼠标操作

  • 在当前行的位置，鼠标三击，可以选中当前行。
  • 用鼠标单击文件的 行号 ，可以选中当前行。
  • 在某个 行号 的位置， 上下移动鼠标，可以选中多行 。

15、重构

重构分很多种，我们来举几个例子。

命名重构 ：

当我们尝试去修改某个函数（或者变量名）时，我们可以把光标放在上面，然后按下「F2」键，那么，这个函数（或者变量名）出现的地方都会被修改。

方法重构 ：

选中某一段代码，这个时候，代码的左侧会出现一个「灯泡图标」，点击这个图标，就可以把这段代码提取为一个单独的函数。

16、在当前文件中搜索

在上面的快捷键列表中，我们已经知道如下快捷键：

  • Cmd + F（Win 用户是 Ctrl + F）：在当前文件中搜索，光标在搜索框里
  • Cmd + G（Win 用户是 F3）：在当前文件中搜索，光标仍停留在编辑器里

另外，你可能会注意到，搜索框里有很多按钮，每个按钮都对应着不同的功能，如下图所示：



上图中，你可以通过「Tab」键和「Shift + Tab」键在输入框和替换框之间进行切换。

「在选定内容中查找」这个功能还是比较实用的。你也可以在设置项里搜索 editor.find.autoFindInSelection ，勾选该设置项后，那么，当你选中指定内容后，然后按住「Cmd + F」，就可以 自动 只在这些内容里进行查找。该设置项如下图所示：



17、全局搜索

在上面的快捷键列表中，我们已经知道如下快捷键：

  • Cmd + Shift + F（Win 用户是 Ctrl + Shift +F）：在全局的文件夹中进行搜索。效果如下：



上图中，你可以点击红框部分，展开更多的配置项。

18、Git 版本管理

VS Code 自带了 Git 版本管理，如下图所示：



上图中，我们可以在这里进行常见的 git 命令操作。如果你还不熟悉 Git 版本管理 ，可以先去补补课。

与此同时，我建议安装插件 GitLens ，它是 VS Code 中我最推荐的一个插件，简直是 Git 神器，码农必备。

19、将工作区放大/缩小

我们在上面的设置项里修改字体大小后，仅仅只是修改了代码的字体大小。

如果你想要缩放整个工作区（包括代码的字体、左侧导航栏的字体等），可以按下快捷键「 cmd +/- 」。windows 用户是按下「ctrl +/-」

当我们在投影仪上给别人演示代码的时候，这一招十分管用 。

如果你想恢复默认的工作区大小，可以在命令面板输入 重置缩放 （英文是 reset zoom ）

20、创建多层子文件夹

我们可以在新建文件夹的时候，如果直接输入 aa/bb/cc ，比如：



那么，就可以创建多层子文件夹，效果如下：



21、 .vscode 文件夹的作用

为了统一团队的 vscode 配置，我们可以在项目的根目录下建立 .vscode 目录，在里面放置一些配置内容，比如：

  • settings.json ：工作空间设置、代码格式化配置、插件配置。
  • sftp.json ：ftp 文件传输的配置。

.vscode 目录里的配置只针对当前项目范围内生效。将 .vscode 提交到代码仓库，大家统一配置时，会非常方便。

22、自带终端

我们可以按下「Ctrl + `」打开 VS Code 自带的终端。我认为内置终端并没有那么好用，我更建议你使用第三方的终端 item2 。

23、markdown 语法支持

VS Code 自带 markdown 语法高亮。也就是说，如果你是用 markdown 格式写文章，则完全可以用 VS Code 进行写作。

写完 md 文件之后，你可以点击右上角的按钮进行预览，如下图所示：



我一般是安装「Markdown Preview Github Styling」插件，以 GitHub 风格预览 Markdown 样式。样式十分简洁美观。

你也可以在控制面板输入 Markdown: 打开预览 ，直接全屏预览 markdown 文件。

24、Emmet in VS Code

Emmet 可以极大的提高 html 和 css 的编写效率，它提供了一种非常简练的语法规则。

举个例子，我们在编辑器中输入缩写代码： ul>li*6 ，然后按下 Tab 键，即可得到如下代码片段： 

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

VS Code 默认支持 Emmet。更多 Emmet 语法规则，请自行查阅。

25、修改字体，使用「Fira Code」字体

这款字体很漂亮，很适合用来写代码：



安装步骤如下：

（1）进入 github.com/tonsky/FiraC 网站，下载并安装「Fira Code」字体。

（2）打开 VS Code 的「设置」，搜索 font ，修改相关配置为如下内容： 

"editor.fontFamily": "'Fira Code',Menlo, Monaco, 'Courier New', monospace", // 设置字体显示
"editor.fontLigatures": false,//控制是否启用字体连字，true启用，false不启用

上方的第二行配置，取决于个人习惯，我是直接设置为 "editor.fontLigatures": null ，因为我不太习惯连字。

26、代码格式化：Prettier

我们可以使用 Prettier 进行代码格式化，会让代码的展示更加美观。步骤如下：

（1）安装插件 Prettier 。

（2）在项目的根路径下，新建文件 .prettierrc ，并在文件中添加如下内容： 

{
  "printWidth": 150,
  "tabWidth": 4,
  "semi": true,
  "singleQuote": true,
  "trailingComma": "es5",
  "tslintIntegration": true,
  "insertSpaceBeforeFunctionParenthesis": false
}

上面的内容，是我自己的配置，你可以参考。

更多配置，可以参考官方文档： prettier.io/docs/en/opt

27、文件传输：sftp

如果你需要将本地文件通过 ftp 的形式上传到局域网的服务器，可以安装 sftp 这个插件，很好用。在公司会经常用到。

步骤如下：

（1）安装插件 sftp 。

（2）配置 sftp.json 文件。 插件安装完成后，输入快捷键「cmd+shift+P」弹出命令面板，然后输入 sftp:config ，回车，当前工程的 .vscode 文件夹下就会自动生成一个 sftp.json 文件，我们需要在这个文件里配置的内容可以是：

  • host ：服务器的 IP 地址
  • username ：用户名
  • privateKeyPath ：存放在本地的已配置好的用于登录工作站的密钥文件（也可以是 ppk 文件）
  • remotePath ：工作站上与本地工程同步的文件夹路径，需要和本地工程文件根目录同名，且在使用 sftp 上传文件之前，要手动在工作站上 mkdir 生成这个根目录
  • ignore ：指定在使用 sftp: sync to remote 的时候忽略的文件及文件夹，注意每一行后面有逗号，最后一行没有逗号

举例如下：(注意，其中的注释需要去掉) 

{
  "host": "192.168.xxx.xxx", //服务器ip
  "port": 22, //端口，sftp模式是22
  "username": "", //用户名
  "password": "", //密码
  "protocol": "sftp", //模式
  "agent": null,
  "privateKeyPath": null,
  "passphrase": null,
  "passive": false,
  "interactiveAuth": false,
  "remotePath": "/root/node/build/", //服务器上的文件地址
  "context": "./server/build", //本地的文件地址
  "uploadOnSave": true, //监听保存并上传
  "syncMode": "update",
  "watcher": {
    //监听外部文件
    "files": false, //外部文件的绝对路径
    "autoUpload": false,
    "autoDelete": false
  "ignore": [
 
推荐文章
今天看啥   ·   Py中国   ·   codingpro   ·   藏经阁   ·   小百科   ·   link之家   ·   卧龙AI搜索
删除内容请联系邮箱 2879853325@qq.com
小百科 - 百科知识指南
© 2024 ~ 沪ICP备11025650号