webcourse/Web
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

update:VS Code使用教程

Browse Source
This commit is contained in:
qianguyihao 2019-04-18 21:19:15 +08:00
parent eaf0fb4004
commit d3e66b3ef6
1 changed files with 12 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
00-前端工具/01-VS Code的使用.md
View File

@ -1,7 +1,7 @@
## 前言 ## 前言
> 本文首发于博客园。最新内容将在[GitHub](https://github.com/qianguyihao/Web)上实时更新。欢迎在GitHub上关注我，一起入门和进阶前端。 > 本文首发于[博客园](https://www.cnblogs.com/qianguyihao/p/10732375.html)。最新内容将在[GitHub](https://github.com/qianguyihao/Web/blob/master/00-%E5%89%8D%E7%AB%AF%E5%B7%A5%E5%85%B7/01-VS%20Code%E7%9A%84%E4%BD%BF%E7%94%A8.md)上实时更新。
VS Code 本来是前端人员专用，但由于它实在是太好用了，于是，各种开发方向的码农也正在用 VS Code 作为他们的主力编程工具。甚至是一些写作的同学，也把 VS Code 作为 markdown 写作工具。 VS Code 本来是前端人员专用，但由于它实在是太好用了，于是，各种开发方向的码农也正在用 VS Code 作为他们的主力编程工具。甚至是一些写作的同学，也把 VS Code 作为 markdown 写作工具。
@ -59,6 +59,8 @@ VS Code 的安装很简单，直接去官网下载安装包，然后双击安装
VS Code用得熟不熟，首先就看你是否会用快捷键。以下列出的内容，都是常用快捷键，而加粗部分的快捷键，使用频率则非常高。 VS Code用得熟不熟，首先就看你是否会用快捷键。以下列出的内容，都是常用快捷键，而加粗部分的快捷键，使用频率则非常高。
掌握10%的内容，足矣应对90%的工作。熟练使用它们，你就已经很牛了。
### 移动光标 ### 移动光标
| Mac快捷键 | Win快捷键 | 作用 | 备注 | | Mac快捷键 | Win快捷键 | 作用 | 备注 |
@ -163,7 +165,7 @@ VS Code用得熟不熟，首先就看你是否会用快捷键。以下列出的
上图中，将红框部分打钩即可。 上图中，将红框部分打钩即可。
设置成功后，我们就可以查看到当前文件的「层级结构」，非常方便。 设置成功后，我们就可以查看到当前文件的「层级结构」，非常方便。如下图所示：
![](http://img.smyhvae.com/20190415_2009.png) ![](http://img.smyhvae.com/20190415_2009.png)
@ -173,6 +175,8 @@ VS Code 默认显示代码的行号。你可以在设置项里搜索 `editor.lin
![](http://img.smyhvae.com/20190417_2140.png) ![](http://img.smyhvae.com/20190417_2140.png)
我建议保留这个设置项，无需修改。
### 右侧是否显示代码的缩略图 ### 右侧是否显示代码的缩略图
VS Code 会在代码的右侧，默认显示缩略图。你可以在设置项里搜索 `editor.minimap`进行设置，配置项如下： VS Code 会在代码的右侧，默认显示缩略图。你可以在设置项里搜索 `editor.minimap`进行设置，配置项如下：
@ -203,7 +207,7 @@ VS Code 会根据你所打开的文件来决定该使用空格还是制表。也
![](http://img.smyhvae.com/20190417_2209.png) ![](http://img.smyhvae.com/20190417_2209.png)
### 改完代码后立即保存 ### 改完代码后立即自动保存
改完代码后，默认不会自动保存。你可以在设置项里搜索`files.autoSave`，修改配置项如下： 改完代码后，默认不会自动保存。你可以在设置项里搜索`files.autoSave`，修改配置项如下：
@ -317,6 +321,8 @@ VS Code自带的对比功能并不够强大，我们可以安装插件`compareit
![](http://img.smyhvae.com/20190415_2116.png) ![](http://img.smyhvae.com/20190415_2116.png)
正常情况下，我建议这个设置项不用勾选。
### 全局搜索 ### 全局搜索
在上面的快捷键列表中，我们已经知道如下快捷键： 在上面的快捷键列表中，我们已经知道如下快捷键：
@ -372,7 +378,7 @@ VS Code 自带了 Git 版本管理，如下图所示：
### 自带终端 ### 自带终端
我们可以按下「Ctrl + `」打开 VS Code 自带的终端。我认为内置终端并没有那么好用，我更建议你使用第三方的终端 **item2**， 我们可以按下「Ctrl + `」打开 VS Code 自带的终端。我认为内置终端并没有那么好用，我更建议你使用第三方的终端 **item2**。
### markdown语法支持 ### markdown语法支持
@ -530,7 +536,7 @@ GitLens 在 Git 管理上有很多强大的功能，比如：
- 地址：<https://github.com/shanalikhan/code-settings-sync> - 地址：<https://github.com/shanalikhan/code-settings-sync>
- 作用：多台设备之间，同步 VS Code 配置。[荐] - 作用：多台设备之间，同步 VS Code 配置。
### vscode-pigments ### vscode-pigments
@ -546,5 +552,5 @@ css颜色高亮显示。
如果你有什么推荐的 VS Code 插件，欢迎留言。 如果你有什么推荐的 VS Code 插件，欢迎留言。
同时，你也可以关注我在 GitHub 上的[前端入门](https://github.com/qianguyihao/Web)项目，超级详细和真诚。 同时，你也可以关注我在 GitHub 上的 [前端入门项目](https://github.com/qianguyihao/Web)，超级详细和真诚。