VSCode是一个开源的跨平台开发工具，是我目前用的最方便的编辑器。本文介绍一些常用的插件和快捷键，帮助您大大提高软件开发的效率，让您有更多时间玩铁娘子。初识VSCode，首先放在它的官网：code.visualstudio.com/VSCode，全称是VisualStudioCode。单从名字上看，有些人一开始可能会混淆VSCode和VisualStudio。他们都属于微软的母公司。它的产品，而后者早已声名远扬，长期占据程序员最喜欢的编辑器榜首。为了让新的儿子VSCode流行起来，它有一个相似的名字，就像Javascript之于Java一样。说VSCode是一个新生儿也不为过。诞生至今仅4年。与历史悠久的各大编辑相比，简直就是个弟弟。但最近一两年，它发展迅速，市场占有率飙升，遥遥领先于其他编辑器。SublimeText迅速没落，Atom没有流行起来，WebStorm因为收费问题在国内开始使用。不高，由于学习成本高，Vim逐渐退出了历史舞台。如果你碰巧从其他编辑器切换到VSCode，完全不用担心。它提供了相应的Keymap插件，可以迁移您的键盘设置，帮助您快速上手，无需再花时间去习惯快捷键。.而且对每一种语言都提供了很好的支持，将开发中需要用到的Extensions打包成一个集合。基本上在开发的时候下载对应的扩展包就可以得到很好的支持。微软对VSCode的定义是：免费、开源、跨平台。重新定义代码编辑器。再加上去年微软收购了Github，这些都表明微软在开源方面的尝试越来越多。开源对于产品的长期发展极为重要。四个编辑器中，Sublime是闭源的，VSCode、Vim和Atom都是开源的，VSCode可以说是开源最好的。VSCode不仅仅是开源代码。相反，我们将整个产品开发过程立足于开源，与整个社区深度合作，在GitHub上听取用户的反馈，让VSCode越来越好：每年，VSCode团队都会在GitHubWiki上发布Roadmap，做一个计划全年。每个月初，在产品设计阶段，VSCode团队会在GitHubIssue上发布IterationPlan，列出本月要完成的每个功能。每个功能基本上都会对应一个GitHubIssue。可以看到详细的设计和模型，也可以提出自己的见解。在每个月底临近产品发布的时候，你可以在GitHub上看到Endgame，了解VSCode是如何进行产品测试和发布的。不仅是代码开源，VSCode整个产品的计划、设计、发布管理都是“开源”的：每个阶段对每个用户都是公开透明的，你不仅可以开Issue，发PR，你甚至可以参与每一个功能的设计和讨论！关于VSCode业界一直存在争议——它是IDE吗？对于VisualStudio，微软直接将其定义为同类中最好的IDE，而对于VSCode，微软目前仅将其定义为代码编辑器。VisualStudioCode是一款轻量级但功能强大的源代码编辑器为了解决这个问题，我们首先要了解一个概念，什么是IDE？它的全称是Integrateddevelopmentenvironment，字面意思是集成开发环境，就是把开发过程中使用的一些主要活动和工具集成在一个开发环境中，这样我们就可以在程序中编写代码，调试代码，运行命令行、版本控制和其他开发过程。目前VSCode有强大的API支持，基本可以实现IDE。我们用它来写代码，使用内置的Terminal终端快速运行命令行，下载Debug插件，设置断点，轻松调试代码。使用用于版本控制的内置Git轻松管理源代码。无论何种语言，您都可以一次性下载对应的插件合集、打包安装，整个开发过程都可以在这个工具中完成。它真正重新定义了代码编辑器。在StackOverflow的2018年开发者调查中，VSCode成为最受欢迎的开发工具。基础插件本节介绍一些必备的开发插件，帮助您大大提高代码编辑的效率。VSCode拥有丰富且快速发展的插件生态系统。今天，有超过10,000个插件。不仅有集中的插件市场，还可以在VSCode编辑器中轻松搜索插件，直接安装管理。相比之下，Sublime的插件不到5000个，在编辑器中查找和管理插件并不方便；虽然Vim插件很多，但由于没有集中的插件市场，找插件很麻烦；Atom有8000多个插件，比VSCode还少。虽然在编辑器中也能找到插件，但是VSCode的搜索和浏览功能比Atom要好。VisualStidioCodeChinese(Simplified)LanguagePack对于一些英文不好的朋友，首先要做的就是切换到中文语言环境。安装好Simplified插件后，按快捷键Ctrl+Shift+P调出命令面板，进入ConfigureDisplayLanguage，选择zh-ch，然后重启vscode。open-in-browser在浏览器中查看VSCode没有内置直接在浏览器中运行程序的功能，所以我们需要安装这个插件才能在浏览器中查看我们程序的运行效果。LiveServer实时预览安装此插件后，我们在编辑器中修改代码，按Ctrl+S保存，修改后的效果会实时同步显示在浏览器中，无需手动刷新。[图片上传失败...(image-9b80fc-1564194236095)]自动关闭标签输入标签名时自动生成关闭标签，非常方便。自动重命名标签尾部闭合标签同步修改。自动检测配对标签并同步修改。BracketPairColorizer使用不同的颜色来突出匹配的括号，以便为成对的括号着色，以便于区分。插件未安装前，支架统一为白色。HighlightMatchingTagHighlightMatchingTag这个插件会自动帮我们高亮选中的匹配标签，这样你就不用再苦苦寻找了。vscode-iconsVSCode文件图标这个插件可以帮助我们根据不同的文件类型生成相应的图标，这样我们在侧边栏查看文件列表的时候可以直接通过图标来区分文件类型。使用mac的朋友可以选择下载Vscode-icons-mac，基本图标和Vscode-icons类似，就是文件夹采用mac风格。TODOHighlight如果我们在写代码的时候想标记某个地方，以后对里面的内容进行改进或者修改，我们可以使用这个插件来高亮它，然后它可以帮助我们快速定位到需要的代码行待修改。CodeSpellChecker单词拼写检查我们在写代码的时候，经常会不小心拼写错误，导致软件无法运行。安装这个插件后，它会自动帮我们识别拼写错误并给出修改建议，大大减轻了我们排bug的压力。CodeRunner运行选定的代码段如果你需要学习或接触各种开发语言，那么CodeRunner插件可以让你直接通过这个插件运行对应语言的代码，而无需构建开发各种语言的环境，非常适合学习或测试各种开发语言，右键选择RunCode，支持包括Node.js在内的大量语言。ImprotCostCostPrompt这个插件可以在你导入工具包的时候提示包的体积。如果体积太大，需要考虑压缩包，为后期在线优化做准备。GitLens查看Git信息，将光标移动到代码行，可以显示当前行的最新提交信息和作者。在多人开发的时候非常有用，把责任分给一个人，防止推卸责任。Bookmarks将代码加入书签，通过快捷键快速跳转到书签位置。具体快捷键可以在快捷键中自定义：扩展插件部分主要介绍一些针对特定开发环境的插件。vscode-element-helper使用element-ui库安装此插件，在写标签名时自动提示元素标签。VersionLens工具包版本信息显示了你在package.json中下载安装的npm工具包的版本信息，同时也告诉你当前包的最新版本。VeturVUE语言包VUE是时下最流行的js框架之一。许多公司选择基于VUE构建产品。Vetur为VUE提供了良好的语言支持。安装插件前，写一个后缀为.vue的文件，代码是白色的。安装插件后，写vue文件输入s，按Tab键自动补全模板。WakaTime计算代码工作量这是一款时间记录工具，可以帮助你记录下vscode中的有效编程时间。并以折线图的形式展示数据，为您展示一周内的工作趋势。我在写项目的时候，最多每天编程将近12个小时，而wakatime知道你所有的努力和努力。同时，在他的官网上，还会以扇形图的形式展示你写每种语言的时间比例，以及你在每个项目上花费的时间比例。这是一个非常好的数据报告。当项目结束时你可以在它的Dashboard中清楚地看到你的时间是如何分配的。SettingsSyncVSCode设置同步到Gist有时候我们到了一个新公司或者换了一台新电脑，我们需要配置一个新的开发环境。这时候一个一个下载插件，然后重新配置vscode，很麻烦，可能也记不太全了。通过使用这个插件，我们可以将当前vscode中的配置上传到Gist，然后通过Gist下载，将所有配置同步到新环境。在Github主页点击头像，选择Settings进入设置页面。点击左侧边栏的开发者设置，进入开发者设置。选择个人访问令牌并单击右侧的生成新令牌。填写令牌名称并检查下面的要点。单击下面的生成令牌按钮以生成新令牌。保存生成的新令牌。在vscode中安装SettingsSync插件，输入Ctrl+Shift+p进入Sync，选择Update/UploadConfiguration。输入在github中生成的token，点击回车。控制台会自动生成一串id，然后可以通过token和id同步配置。输入Ctrl+Shift+p进入Sync，选择downloadconfiguration，输入token和id同步下载。本文介绍的vscode配置已经全部同步到Gist，需要的朋友可以下载。token:b3c5f29c0e6f9f49b23b44ce89467226cd91c9c6Id:338d5dfb6b7784c980250cffe8365899复制代码在配置文件中可以选择是否自动上传下载"sync.removeExtensions":true,"sync.syncExtensions":true,"Downtoloadsync":autosync"tosync":true:"Downtoloadsync":true.gist":"338d5dfb6b7784c980250cffe8365899"复制代码颜色主题作为程序员，每天大部分时间都坐在电脑前敲代码，需要和编辑长期打交道。选择一个好的-找一款我们的vscodeColor主题，可以大大提升写代码的乐趣。为了保护眼睛，这里提供一个深色主题安装包，里面包含以下皮肤。我个人最喜欢的是以下两款深色主题。主题一般是用过不会来回改，所以选一个自己用起来舒服的德古拉官方吸血鬼主题（我现在用的那个）OneDarkPro常用快捷键编辑器windowmanagementCtrl+Shift+P：打开命令面板。Ctrl+Shift+N：新建一个窗口。Ctrl+Shift+W：关闭窗口。拆分窗口：Ctrl+1/Ctrl+3/Ctrl+3Ctrl+H：最小化窗口Ctrl+B：显示/隐藏侧边栏Ctrl+“+/-”：放大/缩小界面文件操作Ctrl+N：创建一个新建文件Ctrl+W：关闭文件Ctrl+Tab：文件切换格式调整Ctrl+C/Ctrl+V：复制或剪切当前行/当前选中内容Alt+Up/Down：上/下移动一行Shift+Alt+Up//Down:向上/向下复制一行Ctrl+Delete:删除当前行Shift+Alt+Left/Right:从光标向左/右选择内容代码编辑Ctrl+D:选择下一个相同内容Ctrl+Shift+L：全选相同内容Ctrl+F：查找内容Ctrl+Shit+F：在整个文件夹中查找内容常用设置我们可以在settings.json中手动设置一些设置，让我们的编辑器更好用。关闭标签介绍信息当我们在编写代码时将鼠标移动到某个标签上时，会自动弹出一些介绍信息，挡住部分代码，给我们的阅读带来很大的困难。我们还没有找到关闭它的方法。目前可以通过设置延时来暂时达到这种效果。我设置为5000毫秒，你可以设置一个更大的值。基本上，它不会弹出。"editor.hover.delay":5000复制代码自动换行代码设置代码根据编辑器窗口大小自动换行"editor.wordWrap":"on"复制代码字体设置//适合的字体包用于代码显示（需要将字体包下载到本地）"editor.fontFamily":"SourceCodePro,'SourceCodePro'",//设置代码的字体大小"editor.fontSize":15，目前有四种复制代码自动保存选项：关闭：关闭自动保存。afterDelay：当文件被修改后的时间超过“Files:AutoSaveDelay”中配置的值时自动保存。onFocusChange：当编辑器失去焦点时自动保存更新的文件。onWindowChange：当窗口失去焦点时自动保存更新的文件。"files.autoSave":"off"关闭代码提示"editor.quickSuggestions":{"other":false,"comments":false,"strings":false}
