VS Code进阶

本文作者：IMWeb Terrance 原文出处：IMWeb社区 未经同意，禁止转载 虽然关于VS Code的介绍文章已经不少了，但面对如此用心的IDE，还是忍不住要再“赞美”一番，希望可以拉更多开发小伙伴入坑，如果能真正提高大家的开发体验当然是最好不过的事情～～

认识VS Code

Visual Studio Code (简称VS Code/VSC)是微软在Build 2015大会（本次大会同时还发布了Windows10、Edge等重量级产品）上推出的一款免费开源的现代化代码编辑器，支持几乎所有主流的开发语言的语法高亮、智能代码补全、自定义热键、代码折叠、代码片段、内置版本管理等特性，支持插件扩展，并拥有十分活跃的插件社区。

VSC在界面布局和使用习惯上承袭了Visual Studio的很多优点，但更加轻量化。由于基于Electron进行开发，软件可以跨平台支持 Win、Mac 以及 Linux，保证了在不同系统上都有相同的版本迭代速度，运行流畅，编辑器内核采用强大的Monaco（一个HTML编辑器，也是微软出品）实现，瞬间打开几十兆的文件无压力。

VSC在编程语言和语法上支持 C++, jade, PHP, Python, XML, Batch, F#, DockerFile, Coffee Script, Java, HandleBars, R, Objective-C, PowerShell, Luna, Visual Basic, Markdown, JavaScript, JSON, HTML, CSS, LESS, SASS, C#, TypeScript等语言。不过从现状来看，对于前端开发的友好程度还是最高的，哈哈，当然出色的颜值、贴切的交互设计，也是前端码农选择VSC的一个重要因素。

你应该正在使用的原生特性

1. 代码自动补全
2. 主题、图标自定义
3. 代码高亮
4. 项目/文件内搜索或替换
5. 多个项目之间导航

你也许还没用到的原生特性

1. 系统终端集成：内部提供了一个控制台，它可以将所有的系统终端都集成进来，而且可以添加多个实例，以后再也不需要因为执行npm、git、webpack等命令而在多个窗口之间来回切换啦，体验杠杠滴～
2. 源代码管理：自动识别项目使用的VCS（版本管理系统），提供分支管理、工作空间修改等基础功能，让你可以随时把控代码的修改状态。
3. 代码片段：在「首选项/用户代码片段」中可针对不同的编程语言添加代码片段，HTML Boilerplate就是基于此来快速生成干净的HTML模版的插件，从此敲起代码来快得简直不要不要的～
4. 自定义快捷方式：可以通过「首选项/键盘快捷方式」来对IDE的所有快捷键进行自定义设置（默认设置可参考），还能通过「首选项/键映射扩展」快速将快捷键重置为其他IDE的配置，比如习惯了Eclipse开发的开发者只需安装一个Eclipse Keymap插件，即可快速上手。
5. 代码调试：插件中提供了python、C++、Javascript、C#、Go等几十种编译器，以后开发和调试也可以一起愉快的玩耍了～
6. 自定义设置：除了IDE的自身设置外，大部分插件也提供了设置项，都可以通过「首选项/设置」来进行自定义配置。
7. 文件自动保存：避免在停电、死机等情况下修改内容因未及时保存而丢失的事故。。。
8. 命令面板（Ctrl+Shift+P）：所有的系统命令、插件命令都可以通过这里发起，堪称mac下的Alfred、Windows下的Wox。

这些场景你可以用插件轻松解决

Q：我的项目托管在Git上，本地开发时，怎么做到随时可以查看当前代码修改的状态？

A：推荐使用Git lens插件，代码的提交历史一目了然，遇到问题再也不用借助第三方工具来溯源了～

• 当前窗口查看当前分支、提交历史、代码行的最后修改

• 右键查看修改历史、文件比较等详情信息

Q：我有多个开发机器，如何在它们之间同步IDE配置和插件？当需要重新搭建开发环境时如何快速配置VSC？

A：可以使用Settings Sync对VSC配置进行同步，用你的Gist仓库进行数据托管。大致步骤如下：

1. 在VSC中安装Settings Sync插件；
2. 登录自己的github，前往Settings / Developer settings / Personal access token，点击Generate New Token，类型选择Gist，得到Access Token；
3. 使用Shift + Alt + U快捷键，首次将需要输入Access Token，并将本地配置上传到Gist仓库中，生成的gist id将作为今后的配置下载地址；
4. 在另外一台开发机器中的VSC中使用Shift + Alt + D快捷键（首次将需要输入gist id），配置和插件将自动同步或安装到本地VSC中；
5. 可根据需要设置IDE启动时是否自动根据Gist配置文件进行同步，配置修改时是否自动上传，需要同步的文件规则等。

PS：注意其他机器登录时一定执行Shift + Alt + D命令，再执行Shift + Alt + U命令，否则将会创建多个Gist配置。

Q：怎样提高在VSC中写markdown的效率？

A：VSC原生支持MD，并能实现侧边栏预览，你也可以通过安装一些插件来增强体验。不过还是更推荐Typora、MacDown、MarkdownPad这些专业的工具来撰写文章。

Q：推荐一些可以提高开发效率和幸福感的插件？

A：VSC的插件很丰富，可以使用关键字来搜索，下载量超过10k的插件应该都不错。这里推荐几款：

1. vscode-fileheader：一键添加文件头部注释，可自动同步文件修改时间
2. filesize：在底部状态栏显示文件大小，点击可显示文件详情
3. Regex Previewer：一款实时检测正则表达式匹配情况的插件
4. TODO Highlight：将注释中的FIXME、TODO等语句高亮显示，提醒开发者
5. Color Info：用不同方式展示css中的颜色

Q：哎呀，我要的插件社区没有，不要慌，你可以亲手做一个！

A：什么，你需要的功能现有插件都无法提供？恭喜你，发现了一块新大陆，如果你是一个前端开发者，那这个过程就更简单了。参考步骤如下：

1. 全局安装脚手架、发布工具：npm install -g yo generator-code vsce
2. 生成项目模版，配置插件选项：yo code
3. 确保可以直接运行
4. 设计并编码插件的业务逻辑
5. 前往官方插件社区注册账号，获取Personal Access Token
6. 创建发布作者：vsce create-publisher *
7. 发布到社区：vsce publish

参考文章

1. VS Code 初上手
2. Microsoft Launches Visual Studio Code, A Free Cross-Platform Code Editor For OS X, Linux And Windows
3. Visual Studio Code Settings Synchronization
4. 精选！15 个必备的 VSCode 插件（前端类）
5. 为vscode编写扩展
6. Extending Visual Studio Code

PS：如果你有发现好玩、可以提高开发效率、可以解决开发痛点的插件或者技巧，欢迎补充，从而分享给更多的人^_^