VSCode的好用的插件

上篇博文我们介绍了VSCode的安装与基本使用
VSCode的安装与基本使用
这篇博文我们来介绍一波VSCode中精美好用的插件

插件扩展 / 插件推荐

VS Code 有一个很强大的功能就是支持插件扩展。

上图中，点击红框部分，即可在输入框里，查找你想要的插件名，然后进行安装。

我来列举几个常见的插件，这些插件都很实用。

GitLens

我强烈建议你安装插件GitLens，它是 VS Code 中我最推荐的一个插件，简直是Git神器，码农必备。如果你不知道，那真是out了。

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

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

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

• 查看不同的分支

• 可以将两个 commit 进行代码对比，甚至可以将两个 branch 分支进行整体的代码对比。这一点，简直是 GitLens 最强大的功能。

Bracket Pair Colorizer 2：突出显示成对的括号【荐】

Bracket Pair Colorizer 2插件：以不同颜色显示括号并用连线标注括号范围。

Rainbow Brackets：

Rainbow Brackets插件：突出显示成对的括号。

indent-rainbow：突出显示缩进

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

安装完成后，效果如下图所示：

Project Manager

工作中，我们经常会来回切换多个项目，每次都要找到对应项目的目录再打开，比较麻烦。Project Manager插件可以解决这样的烦恼，它提供了专门的视图来展示你的项目，我们可以把常用的项目保存在这里，需要时一键切换，十分方便。

RemoteHub

不要惊讶，RemoteHub 和 GitLens 是同一个作者开发出来的。

RemoteHub插件的作用是：可以在本地查看 GitHub 网站上的代码，而不需要将代码下载到本地。

TODO Highlight

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

//TODO:这里有个bug，我一会儿再收拾你

或者

//FIXME:我也不知道为啥， but it works only that way.

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

sftp：文件传输

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

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

• host：服务器的IP地址

• username：工作站自己的用户名

• privateKeyPath：存放在本地的已配置好的用于登录工作站的**文件（也可以是ppk文件）

• remotePath：工作站上与本地工程同步的文件夹路径，需要和本地工程文件根目录同名，且在使用sftp上传文件之前，要手动在工作站上mkdir生成这个根目录

• ignore：指定在使用sftp: sync to remote的时候忽略的文件及文件夹，注意每一行后面有逗号，最后一行没有逗号

举例如****意，其中的注释需要去掉)

{
    "host": "",     //服务器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": [             //忽略项
        "**/.vscode/**",
        "**/.git/**",
        "**/.DS_Store"
    ]
}

highlight-icemode：选中相同的代码时，让高亮显示更加明显【荐】

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

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

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

颜色主题推荐： SynthWave '84

SynthWave '84 这个主题很酷。

Live Share：实时编码分享

Live Share这个神奇的插件是由微软官方出品，它的作用是：实时编码分享。也就是说，它可以实现你和你的同伴一起写代码。这绝对就是结对编程的神器啊。

安装方式：

打开插件管理，搜索“live share”，安装。安装后重启 VS Code，在左侧会多出一个按钮：

上图中，点击红框部分，登录后就可以分享你的工作空间了。

open in browser

在浏览器中打开。

Vue 相关的插件

vetur：vue 文件的基本语法高亮

安装完 vetur 后还需要加上这样一段配置下：

“emmet.syntaxProfiles”: {
“vue-html”: “html”,
“vue”: “html”
}