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"
}
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容