VScode的使用总结

一、前言

作为一个前端程序员，相信你肯定有自己非常喜欢和熟悉的代码编辑器，比如Webstorm、Sublime、HBuilder等。在公司的前端组，我们统一使用的是微软出品的VScode。所以为了以后更好地进行团队的写作，你要慢慢熟悉和适应这款优秀的代码编辑器。

为了让不熟悉VScode的你更快地适应这款编辑器，我根据自己的使用经验和体会，写下这篇文章，希望能帮助到你。

二、VScode的优势

其实我之前写代码的时候，一直是使用webstorm这款编辑器，感觉非常的舒适。但是在接触VScode之后，才发现这款轻量级的编辑器，也能给自己非一般的编程体验。那么接下来，就给简单介绍一下，我印象中VScode的优势。

1. 轻量级编辑器

VScode是一款轻量级的编辑器，安装包非常小，而且启动速度非常快。虽然这对实际的项目没什么大的帮助，但是可以在无形间提高我们的用户体验。

2. 丰富的插件系统

VScode有着非常丰富的插件系统，无论你是编辑HTML、CSS、JS、TS、Vue、React等前端代码，还是JAVA、Python等后端代码。我们都可以找到相对应的插件，让我们如虎添翼，更快速地完成项目。

3. 代码跟踪功能

我们是一个团队，项目中往往都是协作开发，绝大多数情况下要使用Git来管理我们的代码，这个时候VScode会跟踪我们的代码，非常明显地为我们标注：你更改了那些文件，文件中你修改可第几行的代码，让我们对自己编写的代码一目了然。

三、VScode的插件推荐

1. Chinese (Simplified) Language Pack for Visual Studio Code

这是一款汉化VScode的插件，如果你的英文不是很好，不习惯英文的编程环境，那么你就可以安装这款插件。需要提醒一下，插件安装好之后，他会提示你是否更改自己的语言，你要选择是，如果没有成功，可以查看后面的具体汉化教程。

2. TSLint

代码检查插件，让我们的代码更加的规范和正确。

3. Vetur

Vue工具插件，可以让Vue代码高亮显示、进行Vue代码检查、提示Vue代码、格式化代码等。

4.Vue 2 Snippets

Vue扩展插件，如果你要进行编写Vue代码，进行安装就行了。

5.Vue Snippets(vue-ls)

Vue扩展插件，如果你要进行编写Vue代码，进行安装就行了。

6.TypeScript Importer

TS代码导入器，帮助我们更好地写TS代码

7.Beautify

代码美化工具，也就是对我们的代码进行格式化。

四、VScode汉化设置

前面说到过汉化插件，但是可能会存在安装插件之后，汉化不成功的现象。所以这里给出一些具体的步骤。

第一步：修改VScode的配置文件

点击左下角的锯齿按钮，选择第一个选项

在弹出的命令面板中输入"language"，找到下图中的选项，回车点击进入

将locale的值改为"zh-CN"，即中文简体。然后保存，关闭这个文件

第二步：安装之前讲过的那个中文汉化插件

第三步：重启VScode，即可汉化成功

注意，在MAC系统下，重启不是点击软件左上方的"x"，然后再打开软件。而是要双击屏幕下方的VScode图标，选择退出，然后再打开VScode。

五、设置VScode的快捷键

每个人的操作习惯不同，使用的快捷键也不同，在VScode中，我们可以根据自己的习惯来设置自己的快捷键。设置非常简单，首先是打开快捷键设置面板：点击左下方的锯齿图标，选择"键盘快捷方式"即可打开。

打开之后，我们便可以搜索要设置快捷键的功能，比如我要给 切换行注释 这个功能添加快捷键。那么可以搜索"注释"，找到并双击这个功能选项，进行输入快捷键，最后点击回车确认即可。

六、备注

以上便是我使用VScode的心得和经验，希望能够帮到你，如果你有更好用的设置，欢迎大家及时补充！