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
你在 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ò)展來滿足西傀。
智能感知 IntelliSense
一個非常有用的語法高亮和自動完成功能斤寇,提供了基于變量類型、函數(shù)定義和導(dǎo)入模塊的自動補(bǔ)全功能拥褂。
https://code.visualstudio.com/docs/editor/intellisense
調(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
內(nèi)置 Git
VS Code 內(nèi)置了一個 Git GUI茄螃,支持最常用 Git 命令缝驳,這使得您可以很容易地看到您在項(xiàng)目中所做的更改。
主題及配色方案實(shí)時預(yù)覽
當(dāng)你改變 VS Code 的主題及配色方案時责蝠,你可以在選擇一個,以實(shí)時預(yù)覽它們萎庭。
終端命令行工具 Terminal
VS Code 提供了一個功能齊全的集成終端霜医,可以讓你選擇終端,并且運(yùn)行常用命令驳规。
圖標(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
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
最佳插件推薦
VS Code 的使用并不需要很多的插件插件羽圃,但下面介紹的插件肯定會讓你變得更有效率乾胶。我介紹的以下插件是一些最有用的插件。
插件市場: https://marketplace.visualstudio.com/VSCode
AutoFileName (文件路徑自動補(bǔ)全插件)
當(dāng)你需要 require 本地文件時朽寞,這個插件將為你提供基于你輸入的文件路徑的自動補(bǔ)全的選項(xiàng)识窿。
https://marketplace.visualstudio.com/items?itemName=JerryHong.autofilename
ESLint
添加對 ESLint 的支持,并在安裝和重啟 VS Code 后自動開始工作愁憔。
https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-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
Sort Lines (代碼行排序插件)
這個插件可以對選中的代碼行進(jìn)行排序吨掌。也提供不區(qū)分大小寫半抱、反向和唯一等排序功能。
https://marketplace.visualstudio.com/items?itemName=Tyriar.sort-lines
Wallaby.js (測試插件)
一個高級的連續(xù)測試運(yùn)行器膜宋,當(dāng)您對您正在工作的文件進(jìn)行測試時窿侈,它會在你的編輯器中創(chuàng)建通過測試或測試失敗的視覺反饋。
https://marketplace.visualstudio.com/items?itemName=WallabyJs.wallaby-vscode
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
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
npm Intellisense (npm 模塊導(dǎo)入插件)
VS Code 擴(kuò)展,在 import 導(dǎo)入語句中自動完成npm 模塊局荚。
https://marketplace.visualstudio.com/items?itemName=christian-kohler.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