高效使用VSCode进行开发

VSCode简介

VSCode是微软推出的一款产品，他不是一款强大的IDE，而是支持按需扩展各种插件的轻量级编辑器，可以看作是Visual Studio的精简版，界面风格相同。竞争对手会是Sublime、Atom，提供丰富的插件和优雅的编辑界面，内置多项丰富的功能，包括版本控制、插件管理、代码调试、多项目管理(v1.8)等。

为什么选择VSCode

之前一直很排斥微软的产品，特别是IE和.Net。不过VSCode的确是微软的一款良心作品，轻巧、简洁、高效。以前用过很多编辑器和IDE，从最开始的Notepad++，到后面功能强大得无敌的eclipse、Zend Studio、HBuilder等E系的产品，不过感觉速度特变慢，又大又臃肿，后面接触了IntelliJ的相关产品(webStrom、phpStrom、Android Studio等等)，感觉速度快多了，也很强大，但是却不支持工作区多开，这点特别不爽。一圈转下来，感觉最好的莫过于Sublime。直到最近开始了解VSCode，开始慢慢喜欢上了这款编辑器，也对微软的产品有了一个全新的认识。

使用指南

用户代码片段

文件 - 首选项 - 用户代码片段 - 选择相关语言

编辑此json文件即可，例:

{
  "Print to console": {
    "prefix": "log",
    "body": [
      "console.log($1)$2"
    ],
    "description": "Log output to console"
  }
}

之后只要在js代码中使用log，即可输出console.log()，光标会在$1的位置停留，再按下tab键跳转到结尾部分。

VSCode快捷键

窗口操作

Ctrl + Shift + N # 新建窗口
Ctrl + Shift + W # 关闭窗口

编辑器控制

Ctrl + N # 新建文件
Ctrl + Tab # 打开的文件间切换
Ctrl + \ # 新建编辑器
Ctrl + 1，Ctrl + 2，Ctrl + 3 # 编辑器切换
Ctrl + K + Right # 编辑器切换

格式调整

Ctrl + [，ctrl + ] # 代码缩进
Ctrl + Shift + [，Ctrl + Shift + ] # 折叠打开代码块
Alt + Shift + F # 代码格式化
Alt + Up，Alt + Down # 上移一行，下移一行
Ctrl + Enter # 在当前行后面插入空行
Ctrl + Shift + Enter # 在当前行前面插入空行

编辑

Ctrl + C，Ctrl + V，Ctrl + X # 如果不选中，默认复制或剪切一整行
Ctrl + Delete，Ctrl + Backspace # 删除一个单词
Ctrl + Shift + K # 删除当前选中行
Ctrl + Shift + D # 复制当前行并插入到下一行
Ctrl + / # 单行注释
Ctrl + Shift + / # 多行注释

光标

Ctrl + 鼠标左键 # 多点编辑
Ctrl + I # 选择当前行
Ctrl + D # 选中下一个匹配的单词
Ctrl + U # 回退上一个光标操作
Alt + Shift + Up，Alt + Shift + Down # 光标向上或向下多选一行
Ctrl + Home，Ctrl + End # 光标转到文件头部或尾部
Home，End # 光标转到行首或行尾

查找/替换

Ctrl + Shift + F # 全局搜索
Ctrl + H # 替换
Ctrl + F # 查找
Ctrl + G # 转到指定行

重构

F12 # 转到定义
Shift + F12 # 列出所有引用
F2 # 重命名

显示

F11 # 全屏显示
Ctrl + =/+/- # 缩放
Ctrl + B # 打开、隐藏侧边栏
Ctrl + ` # 打开、隐藏终端

VSCode命令窗口

打开命令窗口

Ctrl + Shift + P

基础

format # 代码格式化

emmet

Emmet: Expand Abbreviation # 代码展开

自定义编辑器配置片段

{
    // flies
    "files.autoSave": "afterDelay",
    "files.autoSaveDelay": 1000,
    "files.associations": {
        "*.lock": "yaml",
        "*.ejs": "ejs",
        "*.wxss": "css"
    },
    // editor
    "editor.wordSeparators": "`~!@#$%^&*()=+[{]}\\|;:'\",.<>/?",
    "editor.fontSize": 24,
    "editor.tabSize": 2,
    "editor.cursorStyle": "line",
    "editor.multiCursorModifier": "ctrlCmd",
    "editor.renderWhitespace": "all",
    "editor.wordWrap": "bounded",
    "editor.tabCompletion": true,
    "editor.snippetSuggestions": "top",
    "editor.quickSuggestions": {
        "other": true,
        "comments": true,
        "strings": true
    },
    // eslint
    "eslint.options": {
        "plugins": ["html"]
    },
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        "html",
        "vue"
    ],
    "vetur.validation.template": false,
    // window
    "window.openFilesInNewWindow": "on",
    "window.restoreWindows": "all",
    "window.title": "${rootName}${separator}${dirty}${activeEditorShort}${separator}${appName}",
    // other
    "workbench.iconTheme": "material-icon-theme",
    "sublimeTextKeymap.promptV3Features": true,
    "terminal.integrated.shell.windows": "C:\\Program Files\\Git\\bin\\bash.exe",
    "terminal.integrated.cursorStyle": "line",
    "window.zoomLevel": 0,
    "git.enableSmartCommit": true,"emmet.showSuggestionsAsSnippets": true,
    "emmet.triggerExpansionOnTab": true,
    "workbench.startupEditor": "welcomePage",
    "gitlens.advanced.messages": {
        "suppressCommitHasNoPreviousCommitWarning": false,
        "suppressCommitNotFoundWarning": false,
        "suppressFileNotUnderSourceControlWarning": false,
        "suppressGitVersionWarning": false,
        "suppressLineUncommittedWarning": false,
        "suppressNoRepositoryWarning": false,
        "suppressUpdateNotice": false,
        "suppressWelcomeNotice": true
    },
    "fileheader.Author": "Quanzaiyu",
    "emojisense.languages": {
        "markdown": true,
        "plaintext": {
          "markupCompletionsEnabled": false,
          "emojiDecoratorsEnabled": false
        },
        "git-commit": true,
        "html": true
      },
    "editor.matchBrackets": false
}

参考资料

• 博客园 - 玄奘Plus : VSCode 插件

• 知乎专栏 : VS Code 使用小技巧

• 官方文档（英文版）：Documentation for Visual Studio Code

• 中文文档（未完成）：GitHub - jeasonstudio/CN-VScode-Docs: VScode说明文档翻译