VSCode软件实在是太酷、太好用了，越来越多的新生代互联网青年正在使用它。
前端男神尤雨溪大大这样评价VSCode：
有一点你可能会感到惊讶：VSCode这款软件本身，是用JavaScript语言编写的（具体请自行查阅基于JS的PC客户端开发框架Electron）。JeffAtwood在2007年提出了著名的Atwood定律：
任何能够用JavaScript实现的应用系统，最终都必将用JavaScript实现。
JeffAtwood这个人是谁不重要（他是StackOverflow网站的联合创始人），重要的是这条定律。
前端目前是处在春秋战国时代，各路英雄豪杰成为后浪，各种框架工具层出不穷，VSCode软件无疑是大前端时代最骄傲的工具。
如果你是做前端开发（JavaScript编程语言为主），则完全可以将VSCode作为「主力开发工具」。这款软件是为前端同学量身定制的。
如果你是做其他语言方向的开发，并且不需要太复杂的集成开发环境，那么，你可以把VSCode作为「代码编辑器」来使用，纵享丝滑。
甚至是一些写文档、写作的同学，也经常把VSCode作为markdown写作工具，毫无违和感。
退而求其次，即便你不属于以上任何范畴，你还可以把VSCode当作最简单的文本编辑器来使用，完胜Windows系统自带的记事本。
VSCode的全称是VisualStudioCode，是一款开源的、免费的、跨平台的、高性能的、轻量级的代码编辑器。它在性能、语言支持、开源社区方面，都做得很不错。
微软有两种软件：一种是VSCode，一种是其他软件。
IDE和编辑器是有区别的：
需要注意的是，VSCode的定位是编辑器，而非IDE，但VSCode又比一般的编辑器的功能要丰富许多。可以这样理解：VSCode的体量是介于编辑器和IDE之间。
前端小白最喜欢问的一个问题是：哪个编辑器/IDE好用？是VSCode还是WebStorm（WebStorm其实是IntelliJIDEA的定制版）？我来做个对比：
所以，如果你以后还问这个问题，那就真有些掉底了。
VSCode的安装很简单，直接去官网下载安装包，然后双击安装即可。
上图中，直接点击download，一键下载安装即可。
VSCode支持以下平台：
VSCode用得熟不熟，首先就看你是否会用快捷键。以下列出的内容，都是常用快捷键，而加粗部分的快捷键，使用频率则非常高。
任何工具，掌握20%的技能，足矣应对80%的工作。既然如此，你可能会问：那就只保留20%的特性，不久可以满足80%的用户了吗？
但我想说的是：那从来都不是同样的20%，每个人都会用到不同的功能。
掌握下面这些高频核心快捷键，你和你的工具，足矣露出锋芒。
另外再补充一点：将光标点击到某一行的任意位置时，默认就已经是选中全行了，此时可以直接复制或剪切，无需点击鼠标。这个非常实用，是所有的编辑操作中，使用得最频繁的。它可以有以下使用场景：
你看到了没？上面的两个场景，我全程没有使用鼠标，只通过简单的复制粘贴和方向键，就做到了如此迅速的copy代码。你说是不是很高效？
其他的多光标编辑操作：（很重要）
备注：上面所讲到的移动光标、编辑操作、删除操作的快捷键，在其他编辑器里，大部分都适用。
按住快捷键「Cmd+Shift+P」，弹出命令面板，在命令面板中输入“快捷键”，可以进入快捷键的设置。
当然，你也可以选择菜单栏「偏好设置-->键盘快捷方式」，进入快捷键的设置：
你可以点击VSCode左下角的齿轮按钮，效果如下：
上图中，在展开的菜单中选择「键盘快捷方式」，就可以查看和修改所有的快捷键列表了：
先新建一个空的html文件，然后通过以下方式，可以快速生成html骨架。
方式1：输入!，然后按下enter键，即可生成html骨架。如下图：
方式2：输入html:5，然后按住Tab键，即可生成html骨架。
生成的骨架，内容如下：
Mac用户按住快捷键Cmd+\，Windows用户按住快捷键Ctrl+\，即可同时打开多个编辑器窗口，效果如下：
按快捷键「Cmd+1」切换到左边的窗口，按快捷键「Cmd+2」切换到右边的窗口。随时随地，想切就切。
学会了这一招，以后抄代码的时候，leader再也不用担心我抄得慢了，一天工资到手。
Mac用户按住快捷键Cmd+Shift+P（Windows用户按住快捷键Ctrl+Shift+P），可以打开命令面板。效果如下：
如果们需要修改一些设置项，可以通过「命令面板」来操作，效率会更高。这里列举一些。
Mac用户按住快捷键Cmd+Shift+P（Windows用户按住快捷键Ctrl+Shift+P），打开命令面板。
在命令面板中，输入ConfigureDisplayLanguage，选择Installadditionallanguages，然后安装插件Chinese(Simplified)LanguagePackforVisualStudioCode即可。
或者，我们可以直接安装插件Chinese(Simplified)LanguagePackforVisualStudioCode，是一样的。
安装完成后，重启VSCode。
在命令面板输入“字体”，可以进行字体的设置，效果如下：
当然，你也可以在菜单栏，选择「首选项-设置-常用设置」，在这个设置项里修改字体大小。
在命令面板输入“快捷键”，就可以进入快捷键的设置。
选中文本后，在命令面板中输入transfrom，就可以修改文本的大小写了。
（1）输入快捷键「Cmd+Shift+P」，选择installcodecommand：
（2）使用命令行：
在修改VSCode配置之前，我们需要知道，在哪里可以找到配置项的入口。
方式1：Mac用户选择菜单栏「Code-->首选项-->设置」，即可打开配置项：
方式2：点击软件右下角的设置图标：
选择菜单栏「Code-->首选项-->颜色主题」：
在弹出的对话框中，挑选你一个你喜欢的的颜色主题吧：
打开VSCode的设置项，选择「用户设置->工作台->导航路径」，如下图所示：
上图中，将红框部分打钩即可。
设置成功后，我们就可以查看到当前文件的「层级结构」，非常方便。如下图所示：
有了这个面包屑导航，我们可以点击它，在任意目录、任意文件之间随意跳转。
VSCode默认显示代码的行号。你可以在设置项里搜索editor.lineNumbers修改设置，配置项如下：
我建议保留这个设置项，无需修改。
VSCode会在代码的右侧，默认显示缩略图。你可以在设置项里搜索editor.minimap进行设置，配置项如下：
当我们把光标放在某一行时，这一行的背景色并没有发生变化。如果想高亮显示当前行的代码，需要设置两步：
（1）在设置项里搜索editor.renderLineHighlight，将选项值设置为all或者line。
（2）在设置项里增加如下内容：
"workbench.colorCustomizations":{"editor.lineHighlightBackground":"#00000090","editor.lineHighlightBorder":"#ffffff30"}上方代码，第一行代码的意思是：修改光标所在行的背景色（背景色设置为全黑，不透明度90%）；第二行代码的意思是：修改光标所在行的边框色。
方式一：
改完代码后，默认不会自动保存。你可以在设置项里搜索files.autoSave，修改配置项如下：
上图中，我们将配置项修改为onFocusChange之后，那么，当光标离开该文件后，这个文件就会自动保存了。非常方便。
方式二：
当然，你也可以直接在菜单栏选择「文件-自动保存」。勾选后，当你写完代码后，文件会立即实时保存。
保存代码后，默认不会立即进行代码的格式化。你可以在设置项里搜索editor.formatOnSave查看该配置项：
我觉得这个配置项保持默认就好，不用打钩。
VSCode会根据你所打开的文件来决定该使用空格还是制表。也就是说，如果你的项目中使用的都是制表符，那么，当你在写新的代码时，按下tab键后，编辑器就会识别成制表符。
常见的设置项如下：
当我们按下快捷键「Cmd+N」新建文件时，VSCode默认无法识别这个文件到底是什么类型的，因此也就无法识别相应的语法高亮。
如果你想修改默认的文件类型，可以在设置项里搜索files.defaultLanguage，设置项如下：
上图中的红框部分，填入你期望的默认文件类型。我填的是html类型，你也可以填写成javascript或者markdown，或者其他的语言类型。
当我们在VSCode中删除文件时，默认会弹出确认框。如果你想修改设置，可以在设置项里搜索xplorer.confirmDelete。截图如下：
我建议这个设置项保持默认的打钩就好，不用修改。删除文件前的弹窗提示，也是为了安全考虑，万一手贱不小心删了呢？
接下来，我们来讲一些更高级的配置。
VSCode默认支持对比两个文件的内容。选中两个文件，然后右键选择「将已选项进行比较」即可，效果如下：
VSCode自带的对比功能并不够强大，我们可以安装插件compareit，进行更丰富的对比。比如说，安装完插件compareit之后，我们可以将「当前文件」与「剪切板」里的内容进行对比：
比如我已经在a.js文件里调用了foo()函数。那么，如果我想知道foo()函数在其他文件中是否也被调用了，该怎么做呢？
做法如下：在a.js文件里，选中foo()函数（或者将光标放置在foo()函数上），然后按住快捷键「Shift+F12」，就能看到foo()函数在哪些地方被调用了，比较实用。
重构分很多种，我们来举几个例子。
命名重构：
当我们尝试去修改某个函数（或者变量名）时，我们可以把光标放在上面，然后按下「F2」键，那么，这个函数（或者变量名）出现的地方都会被修改。
方法重构：
选中某一段代码，这个时候，代码的左侧会出现一个「灯泡图标」，点击这个图标，就可以把这段代码提取为一个单独的函数。
在上面的快捷键列表中，我们已经知道如下快捷键：
另外，你可能会注意到，搜索框里有很多按钮，每个按钮都对应着不同的功能，如下图所示：
上图中，你可以通过「Tab」键和「Shift+Tab」键在输入框和替换框之间进行切换。
「在选定内容中查找」这个功能还是比较实用的。你也可以在设置项里搜索editor.find.autoFindInSelection，勾选该设置项后，那么，当你选中指定内容后，然后按住「Cmd+F」，就可以自动只在这些内容里进行查找。该设置项如下图所示：
上图中，你可以点击红框部分，展开更多的配置项。
VSCode自带了Git版本管理，如下图所示：
上图中，我们可以在这里进行常见的git命令操作。如果你还不熟悉Git版本管理，可以先去补补课。
与此同时，我建议安装插件GitLens，它是VSCode中我最推荐的一个插件，简直是Git神器，码农必备。
我们在上面的设置项里修改字体大小后，仅仅只是修改了代码的字体大小。
如果你想要缩放整个工作区（包括代码的字体、左侧导航栏的字体等），可以按下快捷键「cmd+/-」。windows用户是按下「ctrl+/-」
当我们在投影仪上给别人演示代码的时候，这一招十分管用。
如果你想恢复默认的工作区大小，可以在命令面板输入重置缩放（英文是resetzoom）
我们可以在新建文件夹的时候，如果直接输入aa/bb/cc，比如：
那么，就可以创建多层子文件夹，效果如下：
为了统一团队的vscode配置，我们可以在项目的根目录下建立.vscode目录，在里面放置一些配置内容，比如：
.vscode目录里的配置只针对当前项目范围内生效。将.vscode提交到代码仓库，大家统一配置时，会非常方便。
我们可以按下「Ctrl+`」打开VSCode自带的终端。我认为内置终端并没有那么好用，我更建议你使用第三方的终端item2。
写完md文件之后，你可以点击右上角的按钮进行预览，如下图所示：
我一般是安装「MarkdownPreviewGithubStyling」插件，以GitHub风格预览Markdown样式。样式十分简洁美观。
你也可以在控制面板输入Markdown:打开预览，直接全屏预览markdown文件。
Emmet可以极大的提高html和css的编写效率，它提供了一种非常简练的语法规则。
举个例子，我们在编辑器中输入缩写代码：ul>li*6，然后按下Tab键，即可得到如下代码片段：
这款字体很漂亮，很适合用来写代码：
安装步骤如下：
"editor.fontFamily":"'FiraCode',Menlo,Monaco,'CourierNew',monospace",//设置字体显示"editor.fontLigatures":false,//控制是否启用字体连字，true启用，false不启用上方的第二行配置，取决于个人习惯，我是直接设置为"editor.fontLigatures":null，因为我不太习惯连字。
我们可以使用Prettier进行代码格式化，会让代码的展示更加美观。步骤如下：
（1）安装插件Prettier。
（2）在项目的根路径下，新建文件.prettierrc，并在文件中添加如下内容：
{"printWidth":150,"tabWidth":4,"semi":true,"singleQuote":true,"trailingComma":"es5","tslintIntegration":true,"insertSpaceBeforeFunctionParenthesis":false}上面的内容，是我自己的配置，你可以参考。
如果你需要将本地文件通过ftp的形式上传到局域网的服务器，可以安装sftp这个插件，很好用。在公司会经常用到。
步骤如下：
（1）安装插件sftp。
（2）配置sftp.json文件。插件安装完成后，输入快捷键「cmd+shift+P」弹出命令面板，然后输入sftp:config，回车，当前工程的.vscode文件夹下就会自动生成一个sftp.json文件，我们需要在这个文件里配置的内容可以是：
举例如下：(注意，其中的注释需要去掉)
{"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":[//忽略项"**/.vscode/**","**/.git/**","**/.DS_Store"]}（3）在VSCode的当前文件里，选择「右键->upload」，就可以将本地的代码上传到指定的ftp服务器上（也就是在上方host中配置的服务器ip）。
我们还可以选择「右键->DiffwithRemote」，就可以将本地的代码和ftp服务器上的代码做对比。
VSCode有一个很强大的功能就是支持插件扩展，让你的编辑器仿佛拥有了三头六臂。
上图中，点击红框部分，即可在输入框里，查找你想要的插件名，然后进行安装。
我来列举几个常见的插件，这些插件都很实用。注意：顺序越靠前，越实用。
我强烈建议你安装插件GitLens，它是VSCode中我最推荐的一个插件，简直是Git神器，码农必备。如果你不知道，那真是out了。
GitLens在Git管理上有很多强大的功能，比如：
打开你的Git仓库，未安装GitLens时是这样的：
安装了GitLens之后是这样的：
上图中，红框部分就是GitLens的功能，诸君可以自由发挥。
有些同学习惯使用编辑器中的Git管理工具，而不太喜欢要打开另外一个GitUI工具的同学，这一款插件满足你查询所有Git记录的需求。
在本地启动一个服务器，代码写完后可以实现「热更新」，实时地在网页中看到运行效果。就不需要每次都得手动刷新页面了。
使用方式：安装插件后，开始写代码；代码写完后，右键选择「OpenwithLiveServer」。
让软件显示为简体中文语言。
BracketPairColorizer2插件：以不同颜色显示成对的括号，并用连线标注括号范围。简称彩虹括号。
另外，还有个RainbowBrackets插件，也可以突出显示成对的括号。
详细配置已经在上面讲过。
安装openinbrowser插件后，在HTML文件中「右键选择-->OpeninDefaultBrowser」，即可在浏览器中预览网页。
VSCode自带的高亮显示，实在是不够显眼。用插件支持一下吧。
所用了这个插件之后，VSCode自带的高亮就可以关掉了：
在用户设置里添加"editor.selectionHighlight":false即可。
vscode-icons会根据文件的后缀名来显示不同的图标，让你更直观地知道每种文件是什么类型的。
工作中，我们经常会来回切换多个项目，每次都要找到对应项目的目录再打开，比较麻烦。ProjectManager插件可以解决这样的烦恼，它提供了专门的视图来展示你的项目，我们可以把常用的项目保存在这里，需要时一键切换，十分方便。
写代码过程中，突然发现一个Bug，但是又不想停下来手中的活，以免打断思路，怎么办？按照代码规范，我们一般是在代码中加个TODO注释。比如：（注意，一定要写成大写TODO，而不是小写的todo）
//TODO:这里有个bug，我一会儿再收拾你或者：
备注：团长试了一下这个codetime插件，发现统计结果不是很准。
以GitHub风格预览Markdown样式，十分简洁优雅。就像下面这样，左侧书写Markdown文本，右侧预览Markdown的渲染效果：
预览Markdown样式。
这个插件将帮助你更高效地在Markdown中编写文档。
同步的详细操作，下一段会讲。
Vue多功能集成插件，包括：语法高亮，智能提示，emmet，错误提示，格式化，自动补全，debugger。VSCode官方钦定Vue插件，Vue开发者必备。
React/Redux/react-router的语法智能提示。
小程序开发必备插件。
日常开发中，建议用可以用Prettier做代码格式化，然后用eslint做校验。
代码格式化工具。
备注：相比之下，Prettier是当前最流行的代码格式化工具，比Beautify用得更多。
ES6语法智能提示，支持快速输入。
node_modules模块里面的文件夹和模块实在是太多了，根本不好找。好在安装Searchnode_modules这个插件后，输入快捷键「Cmd+Shift+P」，然后输入node_modules，在弹出的选项中选择Searchnode_modules，即可搜索node_modules里的模块。
indent-rainbow插件：突出显示代码缩进。
安装完成后，效果如下图所示：
安装这个插件后，当我们按住快捷键「Cmd+Shift+L」后，即可自动出现日志console.log()。简直是日志党福音。
当我们选中某个变量name，然后按住快捷键「Cmd+Shift+L」，即可自动出现这个变量的日志console.log(name)。
其他的同类插件还有：TurboConsoleLog。
不过，生产环境的代码，还是尽量少打日志比较好，避免出现一些异常。
编程有三等境界：
这个拼写检查程序的目标是帮助捕获常见的单词拼写错误，可以检测驼峰命名。从此告别Chinglish.
维护文件的本地历史记录，强烈建议安装。代码意外丢失时，有时可以救命。
可以把代码片段保存成美观的图片，主题不同，代码的配色方案也不同，也也可以自定义设置图片的边框颜色、大小、阴影。
生成的效果如下：
图片预览。鼠标移动到图片url上的时候，会自动显示图片的预览和图片尺寸。
自动闭合标签、自动对标签重命名。
为注释添加更醒目、带分类的色彩。
增强HTML和CSS之间的关联，快速查看该元素上的CSS样式。
CSSPeek对Vue没有支持，该插件提供了对Vue文件的支持。
不要惊讶，RemoteHub和GitLens是同一个作者开发出来的。
RemoteHub插件的作用是：可以在本地查看GitHub网站上的代码，而不需要将代码下载到本地。
这个插件目前使用的人还不多，赶紧安装起来尝尝鲜吧。
安装方式：
打开插件管理，搜索“liveshare”，安装。安装后重启VSCode，在左侧会多出一个按钮：
在项目开发过程中，我们会引入很多npm包，有时候可能只用到了某个包里的一个方法，却引入了整个包，导致代码体积增大很多。ImportCost插件可以在代码中友好的提示我们，当前引入的包会增加多少体积，这很有助于帮我们优化代码的体积。
此插件可以将剪贴板中的JSON字符串转换成工作代码。支持多种语言。
我们可以将配置云同步，这样的话，当我们换个电脑时，即可将配置一键同步到本地，就不需要重新安装插件了，也不需要重新配置软件。
下面讲的两个同步方法，都可以，看你自己需要。方法1是VSCode自带的同步功能，操作简单。方法2需要安装插件，支持更多的自定义配置。
1、配置同步：
（1）在菜单栏选择「Code-->首选项-->打开设置同步」：
（2）选择需要同步的配置：
（4）同步完成后，菜单栏会显示“首先项同步已打开”，最左侧也会多出一个同步图标，如下图所示：
2、管理同步：
（1）点击菜单栏「Code-->首选项-->设置同步已打开」，会弹出如下界面，进行相应的同步管理即可：
参考链接：
1、配置同步：（将自己本地的配置云同步到GitHub）
（1）安装插件settings-sync。
（4）使用快捷键「Command+Shift+P」，在弹出的命令框中输入sync，并选择「更新/上传配置」，这样就可以把最新的配置上传到GitHub。
2、管理同步：（换另外一个电脑时，从云端同步配置到本地）
（1）当我们换另外一台电脑时，可以先在VSCode中安装settings-sync插件。
上图中，我们点击最新的那条记录，就可将云端的最新配置同步到本地：
如果你远程的配置没有成功同步到本地，那可能是网络的问题，此时，可以使用快捷键「Command+Shift+P」，在弹出的命令框中输入sync，并选择「下载配置」，多试几次。
使用其他人的配置：
如果我们想使用别人的配置，首先需要对方提供给你gist。具体步骤如下：
（2）使用快捷键「Command+Shift+P」，在弹出的命令框中输入sync，并选择「下载配置」