Visual Studio Code 最好的功能、插件和设置

Visual Studio Code 是由 Microsoft(微软) 发布的一个免费的,开源的跨平台文本编辑器。他们基于在线编辑 Visual Studio Online (代号为 “Monaco”),并结合 GitHub 的 Electron 实现的一个跨平台编辑器。他们在为程序员创建一个快速且高效工作环境方面取得巨大进步。

  • 提供智能补全功能的智能感知
  • 编辑器内置代码 调试工具
  • 侧边栏内置 Git 命令
  • 处理多实例能力的 集成终端
  • 通过扩展和主题定制能力
  • 下载 VS Code Insiders,可以获取 每天构建的最新版本

为什么选择 Visual Studio Code

为什么选择 Visual Studio Code

你在 VS Code 中找到的每个功能都完成一项出色的工作,构建了一些简单的功能集,包括语法高亮、智能补全、集成 git 和编辑器内置调试工具等,将使你开发更高效。

所有你所找到的 包(packages) 都是用 JavaScript 构建的,因此任何人都可以轻松地编写自己的扩展包。您可以在这里找到有关扩展的文档: https://code.visualstudio.com/docs/extensions/overview

功能 Features

VS Code 最重要的功能是它的侧边栏,它集成了在编码和重构时会用到的核心功能,你需要的其他任何功能都可以通过安装扩展来满足。

VS Code 侧边栏

智能感知 IntelliSense

一个非常有用的语法高亮和自动完成功能,提供了基于变量类型、函数定义和导入模块的自动补全功能。

https://code.visualstudio.com/docs/editor/intellisense

Visual Studio Code 自动补全

调试 Debugging

内置调试器可以通过添加断点和观察器进行调试,以帮助你加快编辑,编译等。
默认情况下,它支持 NodeJS ,并且可以调试任何可以被转换为 JavaScript 的语言(注:比如,TypeScript 等),但像 C++ 或 Python 这样的其他运行时则需要安装扩展才能进行调试。

https://code.visualstudio.com/Docs/editor/debugging

Visual Studio Code 代码调试

内置 Git

VS Code 内置了一个 Git GUI,支持最常用 Git 命令,这使得您可以很容易地看到您在项目中所做的更改。

Visual Studio Code 内置 Git GUI

主题及配色方案实时预览

当你改变 VS Code 的主题及配色方案时,你可以在选择一个,以实时预览它们。

实时预览 Visual Studio Code 的主题及配色方案

终端命令行工具 Terminal

VS Code 提供了一个功能齐全的集成终端,可以让你选择终端,并且运行常用命令。

Visual Studio Code 终端命令行工具 Terminal
Visual Studio Code 终端命令行工具 Terminal

图标

跟主题及配色方案的修改类似,VS Code 也提供了图标主题的修改功能,如下所示:

VS Code 图标

使 VS Code 更容易上手的插件

下面的插件能够让你很方便的从你以前最喜欢的编辑器切换到 VS Code ,比如映射你熟悉的键盘快捷键。

由于编辑器的相对最近发布的 VS Code 中也新增了像 minimap 这样的功能,但 VS Code 的扩展插件显然发展的更快。

Atom Keymap (Atom 键盘快捷键)

在安装这个插件并重启 VS Code 之后,将使你的 VS Code 中可以使用 Atom 的键盘快捷键。

https://marketplace.visualstudio.com/items?itemName=ms-vscode.atom-keybindings

Visual Studio Code 中使用 Atom 键盘快捷键

Git Easy

这个插件可以导入下面的 Git 命令,以便您可以在命令面板中使用。和 Atom 中实用非常相似。

  • Git Easy: Init
  • Git Easy: Add Origin
  • Git Easy: Add Remote
  • Git Easy: Add File/Directory
  • Git Easy: Add All Modified
  • Git Easy: Commit
  • Git Easy: Pull Current Branch from Origin
  • Git Easy: Push Current Branch to Origin
  • Git Easy: Push Current Branch (to any remote)
  • Git Easy: Status
  • Git Easy: Create New Branch
  • Git Easy: Change/Checkout Existing Branch
  • Git Easy: Log All
  • Git Easy: Log Current File

https://marketplace.visualstudio.com/items?itemName=bibhasdn.git-easy

Sublime Keymap (Sublime 键盘快捷键)

在安装这个插件和重启 VS Code 之后,将在 VS Code 中导入 Sublime Text 的键盘快捷键。可以通过 VS Code 的强大智能感知来使用熟悉的 Sublime Text 键盘快捷键。

https://marketplace.visualstudio.com/items?itemName=ms-vscode.sublime-keybindings

Visual Studio Code 中使用 Sublime 键盘快捷键

最佳插件推荐

VS Code 的使用并不需要很多的插件插件,但下面介绍的插件肯定会让你变得更有效率。我介绍的以下插件是一些最有用的插件。

插件市场: https://marketplace.visualstudio.com/VSCode

AutoFileName (文件路径自动补全插件)

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

https://marketplace.visualstudio.com/items?itemName=JerryHong.autofilename

Visual Studio Code 文件路径自动补全插件 AutoFileName

ESLint

添加对 ESLint 的支持,并在安装和重启 VS Code 后自动开始工作。

https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

Visual Studio Code ESLint插件

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

JavaScript 代码:

import { } from 'somewhere';

https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets

Project Manager (项目管理器插件)

简单的项目管理器,可以在你的编辑器中快速切换项目。

https://marketplace.visualstudio.com/items?itemName=alefragnani.project-manager

Visual Studio Code 项目管理器插件 Project Manager

Sort Lines (代码行排序插件)

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

https://marketplace.visualstudio.com/items?itemName=Tyriar.sort-lines

Visual Studio Code 代码行排序插件 Sort Lines

Wallaby.js (测试插件)

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

https://marketplace.visualstudio.com/items?itemName=WallabyJs.wallaby-vscode

Visual Studio Code 测试插件 Wallaby.js

Sync Settings (设置同步插件)

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

https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync

Git History (Git 历史记录插件)

可视化的 Git 历史记录插件。

https://marketplace.visualstudio.com/items?itemName=donjayamanne.githistory

Visual Studio Code Git 历史记录插件 Git History

EditorConfig (代码格式化插件)

添加对 EditorConfig 的支持,因此当您格式化文件时,它会引用此约定。

https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig

Document This (JSDoc注释插件)

在 TypeScript 和 JavaScript 文件中自动生成详细的 JSDoc 注释。

https://marketplace.visualstudio.com/items?itemName=joelday.docthis

Visual Studio Code JSDoc注释插件 Document This

npm Intellisense (npm 模块导入插件)

VS Code 扩展,在 import 导入语句中自动完成npm 模块。

https://marketplace.visualstudio.com/items?itemName=christian-kohler.npm-intellisense

Visual Studio Code npm 模块导入插件 npm Intellisense

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

对齐前:

JavaScript 代码:

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

对齐后:

JavaScript 代码:

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

amVim (vim 插件)

目前 VS Code 中的最好用的 vim 插件。不是下载最多的 vim 插件,但它使用的是多指针,不像哪些下载最多的插件。

https://marketplace.visualstudio.com/items?itemName=auiworks.amvim

change-case (命名格式插件)

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

https://marketplace.visualstudio.com/items?itemName=zhengxiaoyao0716.intelligence-change-case

vscode-icons (侧边栏图标插件)

可以更换侧边栏中漂亮的图标。

https://marketplace.visualstudio.com/items?itemName=robertohuertasm.vscode-icons

Visual Studio Code 侧边栏图标插件 vscode-icons
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,948评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,371评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,490评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,521评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,627评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,842评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,997评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,741评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,203评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,534评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,673评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,339评论 4 330
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,955评论 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,770评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,000评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,394评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,562评论 2 349

推荐阅读更多精彩内容