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閱讀 228,443評論 6 532
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 98,530評論 3 416
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 176,407評論 0 375
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 62,981評論 1 312
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 71,759評論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,204評論 1 324
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,263評論 3 441
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,415評論 0 288
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 48,955評論 1 336
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,782評論 3 354
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 42,983評論 1 369
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,528評論 5 359
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,222評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,650評論 0 26
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,892評論 1 286
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,675評論 3 392
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 47,967評論 2 374

推薦閱讀更多精彩內容