VS Code初体验

8

半个月前WebStorm的频繁卡死终于让我受不鸟了,我决定换个轻量级的编辑器。尝试了Emacs、Sublime text,最后选择了vscode。Emacs实在太难了,那么多快捷键就算记住了我也有点担心我的小指。Sublime一直是我的第二编辑器,平时做一些轻项目或一些简单测试都是用Sublime,本来这次想改用sublime,还想着如果用上手了在买个注册码。
当天受我们组的美女前端安利了vscode,虽然vscode在发布1.0版本的时候我就安装了,安装后只是大概了解了一下,因为用惯了webstorm并且webstorm让我很爽,所以当时并不想再花时间学一个编辑器。
我们组已经有4人开始用vscode作为主编辑器了,我想这东西这么优秀,而且还免费,我怎么能不尝试一下呢

Visual Studio Code简介

Visual Studio Code(以下简称vscode)是一个轻量且强大的代码编辑器,支持Windows,OS X和Linux。内置JavaScript、TypeScript和Node.js支持,而且拥有丰富的插件生态系统,可通过安装插件来支持C++、C#、Python、PHP等其他语言。

据vscode的作者介绍,这款产品可能是微软第一款支持Linux的产品。
微软对于vscode的定位如下图,位于编辑器与IDE之间,但是更像一个编辑器。有人说是披着编辑器外衣的IDE,我觉得是披着IDE外衣的编辑器。

深入了解了vscode之后发现了vscode很贴心地内置了很多功能,让我觉得我可以很快适应到vscode的使用。
这真是微软的良心之作,想想这个产品应该让微软在开发者心中加了很多分,它让我们看到越来越开放和越来越有情怀的微软。建议试试~

废话不多说,开干吧!

1. 安装

安装的东西没什么好说的,自行下载安装吧,伙计。

2. 配置

我的vscode好像没有怎么调教就上手了。刚接触的时候装上几个插件,熟悉几个常用的快捷键就开始撸代码了。

用户配置

vscode的用户配置分3个级别,分别是默认配置、全局配置和工作区配置,优先级也依次递增。对于团队项目,一些规范可以通过项目目录下建一个.vscode/setting.json文件进行配置,比如:

  // tab长度
  "editor.tabSize": 2,

  // 启用后,将在保存文件时剪裁尾随空格。
  "files.trimTrailingWhitespace": true,
  
  // 配置 glob 模式以排除文件和文件夹。
  "files.exclude": {
      "**/.git": true,
      "**/.svn": true,
      "**/.DS_Store": true,
      "**/.idea": true
  },
  
  // 配置 glob 模式以在搜索中排除文件和文件夹。从 files.exclude 设置中继承所有 glob 模式。
  "search.exclude": {
      "**/node_modules": true,
      "**/bower_components": true,
      "**/dist": true,
      "**/coverage": true,
      "**/doc": true
  },

快捷键绑定

参考官方文档,文档中列出了所有指令对应的快捷键。
快捷键我只修改了两个与系统软件冲突的

[
    { "key": "ctrl+alt+right",          "command": "workbench.action.nextEditor" },
    { "key": "ctrl+alt+left",           "command": "workbench.action.previousEditor" }
]

代码片段

这个功能很像webstorm的live template的功能,虽然提示的时候没有webstorm那么精准和顺手,不过总的来说,够用

设置语法遵循TextMate代码片段语法
你可以通过安装别人写好的snippet插件
如果别人写的snippet你用得不爽,那么自己写也简单

{
    "then statement": {
        "prefix": "then",
        "body": [
            "then($1 => {",
            "    $2",
            "})"
        ],
        "description": "my then snippet"
    },

    "catch statement": {
        "prefix": "cat",
        "body": [
            "catch(err => {",
            "    $1",
            "})"
        ]
    }
    ...
}

之前使用这个代码片段有个痛点就是只能用方向键上下选择提示,如果能使用ctrl+n/p上下选择的话就更舒服了,没想到现在已经支持了。

另外,有没有人知道怎么设置代码提示内容,比如输入result提示了XPathResult是什么鬼

3. 插件

4个月前刚知道vscode的时候,那时感觉插件还没有那么多,现在重新看了一下,真是应有尽有。牛逼啊!

这里介绍几个我用过觉得不错的插件

  1. 用户配置同步 Visual Studio Code Settings Sync

  2. Git 历史 Git History

  3. 文件图标 vscode-icons

  4. 缩进辅助线 Guides

总结

使用vscode半个月来,暂时谈不上得心应手,但基本上让我用得挺舒服的,现在vscode已经是我的主编辑器了。
妈妈再也不用担心我等webstorm响应了。

参考

  1. https://code.visualstudio.com...

  2. https://vimeo.com/174657014

  3. https://www.zhihu.com/questio...


如果觉得我的文章对你有用,请随意赞赏

你可能感兴趣的

23 条评论
learning · 2016年08月16日

因为用TypeScript尝试过VSCode,类似Visual Studio的IntelliSense再加上typings确实很强大,但也有不少坑。最终仍因为快捷键不顺手(微软总喜欢改默认快捷键,Mac下的control+a变成全选了)和偶尔卡顿跟不上手速的原因(可能是基于Webkit类编辑器的通病),还是换回了我的Sublime Text 3 和 Vim。

+1 回复

吴彦欣 作者 · 2016年08月16日

我mac的ctrl+a ctrl+e都正常。但是vscode的vim插件就不行,装了之后没用多久就卸了,不知道有没有改善

回复

lx熊猫桑 · 2016年08月17日

Guides缩进辅助线新版已经带了,不介意样式单一的话直接在配置里打开就行。

回复

吴彦欣 作者 · 2016年08月17日

谢谢提醒

回复

xuanye · 2016年08月22日

介绍的几个插件不错。。登录来评论一下

回复

吴彦欣 作者 · 2016年08月22日

哈哈哈,谢谢支持

回复

gatspy · 2016年08月28日

看到tabsize为2飘过了。这样设置为什么不用editconfig。还是喜欢vim中缩进自由的定义方式。主要是喜欢了py缩进长度4。

回复

吴彦欣 作者 · 2016年08月29日

tabsize为2是我们团队规范

回复

gatspy · 2016年08月30日

@吴彦欣 ms大法确实厉害的了,目前使用就是环境不怎么好设置,搞得我每次都从终端进入

回复

吴彦欣 作者 · 2016年08月30日

我之前node环境也有点问题,跟你一样从终端进入,后来看了github上关于这个的issue搞定了。现在新版本应该ok了吧

回复

gatspy · 2016年09月02日

@吴彦欣 谢谢啊。我更新体验下。

回复

苏理煌 · 2016年09月06日

深度好文, 谢谢推荐

回复

吴彦欣 作者 · 2016年09月06日

如果文章对你有帮助,请帮我点下推荐,谢谢

回复

苏理煌 · 2016年09月06日

我已经点了推荐和收藏, 希望作者的下一篇好文

回复

吴彦欣 作者 · 2016年09月06日

哈哈哈

回复

xyyjk · 2016年09月09日

大爱VS Code惊艳的速度及稳定性!如果你还在为Atom的卡顿而担忧,那VS Code是不二的选择,并且在对大文件打开及编辑速度超越Sublime Text。

VS Code刚刚发布了1.5.1版本,新增的File Icon Theme默认功能可以取代题主提到的文件图标插件了

VS Code有着多样化的插件系统,下面再推荐几个我比较常用的插件:

1、ESLint - Integrates ESLint into VS Code.

2、stylelint - Modern CSS/SCSS/Less linter

3、beautify - Beautify code in place for VS Code

4、JavaScript Snippet Pack - A snippet pack to make you more productive working with JavaScript

5、JavaScript (ES6) code snippets - Code snippets for JavaScript in ES6 syntax

6、jQuery Code Snippets - Over 130 jQuery Code Snippets

7、HTML CSS Class Completion - Provides CSS class completion for the HTML class attribute.

8、npm Script Runner - Run npm scripts from the Command Palette

9、AutoFileName - auto complete file name

10、Debugger for Chrome - Debug your JavaScript code in the Chrome browser, or any other target that supports the Chrome Debugger protocol.

回复

吴彦欣 作者 · 2016年09月09日

666?

回复

Allin · 2016年10月27日

为什么不选Atom~:)

回复

吴彦欣 作者 · 2016年10月31日

vscode好像就是fork atom的

回复

Allin · 2016年10月31日

是啊、我就是用的atom?

回复

载入中...