Visual Studio Code 最好的功能蔑舞、插件和設(shè)置

Visual Studio Code 是由 Microsoft(微軟) 發(fā)布的一個免費(fèi)的,開源的跨平臺文本編輯器勇婴。他們基于在線編輯 Visual Studio Online (代號為 “Monaco”)肛走,并結(jié)合 GitHub 的 Electron 實(shí)現(xiàn)的一個跨平臺編輯器漓雅。他們在為程序員創(chuàng)建一個快速且高效工作環(huán)境方面取得巨大進(jìn)步。

  • 提供智能補(bǔ)全功能的智能感知 朽色。
  • 編輯器內(nèi)置代碼 調(diào)試工具故硅。
  • 側(cè)邊欄內(nèi)置 Git 命令
  • 處理多實(shí)例能力的 集成終端纵搁。
  • 通過擴(kuò)展和主題定制能力吃衅。
  • 下載 VS Code Insiders,可以獲取 每天構(gòu)建的最新版本

為什么選擇 Visual Studio Code

為什么選擇 Visual Studio Code

你在 VS Code 中找到的每個功能都完成一項(xiàng)出色的工作腾誉,構(gòu)建了一些簡單的功能集徘层,包括語法高亮峻呕、智能補(bǔ)全、集成 git 和編輯器內(nèi)置調(diào)試工具等趣效,將使你開發(fā)更高效瘦癌。

所有你所找到的 包(packages) 都是用 JavaScript 構(gòu)建的,因此任何人都可以輕松地編寫自己的擴(kuò)展包跷敬。您可以在這里找到有關(guān)擴(kuò)展的文檔: https://code.visualstudio.com/docs/extensions/overview

功能 Features

VS Code 最重要的功能是它的側(cè)邊欄讯私,它集成了在編碼和重構(gòu)時會用到的核心功能,你需要的其他任何功能都可以通過安裝擴(kuò)展來滿足西傀。

VS Code 側(cè)邊欄

智能感知 IntelliSense

一個非常有用的語法高亮和自動完成功能斤寇,提供了基于變量類型、函數(shù)定義和導(dǎo)入模塊的自動補(bǔ)全功能拥褂。

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

Visual Studio Code 自動補(bǔ)全

調(diào)試 Debugging

內(nèi)置調(diào)試器可以通過添加斷點(diǎn)和觀察器進(jìn)行調(diào)試娘锁,以幫助你加快編輯,編譯等饺鹃。
默認(rèn)情況下莫秆,它支持 NodeJS ,并且可以調(diào)試任何可以被轉(zhuǎn)換為 JavaScript 的語言(注:比如悔详,TypeScript 等)镊屎,但像 C++ 或 Python 這樣的其他運(yùn)行時則需要安裝擴(kuò)展才能進(jìn)行調(diào)試。

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

Visual Studio Code 代碼調(diào)試

內(nèi)置 Git

VS Code 內(nèi)置了一個 Git GUI茄螃,支持最常用 Git 命令缝驳,這使得您可以很容易地看到您在項(xiàng)目中所做的更改。

Visual Studio Code 內(nèi)置 Git GUI

主題及配色方案實(shí)時預(yù)覽

當(dāng)你改變 VS Code 的主題及配色方案時责蝠,你可以在選擇一個,以實(shí)時預(yù)覽它們萎庭。

實(shí)時預(yù)覽 Visual Studio Code 的主題及配色方案

終端命令行工具 Terminal

VS Code 提供了一個功能齊全的集成終端霜医,可以讓你選擇終端,并且運(yùn)行常用命令驳规。

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

圖標(biāo)

跟主題及配色方案的修改類似肴敛,VS Code 也提供了圖標(biāo)主題的修改功能,如下所示:

VS Code 圖標(biāo)

使 VS Code 更容易上手的插件

下面的插件能夠讓你很方便的從你以前最喜歡的編輯器切換到 VS Code 吗购,比如映射你熟悉的鍵盤快捷鍵医男。

由于編輯器的相對最近發(fā)布的 VS Code 中也新增了像 minimap 這樣的功能,但 VS Code 的擴(kuò)展插件顯然發(fā)展的更快捻勉。

Atom Keymap (Atom 鍵盤快捷鍵)

在安裝這個插件并重啟 VS Code 之后镀梭,將使你的 VS Code 中可以使用 Atom 的鍵盤快捷鍵。

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

Visual Studio Code 中使用 Atom 鍵盤快捷鍵

Git Easy

這個插件可以導(dǎo)入下面的 Git 命令踱启,以便您可以在命令面板中使用报账。和 Atom 中實(shí)用非常相似研底。

  • 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 中導(dǎo)入 Sublime Text 的鍵盤快捷鍵透罢“窕蓿可以通過 VS Code 的強(qiáng)大智能感知來使用熟悉的 Sublime Text 鍵盤快捷鍵。

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

Visual Studio Code 中使用 Sublime 鍵盤快捷鍵

最佳插件推薦

VS Code 的使用并不需要很多的插件插件羽圃,但下面介紹的插件肯定會讓你變得更有效率乾胶。我介紹的以下插件是一些最有用的插件。

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

AutoFileName (文件路徑自動補(bǔ)全插件)

當(dāng)你需要 require 本地文件時朽寞,這個插件將為你提供基于你輸入的文件路徑的自動補(bǔ)全的選項(xiàng)识窿。

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

Visual Studio Code 文件路徑自動補(bǔ)全插件 AutoFileName

ESLint

添加對 ESLint 的支持,并在安裝和重啟 VS Code 后自動開始工作愁憔。

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

Visual Studio Code ESLint插件

JavaScript (ES6) Code Snippets (代碼片段插件)
用代碼片段加快 ES6 開發(fā)速度腕扶,例如輸入 imd 可以自動生成如下代碼:

JavaScript 代碼:

import { } from 'somewhere';

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

Project Manager (項(xiàng)目管理器插件)

簡單的項(xiàng)目管理器,可以在你的編輯器中快速切換項(xiàng)目。

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

Visual Studio Code 項(xiàng)目管理器插件 Project Manager

Sort Lines (代碼行排序插件)

這個插件可以對選中的代碼行進(jìn)行排序吨掌。也提供不區(qū)分大小寫半抱、反向和唯一等排序功能。

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

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

Wallaby.js (測試插件)

一個高級的連續(xù)測試運(yùn)行器膜宋,當(dāng)您對您正在工作的文件進(jìn)行測試時窿侈,它會在你的編輯器中創(chuàng)建通過測試或測試失敗的視覺反饋。

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

Visual Studio Code 測試插件 Wallaby.js

Sync Settings (設(shè)置同步插件)

你很有可能在多臺電腦上進(jìn)行編碼工作秋茫。在電腦上移植你的插件和設(shè)置是輕而易舉的事史简,這要?dú)w功于 Shan Ali Khan 的設(shè)置同步擴(kuò)展。

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 的支持圆兵,因此當(dāng)您格式化文件時,它會引用此約定枢贿。

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

Document This (JSDoc注釋插件)

在 TypeScript 和 JavaScript 文件中自動生成詳細(xì)的 JSDoc 注釋殉农。

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

Visual Studio Code JSDoc注釋插件 Document This

npm Intellisense (npm 模塊導(dǎo)入插件)

VS Code 擴(kuò)展,在 import 導(dǎo)入語句中自動完成npm 模塊局荚。

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

Visual Studio Code npm 模塊導(dǎo)入插件 npm Intellisense

Align (代碼對齊插件)
對齊文本超凳,使代碼根據(jù) =,:等對齊耀态。

對齊前:

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 (側(cè)邊欄圖標(biāo)插件)

可以更換側(cè)邊欄中漂亮的圖標(biāo)现斋。

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

Visual Studio Code 側(cè)邊欄圖標(biāo)插件 vscode-icons
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市偎蘸,隨后出現(xiàn)的幾起案子庄蹋,更是在濱河造成了極大的恐慌,老刑警劉巖迷雪,帶你破解...
    沈念sama閱讀 216,372評論 6 498
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件限书,死亡現(xiàn)場離奇詭異,居然都是意外死亡章咧,警方通過查閱死者的電腦和手機(jī)倦西,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,368評論 3 392
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來赁严,“玉大人扰柠,你說我怎么就攤上這事√墼迹” “怎么了卤档?”我有些...
    開封第一講書人閱讀 162,415評論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長程剥。 經(jīng)常有香客問我劝枣,道長,這世上最難降的妖魔是什么织鲸? 我笑而不...
    開封第一講書人閱讀 58,157評論 1 292
  • 正文 為了忘掉前任舔腾,我火速辦了婚禮,結(jié)果婚禮上搂擦,老公的妹妹穿的比我還像新娘稳诚。我一直安慰自己,他們只是感情好盾饮,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,171評論 6 388
  • 文/花漫 我一把揭開白布采桃。 她就那樣靜靜地躺著懒熙,像睡著了一般丘损。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上工扎,一...
    開封第一講書人閱讀 51,125評論 1 297
  • 那天徘钥,我揣著相機(jī)與錄音,去河邊找鬼肢娘。 笑死呈础,一個胖子當(dāng)著我的面吹牛舆驶,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播而钞,決...
    沈念sama閱讀 40,028評論 3 417
  • 文/蒼蘭香墨 我猛地睜開眼沙廉,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了臼节?” 一聲冷哼從身側(cè)響起撬陵,我...
    開封第一講書人閱讀 38,887評論 0 274
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎网缝,沒想到半個月后巨税,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,310評論 1 310
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡粉臊,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,533評論 2 332
  • 正文 我和宋清朗相戀三年草添,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片扼仲。...
    茶點(diǎn)故事閱讀 39,690評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡远寸,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出犀盟,到底是詐尸還是另有隱情而晒,我是刑警寧澤,帶...
    沈念sama閱讀 35,411評論 5 343
  • 正文 年R本政府宣布阅畴,位于F島的核電站倡怎,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏纽哥。R本人自食惡果不足惜钠乏,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,004評論 3 325
  • 文/蒙蒙 一春塌、第九天 我趴在偏房一處隱蔽的房頂上張望晓避。 院中可真熱鬧,春花似錦俏拱、人聲如沸搞隐。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,659評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至郊楣,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間橘荠,已是汗流浹背匀泊。 一陣腳步聲響...
    開封第一講書人閱讀 32,812評論 1 268
  • 我被黑心中介騙來泰國打工伦吠, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留芯勘,地道東北人安疗。 一個月前我還...
    沈念sama閱讀 47,693評論 2 368
  • 正文 我出身青樓怖现,卻偏偏與公主長得像,于是被迫代替她去往敵國和親玉罐。 傳聞我的和親對象是個殘疾皇子屈嗤,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,577評論 2 353

推薦閱讀更多精彩內(nèi)容