转载

VsCode初体验

半个月前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上下选择的话就更舒服了，没想到现在已经支持了。