Visual Studio Code

介绍

vscode是一个基于electron开发出来的文本编辑器。开源免费，隶属微软件旗下，继承了Atom和Sublime Text的插件式使用方式，使它得到了广大编程爱好者们的喜爱和支持。并且天生支持TypeScript,可以说它是写TypeScript的首选工具。

安装

首次安装

首次安装请执行以下命令，安装vscode

curl https://packages.microsoft.com/keys/microsoft.asc | gpg --dearmor > microsoft.gpg
sudo mv microsoft.gpg /etc/apt/trusted.gpg.d/microsoft.gpg
sudo sh -c 'echo "deb [arch=amd64] https://packages.microsoft.com/repos/vscode stable main" > /etc/apt/sources.list.d/vscode.list'
sudo apt-get -y update
sudo apt-get install -y code

非首次安装

sudo apt-get install -y code

升级vscode版本

sudo apt upgrade code

使用

启动vscode,就可以使用它打开并编辑文件了。但一般情况我们都需要做一些配置，使它用起来更舒服，先让我们来看一下这个配置中都做过哪些配置，以便我们能够更好地使用它，可以通过vscode的菜单

• File
  • Preferences
    • Settings

打开vscode的配置界面，将会打开一个左右分割开的两个窗口，左边为全部的默认设置，右边为个人设置，包括用户设置和项目设置，上面还有一个搜索条，我们可以通过一些关键字搜索快速定位到我们所要关心的设置选项。

1. "editor.tabCompletion": true

   使用tab选项建议项。通常，tab键选择建议项比使用回车（Enter）要方便地多，很多老手都知道。

2. "editor.fontSize": 20

   字体大小，默认的字体实在太小了，看起来省屏幕空间但是费眼，考虑到空间有价眼无价，建议大家把这个调大一些，至于多大，自己看着办吧。

3. "editor.insertSpaces": false

   使用Tab缩进的时候是插入空格还是插入tab，对此，不少开发人员有过争执。在此不作争论，强制要求使用tab缩进。

4. "editor.tabSize": 4

   该设置表示一个tab与几个空格的宽度相等。2太窄，与1个空格看起来差不多，容易看错，3有点儿不伦不类，8太宽，所以4是最合适的

5. "editor.wordWrap": "bounded"

   有时候一行的代码太长了（这种情况经常出现），如果我们不想经常拖着滚动条拖来拖去的，建议设置该项。

6. "editor.fontLigatures": true

   todo

7. "editor.renderWhitespace": "all"

   显示所有空白，这包括空格和tab。该项配置在避免代码发生冲突方面可以起到意想不到的作用。

8. files.associations

   该项为设置哪种特定的文件后缀用什么语法解析

   • "*.wxss": "css" 所有wxss后缀使用css语法解析(微信小程序)
   • "*.wxml": "html"所有wxml后缀使用html语法解析(微信小程序)

9. "files.trimTrailingWhitespace": true

   去掉文件中行末的空格

10. "search.exclude"

    搜索文件时排除的文件/目录。对于加速搜索很有用。

11. "editor.renderControlCharacters": true

    显示控制字符

12. "git.confirmSync": false

    在同步git代码时不弹出提示

13. "terminal.integrated.shell.linux": "/bin/zsh"

    终端使用的shell，我们使用zsh

14. "files.autoSave": "onFocusChange"

    自动保存，当我们开发的时候，只管修改代码，不必去手动保存，为我们开发节约了不少时间。

15. "git.enableSmartCommit": true

    这个选项也很有意思，一般情况下，我们在进行git提交(commit)操作的时候，经常是要提交所有文件，在这些时候有了这个选项配置，我们可以不先缓存这些项，而是直接输入提交日志直接提交，非常方便和人性化的配置

16. "editor.minimap.renderCharacters": false

    缩略图不需要看地那么仔细，节省一些cpu开支吧，界面也更清爽一些。

17. "window.restoreWindows": "all"

    当启动vscode的时候打开所有上次关闭的所有窗口

18. "window.restoreFullscreen": true

    记住上次退出时的全屏状态

19. "editor.minimap.showSlider": "always"

    缩略图始终显示或拖动的滑块

20. "explorer.sortOrder": "type"

    左侧文件面板中的文件（夹）按文件类型排序

21. "editor.formatOnSave": true

    在保存的时候自动格式化，确保一个良好的代码风格，至少不容易与其他人的代码产生冲突

22. "workbench.startupEditor": "none"

    适合不想看广告的用户们

23. "explorer.confirmDelete": false

    删除文件时不提示

24. "explorer.confirmDragAndDrop": false

    文件拖放时不提示

25. "git.autofetch": true

    比较有用，能及时知道服务器上git仓库与本地仓库的差异

26. "files.useExperimentalFileWatcher": true

    更好的方便监控

27. "zenMode.hideTabs": false

    全屏zen模式时不隐藏tab页签，因为那样不方便使用鼠标切换当前的编辑文件

28. "zenMode.restore": true

    如果上一次vscode退出时是zen模式，启动的时候仍然进入zen模式

29. "markdown-toc.depthFrom": 2

    默认使用第二级标题开始产生目录，为插件markdown-toc的设置

extensions

使用vscode，必须安装一些插件，用起来才会更方便，以下总结了一些实用的插件，需要的人请直接拿走。具体的安装办法为：

1. 在vscode中按ctrl+p
2. 输入安装命令，弹出提示后，回车执行
3. 所有插件安装完成后，重启vscode即可生效

ext install ms-vscode.typescript-javascript-grammar
ext install aaron-bond.better-comments
ext install eg2.tslint
ext install AlanWalk.markdown-toc
ext install DavidAnson.vscode-markdownlint

注意以上命令不可以同时执行多个，需要逐行执行。

以下为这些扩展的描述

使用技巧

多行编辑

对于没接触过sublime和atom的人来说，vscode最为人震憾的就是多行编辑功能了，它让开发人员节省了很多的时间。

注：以下方法中的快捷键在有些桌面系统中被占用了

• 方法一

  最常用的多行编辑功能就是先选中某一段文本，按ctrl+d快速选择相同的文字，然后就会有多个编辑光标出现，就可以进行多行编辑了，并且它竟然仍然也有语法提示！

• 方法二

  光标定位在某个位置，按ctrl+shift+up或ctrl+shift+down快速选择连续的多行，进行多行编辑

• 方法三

  有部分用户可能不太习惯完全通过键盘来操作，或者有时候不大方便能够找到一定的规律使得可以通过键盘定位到多个编辑位置，此时可以借用鼠标，按着alt不放，用鼠标在多个编辑位置单击，就可以进行多行编辑了

• 方法四

  对于一整块内容的修改，按着alt+shift，用键盘拖出一个范围，对此范围内的内容就可以进行多行编辑了

文本搜索

• 方法一

在单个文本中进行文本搜索的方式为按ctrl+f打开搜索框，输入搜索内容，回车进行文本搜索，还可以在搜索框右边的箭头实现多个搜索结果的向前/后切换，当然f3和shift+f3也能完成相同的事情。

• 方法二

选中某一段文字，按ctrl+f3即可对该选中文本进行搜索

• 方法三

如果你了解正则表达式，把搜索框右边的正则匹配模式打开，可以更加方便搜索到你要找的内容

• 方法四

有时候我们只是在ts代码中找某一个变量的引用，这时候只需要选中该变量，按f7即可对该变量的引用进行快速的搜索

• 方法五

在很多情况下，我们并不知道我们想要找的某一段文本是在哪个文件里，一个项目中的文件上面甚至上千，如何能够快速找到我们想要找的文件呢，vscode提供的强大的搜索功能非常有用。先选中一段文本（或事先复制好一段文本），按键盘ctrl+shift+f,打开左侧搜索面板，如果是事先选中了某一段文字，vscode会自动将你选中的某一段文本直接作为搜索内容填好（这在某些情形下非常有用，比如你的系统剪切板中已经复制好一段文本，而你后面还要用到它），你只需要按一下回车即可在整个项目中进行搜索。注意我们经常会用到的一个功能，是在某个目录下搜索，这时候我们可以在files to include中填写我们想要搜索的路径，然后再进行搜索。

• 方法六

进行整个项目搜索的时候如果我们只是要在某一个目录下进行搜索，可以在左侧的文件列表中选中该目录，右键选择Find in folder也可以方便地进行对某一个目录的搜索。

替换

替换与搜索非常相似，一般我们都需要先将要替换的内容搜索出来，然后再将该内容替换为其他值。在这需要提及的是，我们有时候要做批量替换的时候有时会想故意排除一些文件，甚至某些文件中的特定行。这时候可以先进行搜索，然后在搜索结果列表中，用鼠标放上去，右边会显示两个按钮，一个是对该文件中的搜索结果进行全部替换，一个是个叉号，通过点击叉号，可以将该搜索结果进行排除。

多行移动

有时候我们需要将选中的行的代码上移或下移到离它不远的位置，如果我们不想通过剪切，粘贴进行的话，可以试试这个功能：选中一行或多行文本，按alt+up或alt+down即可将选中行的文本进行上下移动

多行复制

经常有些代码在不同行之前相似度非常接近，这时候我们往往不会重复去用键盘敲出这些代码，而是将这部分代码复制后再对它们进行修改。这时候如果你不想用复制粘贴来实现的话，可以试试这个功能，它在很多时候比复制粘贴要快：选中一行或多行代码，按ctrl+up或ctrl+down即可将选中行的文本快速复制到被选中代码的上方或下方。

快速打开文件

有时候我们的项目非常大，里面的文件非常多，如果我们要通过目录查找的方式找文件，会非常耗时，这时可以通过按ctrl+p打开一个搜索框，在搜索框中输入（有时候是粘贴）文件名，即可快速找到文件并可以打开它。

打开最近的项目

如果你参与了多个项目的开发，经常会在不同的项目中切换来切换去，这个时候可以按alt+r打开最近的项目列表，还能够通过输入一些关键字对项目名称进行搜索，从而快速找到以前打开过的某个项目