VS Code进阶

虽然关于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:如果你有发现好玩、可以提高开发效率、可以解决开发痛点的插件或者技巧,欢迎补充,从而分享给更多的人^_^

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏CRPER折腾记

Vue 折腾记 - (11) @Vue/Cli 3.0.0 图形化项目管理,相当人性化

点击顶部tab的Create进入初始化界面, 点击Create a new project here进入新项目初始化

1082
来自专栏WindCoder

当nz-checkbox-group多选框组遇上必选校验

今天表单中用到ng-zorro-antd组件的多选框nz-checkbox-group,最开始用的是响应式表单的验证+响应式表单的验证,结果总是无法达到预期效果...

1212
来自专栏CRPER折腾记

NG2.4.10升级NG4正式版[正式项目]:修正AOT打包报错的一些问题

上周五,ng4正式发布了。。很多小伙伴迫不及待的把项目升级了。。。 然后到群里各种吼,无损升级,没有什么奇葩问题,大家放心升级。。 我信了。。。把公司的项目给升...

631
来自专栏日常学python

谈谈如何抓取ajax动态网站

什么是ajax呢,简单来说,就是加载一个网页完毕之后,有些信息你你还是看不到,需要你点击某个按钮才能看到数据,或者有些网页是有很多页数据的,而你在点击下一页的时...

762
来自专栏小巫技术博客

Android混淆代码错误堆栈还原

835
来自专栏一只程序汪的自我修养

自动同步git repository脚本

1283
来自专栏程序员的碎碎念

JS动态加载以及JavaScript void(0)的爬虫解决方案

对于使用JS动态加载, 或者将下一页地址隐藏为 JavaScriptvoid(0)的网站, 如何爬取我们要的信息呢?

922
来自专栏谦谦君子修罗刀

项目开发解决方案及参考文献

玩转 iOS 10 推送 —— UserNotifications Framework(上) iOS 接收推送消息后跳转到某个页面(适配iOS10)

1081
来自专栏DeveWork

WordPress 网站开发“微信小程序”实战(四)

本站微信小程序版“DeveWork极客”在中文WP 圈子可谓是一直被模仿,从未被超越。如今快速迭代,写作本文的现在是1.6 版本。作为“WordPress 开发...

2266
来自专栏葡萄城控件技术团队

作为JavaScript开发人员,这些必备的VS Code插件你都用过吗?

如今,Visual Studio Code无疑是最流行的轻量级代码编辑器。它确实从其他代码编辑器那借鉴了很多,最主要是从Sublime和Atom那里。然而它的成...

1201

扫码关注云+社区