@@ -2,7 +2,7 @@
# # 前言
> 本文的最新内容 ， 更新于 * * 2019 - 11 - 08 * * 。 大家完全不用担心这篇文章会过时 ， 因为随着 VS Code 的版本更新和插件更新 ， 本文也会随之更新 。
> 本文的最新内容 ， 更新于 * * 2020 - 05 - 16 * * 。 大家完全不用担心这篇文章会过时 ， 因为随着 VS Code 的版本更新和插件更新 ， 本文也会随之更新 。
> 本文的最新内容 ， 也会在 [ 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)上同步更新，欢迎 star。
@@ -10,7 +10,7 @@ VS Code 本来是前端人员专用，但由于它实在是太好用了，于
写下这篇文章 ， 是顺势而为 。
# # # 一 、 VS Code 的介绍
# # 一 、 VS Code 的介绍
VS Code 的全称是 Visual Studio Code ， 是一款开源的 、 免费的 、 跨平台的 、 高性能的 、 轻量级的代码编辑器 。 它在性能 、 语言支持 、 开源社区方面 ， 都做的很不错 。
@@ -176,7 +176,7 @@ Mac用户按住快捷键 `Cmd+Shift+P` （
如果们需要修改一些设置项，可以通过「命令面板」来操作，效率会更高。这里列举一些。
### 字体 设置
### 设置字体大小
在命令面板输入“字体”，可以进行字体的设置，效果如下：
@@ -184,6 +184,7 @@ Mac用户按住快捷键 `Cmd+Shift+P` （
当然，你也可以在菜单栏，选择「首选项-设置-常用设置」，在这个设置项里修改字体大小。
### 快捷键设置
在命令面板输入“快捷键”，就可以进入快捷键的设置。
@@ -206,7 +207,7 @@ Mac用户按住快捷键 `Cmd+Shift+P` （
- ` code pathName / fileName ` 命令：通过 VS Code 软件打开指定目录/指定文件。
## 五、VS Code 的常见设 置项
## 五、VS Code 的常见配 置项
### 1、VS Code 设置为中文语言
@@ -255,11 +256,11 @@ VS Code 会在代码的右侧，默认显示缩略图。你可以在设置项里
` ` ` json
"workbench.colorCustomizations" : {
"editor.lineHighlightBackground" : "#00000090" ,
"editor.lineHighlightBorder" : "#0000000 0"
"editor.lineHighlightBorder" : "#ffffff3 0"
}
` ` `
上面两 行代码的意思是， （ ， ） ，
上方代码，第一 行代码的意思是： 不 透明度90%） ；第二行代码的意思是： 修改光标所在行的边框色。
### 7、改完代码后立即自动保存
@@ -303,7 +304,9 @@ VS Code 会根据你所打开的文件来决定该使用空格还是制表。也
### 10、新建文件后的默认文件类型
当我们按下快捷键「Cmd + N」新建文件时， 如果你想修改默认的文件类型，可以在设置项里搜索 ` files . defaultLanguage ` ，设置项如下：
当我们按下快捷键「Cmd + N」新建文件时，
如果你想修改默认的文件类型，可以在设置项里搜索 ` files . defaultLanguage ` ，设置项如下：
@@ -317,9 +320,10 @@ VS Code 会根据你所打开的文件来决定该使用空格还是制表。也
我建议这个设置项保持默认的打钩就好，不用修改。删除文件前的弹窗提示，也是为了安全考虑，万一手贱不小心删了呢？
## 六、VS Code 设置-高级进阶
> 接下来，我们来讲一些更高级的配置。
### 1、文件对比
### 12、文件对比
VS Code 默认支持**对比两个文件的内容**。选中两个文件，然后右键选择「将已选项进行比较」即可，效果如下：
@@ -329,13 +333,13 @@ VS Code自带的对比功能并不够强大，
### 2 、查找某个函数在哪些地方被调用了
### 13 、查找某个函数在哪些地方被调用了
比如我已经在 ` a . js ` 文件里调用了 ` foo ( ) ` 函数。那么，如果我想知道 ` foo ( ) ` 函数在其他文件中是否也被调用了，该怎么做呢？
做法如下：在 ` a . js ` 文件里，选中 ` foo ( ) ` 函数（或者将光标放置在 ` foo ( ) ` 函数上） ， ， ` foo ( ) ` 函数在哪些地方被调用了，比较实用。
### 3 、鼠标操作
### 14 、鼠标操作
- 在当前行的位置，鼠标三击，可以选中当前行。
@@ -343,19 +347,19 @@ VS Code自带的对比功能并不够强大，
- 在某个**行号**的位置，**上下移动鼠标，可以选中多行**。
### 4 、重构
### 15 、重构
重构分很多种，我们来举几个例子。
**1、 命名重构**：
**命名重构**：
当我们尝试去修改某个函数（ ） ， ， ， ， （ ）
**2、 方法重构**：
**方法重构**：
选中某一段代码，这个时候，代码的左侧会出现一个「灯泡图标」，点击这个图标，就可以把这段代码提取为一个单独的函数。
### 5 、在当前文件中搜索
### 16 、在当前文件中搜索
在上面的快捷键列表中，我们已经知道如下快捷键：
@@ -373,7 +377,7 @@ VS Code自带的对比功能并不够强大，
### 6 、全局搜索
### 17 、全局搜索
在上面的快捷键列表中，我们已经知道如下快捷键：
@@ -383,7 +387,7 @@ VS Code自带的对比功能并不够强大，
上图中，你可以点击红框部分，展开更多的配置项。
### 7 、Git版本管理
### 18 、Git版本管理
VS Code 自带了 Git 版本管理，如下图所示：
@@ -394,7 +398,7 @@ VS Code 自带了 Git 版本管理，如下图所示：
与此同时，我建议安装插件 ` GitLens ` ，它是 VS Code 中我最推荐的一个插件， ，
### 8 、将工作区放大/缩小
### 19 、将工作区放大/缩小
我们在上面的设置项里修改字体大小后，仅仅只是修改了代码的字体大小。
@@ -404,7 +408,7 @@ VS Code 自带了 Git 版本管理，如下图所示：
如果你想恢复默认的工作区大小，可以在命令面板输入 ` 重置缩放 ` （英文是 ` reset zoom ` ）
### 9 、创建多层子文件夹
### 20 、创建多层子文件夹
我们可以在新建文件夹的时候，如果直接输入 ` aa / bb / cc ` ，比如：
@@ -415,7 +419,7 @@ VS Code 自带了 Git 版本管理，如下图所示：
### 10、. vscode 文件夹的作用
### 21、 ` . `
如果你发现项目的根目录下有一个 ` . vscode ` 文件夹，说明这个文件夹代表的是当前项目的配置。
@@ -425,19 +429,23 @@ VS Code 自带了 Git 版本管理，如下图所示：
- ` sftp . json ` ：
### 11 、自带终端
### 22 、自带终端
我们可以按下「Ctrl + ` 」 打开 VS Code 自带的终端 。 我认为内置终端并没有那么好用 ， 我更建议你使用第三方的终端 * * item2 * * 。
# # # 1 2、 markdown语法支持
# # # 23 、 markdown
VS Code自带 markdown 语法高亮 ， 写完 md 文件之后 ， 你可以点击右上角的按钮进行预览 ， 如下图所示 ：
VS Code自带 markdown 语法高亮 。 也就是说 ， 如果你是用 markdown 格式写文章的话 ， 你完全可以用 VS Code 进行写作 。
写完 md 文件之后 ， 你可以点击右上角的按钮进行预览 ， 如下图所示 ：
! [ ] ( http : //img.smyhvae.com/20190418_1907.png)
我一般是安装 「 Markdown Preview Github Styling 」 插件 ， 以 GitHub 风格预览 Markdown 样式 。 样式十分简洁美观 。
你也可以在控制面板输入 ` Markdown: 打开预览 ` ， 直接全屏预览 markdown文件 。
# # # 13 、 Emmet in VS Code
# # # 24 、 Emmet in VS Code
` Emmet ` 可以极大的提高 html 和 css 的编写效率 ， 它提供了一种非常简练的语法规则 。
@@ -456,42 +464,57 @@ VS Code自带 markdown 语法高亮，写完 md 文件之后，你可以点击
VS Code 默认支持 Emmet 。 更多 Emmet 语法规则 ， 请自行查阅 。
# # 七 、 VS Code 插件推荐
# # # 25 、 修改字体 ， 使用 「 Fira Code 」 字体
VS Code 有一个很强大的功能就是支持插件扩展 。
这款字体很漂亮 ， 很适合用来写代码 ：
! [ ] ( http : //img.smyhvae.com/20191108_1553_2 .png)
! [ ] ( http : //img.smyhvae.com/20200516_1633 .png)
上图中 ， 点击红框部分 ， 即可在输入框里 ， 查找你想要的插件名 ， 然后进行 安装。
安装步骤如下 ：
我来列举几个常见的插件 ， 这些插件都很实用 。
（ 1 ） 进入 < https : //github.com/tonsky/FiraCode> 网站，
# # # GitLens 【 荐 】
（ 2 ） 打开 VS Code 的 「 设置 」 ， 搜索 ` font ` ， 修改相关配置为如下内容 ：
我强烈建议你安装插件 ` GitLens ` ， 它是 VS Code 中我最推荐的一个插件 ， 简直是Git神器 ， 码农必备 。 如果你不知道 ， 那真是out了 。
` ` ` json
"editor.fontFamily": "'Fira Code',Menlo, Monaco, 'Courier New', monospace", // 设置字体显示
"editor.fontLigatures": true,//控制是否启用字体连字， ， ，
` ` `
GitLens 在 Git 管理上有很多强大的功能 ， 比如 ：
上方的第二行配置 ， 取决于个人习惯 ， 我是直接设置为 ` "editor.fontLigatures": null ` ， 因为我不太习惯连字 。
- 将光标放置在代码的当前行 ， 可以看到这样代码的提交者是谁 ， 以及提交时间 。 这一点 ， 是 GitLens 最便捷的功能 。
# # # 26 、 代码格式化 ： Prettier
- 查看某个 commit 的代码改动记录
我们可以使用 ` Prettier ` 进行代码格式化 ， 会让代码的展示更加美观 。 步骤如下 ：
- 查看不同的分支
（ 1 ） 安装插件 ` Prettier ` 。
- 可以将两个 commit 进行代码对比
（ 2 ） 在项目的根路径下 ， 新建文件 ` .prettierrc ` ， 并在文件中添加如下内容 ：
- 甚至可以将两个 branch 分支进行整体的代码对比 。 这一点 ， 简直是 GitLens 最强大的功能 。 当我们在不同分支review代码的时候 ， 就可以用到这一招 。
` ` ` json
{
"printWidth": 150,
"tabWidth": 4,
"semi": true,
"singleQuote": true,
"trailingComma":"es5",
"tslintIntegration": true,
"insertSpaceBeforeFunctionParenthesis": false
}
# # # Bracket Pair Colorizer 2 ： 突出显示成对的括号 【 荐 】
` ` `
` Bracket Pair Colorizer 2 ` 插件 ： 以不同颜色显示成对的括号 ， 并用连线标注括号范围 。
上面的内容 ， 是我自己的配置 ， 你可以参考 。
另外 ， 还有个 ` Rainbow Brackets ` 插件 ， 也可以突出显示成对的括号 。
更多配置 ， 可以参考官方文档 ： < https : //prettier.io/docs/en/options.html>
# # # sftp ： 文件传输
# # # 文件传输 ： sftp
如果你需要将本地文件通过 ftp 的形式上传到局域网的服务器 ， 可以安装 ` sftp ` 这个插件 ， 很好用 。 在公司会经常用到 。
步骤如下 ：
（ 1 ） 安装插件 ` sftp ` 。
@@ -500,7 +523,7 @@ GitLens 在 Git 管理上有很多强大的功能，比如：
- ` host ` ： 服务器的IP地址
- ` username ` ： 工作站自己的 用户名
- ` username ` ： 用户名
- ` privateKeyPath ` ： 存放在本地的已配置好的用于登录工作站的密钥文件 （ 也可以是ppk文件 ）
@@ -544,16 +567,104 @@ GitLens 在 Git 管理上有很多强大的功能，比如：
我们还可以选择 「 右键 - > Diff with Remote 」 ， 就可以将本地的代码和 ftp 服务器上的代码做对比 。
# # # Project Manager
工作中 ， 我们经常会来回切换多个项目 ， 每次都要找到对应项目的目录再打开 ， 比较麻烦 。 Project Manager插件可以解决这样的烦恼 ， 它提供了专门的视图来展示你的项目 ， 我们可以把常用的项目保存在这里 ， 需要时一键切换 ， 十分方便 。
# # 七 、 VS Code 配置云同步
我们可以将配置云同步 ， 这样的话 ， 当我们换个电脑时 ， 即可将配置一键同步到本地 ， 就不需要重新安装插件了 ， 也不需要重新配置软件 。
我们还可以把配置分享其他用户 ， 也可以把其他用户的配置给自己用 。
* * 将自己本地的配置云同步到GitHub * * ：
（ 1 ） 安装插件 ` settings-sync ` 。
（ 2 ） 安装完插件后 ， 在插件里使用 GitHub 账号登录 。
（ 3 ） 登录后在 vscode 的界面中 ， 可以选择一个别人的 gist ； 也可以忽略掉 ， 然后创建一个属于自己的 gist 。
（ 4 ） 使用快捷键 「 Command + Shift + P 」 ， 在弹出的命令框中输入 sync ， 并选择 「 更新 / 上传配置 」 ， 这样就可以把最新的配置上传到 GitHub 。
* * 换另外一个电脑时 ， 从云端同步配置到本地 * * ：
（ 1 ） 当我们换另外一台电脑时 ， 可以先在 VS Code 中安装 ` settings-sync ` 插件 。
（ 2 ） 安装完插件后 ， 在插件里使用 GitHub 账号登录 。
（ 3 ） 登录之后 ， 插件的界面上 ， 会自动出现之前的同步记录 ：
! [ ] ( http : //img.smyhvae.com/20200521_1530.png)
上图中 ， 我们点击最新的那条记录 ， 就可将云端的最新配置同步到本地 ：
! [ ] ( http : //img.smyhvae.com/20200521_1550.png)
如果你远程的配置没有成功同步到本地 ， 那可能是网络的问题 ， 此时 ， 可以使用快捷键 「 Command + Shift + P 」 ， 在弹出的命令框中输入 sync ， 并选择 「 下载配置 」 ， 多试几次 。
# # 八 、 VS Code 插件推荐
VS Code 有一个很强大的功能就是支持插件扩展 。
! [ ] ( http : //img.smyhvae.com/20191108_1553_2.png)
上图中 ， 点击红框部分 ， 即可在输入框里 ， 查找你想要的插件名 ， 然后进行安装 。
我来列举几个常见的插件 ， 这些插件都很实用 。
顺序越靠前 ， 越实用 。
# # # GitLens 【 荐 】
我强烈建议你安装插件 ` GitLens ` ， 它是 VS Code 中我最推荐的一个插件 ， 简直是Git神器 ， 码农必备 。 如果你不知道 ， 那真是out了 。
GitLens 在 Git 管理上有很多强大的功能 ， 比如 ：
- 将光标放置在代码的当前行 ， 可以看到这样代码的提交者是谁 ， 以及提交时间 。 这一点 ， 是 GitLens 最便捷的功能 。
- 查看某个 commit 的代码改动记录
- 查看不同的分支
- 可以将两个 commit 进行代码对比
- 甚至可以将两个 branch 分支进行整体的代码对比 。 这一点 ， 简直是 GitLens 最强大的功能 。 当我们在不同分支review代码的时候 ， 就可以用到这一招 。
# # # Live Server 【 荐 】
在本地启动一个服务器 ， 代码写完后可以实现 「 热更新 」 ， 实时地在网页中看到运行效果 。 就不需要每次都得手动刷新页面了 。
使用方式 ： 安装插件后 ， 开始写代码 ； 代码写完后 ， 右键选择 「 Open with Live Server 」 。
# # # Chinese ( Simplified ) Language Pack for Visual Studio Code
让软件显示为简体中文语言 。
# # # Bracket Pair Colorizer 2 ： 突出显示成对的括号 【 荐 】
` Bracket Pair Colorizer 2 ` 插件 ： 以不同颜色显示成对的括号 ， 并用连线标注括号范围 。
另外 ， 还有个 ` Rainbow Brackets ` 插件 ， 也可以突出显示成对的括号 。
# # # sftp ： 文件传输 【 荐 】
如果你需要将本地文件通过 ftp 的形式上传到局域网的服务器 ， 可以安装 ` sftp ` 这个插件 ， 很好用 。 在公司会经常用到 。
详细配置已经在上面讲过 。
# # # open in browser
安装 ` open in browser ` 插件后 ， 在 HTML 文件中 「 右键选择 -- > Open in Default Browser 」 ， 即可在浏览器中预览网页 。
# # # highlight - icemode ： 选中相同的代码时 ， 让高亮显示更加明显 【 荐 】
VSCode自带的高亮显示 ， 实在是不够显眼 。 用插件支持一下吧 。
@@ -568,6 +679,12 @@ VSCode自带的高亮显示，
css 颜色管理 。
# # # Project Manager
工作中 ， 我们经常会来回切换多个项目 ， 每次都要找到对应项目的目录再打开 ， 比较麻烦 。 Project Manager插件可以解决这样的烦恼 ， 它提供了专门的视图来展示你的项目 ， 我们可以把常用的项目保存在这里 ， 需要时一键切换 ， 十分方便 。
# # # TODO Highlight
写代码过程中 ， 突然发现一个Bug ， 但是又不想停下来手中的活 ， 以免打断思路 ， 怎么办 ？ 按照代码规范 ， 我们一般是在代码中加个TODO注释 。 比如 ： （ 注意 ， 一定要写成大写 ` TODO ` ， 而不是小写的 ` todo ` ）
@@ -660,6 +777,11 @@ css颜色高亮显示。
- [ One Dark Pro ] ( https : //marketplace.visualstudio.com/items?itemName=zhuangtongfa.Material-theme)
- Monokai Pro
- Ayu
- [ Snazzy Plus ] ( https : //marketplace.visualstudio.com/items?itemName=akarlsten.vscode-snazzy-akarlsten)
- [ Dainty ] ( https : //marketplace.visualstudio.com/items?itemName=alexanderte.dainty-vscode)
qianguyihao