BY

阅读数:

Contents
  1. 1. 整体布局介绍
    1. 1.1. 文件列表
    2. 1.2. 查找和替换
    3. 1.3. 版本控制
      1. 1.3.1. commit和push
  2. 2. 插件
  3. 3. 额外使用Tips
    1. 3.1. git history
    2. 3.2. 样式Theme
    3. 3.3. 显示空格和TAB

摩尔定律依旧在发威，15年的MBP现在已经开始出现卡顿的情况了，尤其是外接了4K显示器后。之前笔者一直是用的Atom来完成代码和文档的编辑工作，后来确实发现Atom会相对卡一些，不知道是安装了太多插件还是什么原因，anyway，现在转到了最近比较火的VSCode上，试用了一段时间感觉挺好的，有一些更特有的配置，然后原先的个人定制化的需求也都可以满足，于是就切换到这里。所以，这篇文章也是对VSCode的一些简要的介绍，以及一些配置项的设定。

先来一张我的最终成品图



整体布局介绍

刚上手的时候，感觉有点眼花缭乱的，但是熟悉起来以后，其实就几个板块，还是参考上图的示例，分为左中右三部分。
左边的区域相当于是操作Tab栏，从上到下依次是：

  • 文件列表
  • 查找和替换
  • 版本控制
  • 调试，错误和警告信息
  • 插件

接下来就分部分介绍下每一项的内容。

文件列表



打开文件列表的pannel之后，其实又有3个小的显示窗口，分别显示当前打开的编辑器窗口(open editors)、当前目录下的文件列以及当前文件的一个大纲(outline)，注意这几个窗口是可以折叠起来的。所以对我来说，有效的也就是当前目录中的文件列，其他两个窗口我都折叠了起来。

查找和替换

快捷键Cmd+F(Mac)和Ctrl+F(Win)其实就可以打开查找的小窗，但是那样只是在当前的文件中查看，所以再按下Shift时，就会自动打开这个查找和替换的操作栏了，在这里的查找和替换操作就是当前项目的全局查找了。

版本控制

目前基本主流的都用Git来实现版本控制了吧。所以这里可以很方便的得执行git的一些操作。因为VSCode已经内嵌进去了Git作为版本控制的工具，所以当你打开的工程已经是一个Git工程时，一些增删改的操作，都会直观地显示在文件目录中，如下图所示：



  • 绿色的表示新增的文件(U)
  • 黄色的表示有修改的文件(M)，而且有修改的文件目录都会层级地有圆点标识出来。

commit和push



点开版本控制的操作板后，可以看到发生改变的文件，点击图中的 + 号，就可以批量全部stage



这里不得不说VSCode做的稍微一点欠缺，你需要仔细看，才发现两个文件由CHANGED变成了STAGED CHANGES。 然后在输入框中输入message信息，直接用快捷键cmd+enter就完成了commit。



push操作需要点击屏幕左下角的同步按钮，VSCode会帮你完成pull&push的操作。

熟悉Git操作的同学，一般很快就可以上手，这里就不过多解释了。

插件

和Atom一样，VSCode仅仅是作为我的一个文本编辑工具，我并没有把它当做一个IDE来使用，所以我这里直接跳到插件一栏。



和文件的pannel类似，这里的几个子窗口, ENABLED、DISABLED、RECOMMENED也是可以折叠和打开的。笔者是把GitLens这个VSCODE默认安装并启用的插件禁用的了。这个插件的效果其实蛮酷炫的，它可以实时显示你的每行代码提交的历史，最近的修改人，修改message等信息。但是对我个人而言，所有的editor都是我自己，而且因为有了很多多余的信息，整个窗口会允许左右滑动，而的我代码明明是在屏幕宽度以内的，这点令强迫症的我非常不爽。 所以就禁用掉了。

这里说下我常用的一些插件吧：

  • Atom Keymap ：因为习惯了Atom的快捷键操作，所以VSCODE提供的这个Atom 的keymap就被我直接copy过来了。当然，在Atom的插件里，也有VSCODE的keymap，方便程序猿转换编辑器的使用？
  • Beautify ：也是老牌的插件了，可以美化很多代码
  • changeEncode： 自动变换编码，当编码是gbk时，自动就修改了编码
  • file-icons：文件图标，颜控必备
  • Git Project Manager：方便快速打开git文件。这是我最常用的功能了，而且随着你使用度的增加，这个功能会越来越顺手，可以很方便的在各个项目之间切换

还有一些插件大家看个人习惯安装吧，它们是：
Auto Import, C/C++, C++ intellisense, Color Highlight, File Utils, Git History, Highlight Matching Tag, HTML CSS Support, Import Cost, indent-rainbow(就是上图里面不同层级的代码前面的不同颜色)，JS-CSS-HTML Formatter, Marddown Preview Enhanced。

额外使用Tips

git history




屏幕右上角可以点开git的提交历史

## 分栏
这个功能我觉得还是非常实用的，又可以多个窗口查看不同代码，还可以例如markdown的预览。而且，分栏不但可以分两栏，还可以多分好几栏



样式Theme

我个人的样式用的是白色主题的Solarized Light, 但是我司的90后们基本上全用的黑色主题，只能说，年龄大了，看黑色主题时间长了有点眼花



显示空格和TAB

个人习惯了，需要把空格和tab显示出来，上面的图里面对空个就是·来显示，tab就是一个向右的箭头，这样就可以方便地看出来文本中的所有内容，因为有的时候可能从别人拷来的文件，tab是4个空格等。

配置如下：打开配置项，搜索render，然后分别勾选如下：



注意空格那里的配置，选择boundary表示只显示开头或结果的空格，如果是字母中间的空格，就隐去不显示，当然你也可以选择all显示所有的空格，看个人习惯。

基本就这些吧，如果有新的使用tips，我会及时补充的。

Contents
  1. 1. 整体布局介绍
    1. 1.1. 文件列表
    2. 1.2. 查找和替换
    3. 1.3. 版本控制
      1. 1.3.1. commit和push
  2. 2. 插件
  3. 3. 额外使用Tips
    1. 3.1. git history
    2. 3.2. 样式Theme
    3. 3.3. 显示空格和TAB