Terrance

13 天前

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

    您需要 注册 一个IMWeb账号或者 才能进行评论。