Visual Studio Code 编辑器

• 介绍
• 安装
• VSCode 快捷键
• 推荐插件
  • AutoFileName (文件路径自动补全插件)
  • JavaScript (ES6) Code Snippets (代码片段插件)
  • Project Manager (项目管理器插件)
  • Sort Lines (代码行排序插件)
  • Wallaby.js (测试插件)
  • Sync Settings (设置同步插件)
  • Git History (Git 历史记录插件)
  • EditorConfig (代码格式化插件)
  • Document This (JSDoc注释插件)
  • npm Intellisense (npm 模块导入插件)
  • Align (代码对齐插件)
  • change-case (命名格式插件)
  • vscode-icons (侧边栏图标插件)
• 用户自定义设置

---

Visual Studio Code 编辑器

介绍

Visual Studio Code是一款免费开源的现代化轻量级代码编辑器，支持几乎所有主流的开发语言的语法高亮、智能代码补全、自定义热键、括号匹配、代码片段、代码对比 Diff、GIT 等特性，支持插件扩展，并针对网页开发和云端应用开发做了优化。软件跨平台支持 Win、Mac以及 Linux，运行流畅，可谓是微软的良心之作。

安装

Visual Studio Code官方站点下载安装即可。

VSCode 快捷键

最重要的功能就是 F1 或 Ctrl+Shift+P打开的命令面板了，在这个命令框里可以执行VSCode的任何一条命令，可以查看每条命令对应的快捷键，甚至可以关闭这个编辑器。

• 按一下Backspace会进入到Ctrl+P模式里。

• 在Ctrl+P下输入>又可以回到主命令框 Ctrl+Shift+P模式。

• 在Ctrl+P窗口下可以

  • 直接输入文件名，快速打开文件
  • ?列出当前可执行的动作
  • !显示Errors或Warnings，也可以Ctrl+Shift+M
  • : 跳转到行数，也可以Ctrl+G直接进入
  • @跳转到symbol（搜索变量或者函数），也可以Ctrl+Shift+O直接进入
  • @:根据分类跳转symbol，查找属性或函数，也可以Ctrl+Shift+O后输入:进入
  • # 根据名字查找symbol，也可以Ctrl+T

• 常用快捷键

  • 编辑器与窗口管理

    • 同时打开多个窗口（查看多个项目）
      • 打开一个新窗口： Ctrl+Shift+N
      • 关闭窗口： Ctrl+Shift+W
    • 同时打开多个编辑器（查看多个文件）
      • 新建文件Ctrl+N
      • 历史打开文件之间切换 Ctrl+Tab，Alt+Left，Alt+Right
      • 切出一个新的编辑器（最多3个）Ctrl+\

  • 代码编辑

    • 格式调整
      • 代码行缩进Ctrl+[，Ctrl+]
      • 折叠打开代码块Ctrl+Shift+[， Ctrl+Shift+]
      • Ctrl+C Ctrl+V如果不选中，默认复制或剪切一整行
      • 代码格式化：Shift+Alt+F，或Ctrl+Shift+P后输入format code
      • 修剪空格Ctrl+Shift+X
      • 上下移动一行：Alt+Up 或Alt+Down
      • 向上向下复制一行： Shift+Alt+Up或Shift+Alt+Down
      • 在当前行下边插入一行Ctrl+Enter
      • 在当前行上方插入一行Ctrl+Shift+Enter
    • 查找替换
      • 查找 Ctrl+F
      • 查找替换 Ctrl+H
      • 整个文件夹中查找 Ctrl+Shift+F
      • 匹配符：
        • * 匹配路径中的一个或多个字符
        • ? 匹配路径中的一个字符
        • ** 匹配任意数量的路径，包括没有
        • {} 匹配符合条件的所有组合（例如{**/*.html，**/*.txt}匹配所有HTML和txt文件）
        • [] 匹配一系列声明的字符（例如example.[0-9]匹配example.0,example.1, …)

  • 显示相关

    • 全屏：F11
    • 放大/缩小：Ctrl + =/Ctrl + -
    • 侧边栏显/隐：Ctrl+B
    • 侧边栏4大功能显示：
      • Show Explorer Ctrl+Shift+E
      • Show Search Ctrl+Shift+F
      • Show Git Ctrl+Shift+G
      • Show Debug Ctrl+Shift+D
      • Show Output Ctrl+Shift+U
    • 预览markdown Ctrl+Shift+V

  • 自动保存：File-> AutoSave ，或者Ctrl+Shift+P，输入 auto

  • 皮肤预览：F1后输入 theme回车，然后上下键即可预览

  • 设置中文语言：ctrl+shift+p或者F1搜索Configore Display Language设置 zh-cn 关闭软件重启。
    

    

    configlanguage.png

    tips:如果重启菜单还是英文的，在商店查看已安装的插件，把中文插件Chinese重新安装一遍，然后重启软件。

推荐插件

• AutoFileName (文件路径自动补全插件)
  当你需要 require 本地文件时，这个插件将为你提供基于你输入的文件路径的自动补全的选项。

• JavaScript (ES6) Code Snippets (代码片段插件)
  用代码片段加快 ES6 开发速度，例如输入 imd 可以自动生成如下代码：

    import { } from 'somewhere';
  

• Project Manager (项目管理器插件)
  简单的项目管理器,可以在你的编辑器中快速切换项目。

• Sort Lines (代码行排序插件)
  这个插件可以对选中的代码行进行排序。也提供不区分大小写、反向和唯一等排序功能。

  
  
  sort-lines.gif

• Wallaby.js (测试插件)
  一个高级的连续测试运行器，当您对您正在工作的文件进行测试时，它会在你的编辑器中创建通过测试或测试失败的视觉反馈。

  
  
  

  Wallaby.gif

• Sync Settings (设置同步插件)
  你很有可能在多台电脑上进行编码工作。在电脑上移植你的插件和设置是轻而易举的事，这要归功于 Shan Ali Khan的设置同步扩展。

• Git History (Git 历史记录插件)
  可视化的 Git 历史记录插件。

  
  
  Git History.gif

• EditorConfig (代码格式化插件)
  添加对 EditorConfig 的支持，因此当您格式化文件时，它会引用此约定。

• Document This (JSDoc注释插件)
  在 TypeScript 和 JavaScript 文件中自动生成详细的 JSDoc 注释。

  
  
  

  Document This.gif

• npm Intellisense (npm 模块导入插件)
  VS Code 扩展，在 import 导入语句中自动完成npm 模块。

  
  
  

  npm Intellisense.gif

• Align (代码对齐插件)
  对齐文本，使代码根据=，:等对齐。

  对齐前：

    var test = 'string';
    var another = 10;
    var small = 10 * 10;
  

  对齐后：

    var test    = 'string';
    var another = 10;
    var small   = 10 * 10;
  

• change-case (命名格式插件)
  快速修改突出显示的选中文本的命名格式。 camelCase（骆驼拼命名），PascalCase（首字母大写），kebab-case（中划线命名），underscore_delimited（下划线命名），CONSTANT（大写命名）等。

• vscode-icons (侧边栏图标插件)
  可以更换侧边栏中漂亮的图标。

用户自定义设置

• 文件File ->首选项Preferences ->设置，打开自定义settings.json,几乎所有设定都在settings.json里

• User settings 用户设置

  • User settings 是全局设置，任何vs Code打开的项目都会依此配置。
  • 默认存储在:
    • Windows: %APPDATA%\Code\User\settings.json
    • Mac: $HOME/Library/Application Support/Code/User/settings.json
    • Linux: $HOME/.config/Code/User/settings.json

• Workspace settings 工作区设置

  • Workspace settings 是本工作区的设置，会覆盖上边的配置
  • 存储在工作区的.vocode文件夹下。

例如可以修改让vscode认识.glsl扩展名

// Configure file associations to languages (e.g. "*.extension": "html"). These have precedence over the default associations of the languages installed.
"files.associations": {
    "*.glsl": "shaderlab"
}