1. 程式人生 > >Visual Studio Code 最好的功能、外掛和設定(轉)

Visual Studio Code 最好的功能、外掛和設定(轉)

這裡寫圖片描述

Visual Studio Code 是由 Microsoft(微軟) 釋出的一個免費的,開源的跨平臺文字編輯器。他們基於線上編輯 Visual Studio Online (代號為 “Monaco”),並結合 GitHub 的 Electron 實現的一個跨平臺編輯器。他們在為程式設計師建立一個快速且高效工作環境方面取得巨大進步。

  • 提供智慧補全功能的智慧感知 。
  • 編輯器內建程式碼 除錯工具。
  • 側邊欄內建 Git 命令。
  • 處理多例項能力的 整合終端。
  • 通過擴充套件和主題的 定製能力。

這裡寫圖片描述

你在 VS Code 中找到的每個功能都完成一項出色的工作,構建了一些簡單的功能集,包括語法高亮、智慧補全、整合 git 和編輯器內建除錯工具等,將使你開發更高效。

功能 Features

VS Code 最重要的功能是它的側邊欄,它集成了在編碼和重構時會用到的核心功能,你需要的其他任何功能都可以通過安裝擴充套件來滿足。

這裡寫圖片描述

智慧感知 Features

一個非常有用的語法高亮和自動完成功能,提供了基於變數型別、函式定義和匯入模組的自動補全功能。

這裡寫圖片描述

除錯 Debugging

內建偵錯程式可以通過新增斷點和觀察器進行除錯,以幫助你加快編輯,編譯等。 預設情況下,它支援 NodeJS ,並且可以除錯任何可以被轉換為 JavaScript 的語言(愚人碼頭注:比如,TypeScript 等),但像 C++ 或 Python 這樣的其他執行時則需要安裝擴展才能進行除錯。

這裡寫圖片描述

內建 Git

VS Code 內建了一個 Git GUI,支援最常用 Git 命令,這使得您可以很容易地看到您在專案中所做的更改。

這裡寫圖片描述

主題及配色方案實時預覽

當你改變 VS Code 的主題及配色方案時,你可以在選擇一個,以實時預覽它們。

這裡寫圖片描述

終端命令列工具 Terminal

VS Code 提供了一個功能齊全的整合終端,可以讓你選擇終端,並且執行常用命令。

這裡寫圖片描述

這裡寫圖片描述

圖示

跟主題及配色方案的修改類似,VS Code 也提供了圖示主題的修改功能,如下所示:

這裡寫圖片描述

使 VS Code 更容易上手的外掛

下面的外掛能夠讓你很方便的從你以前最喜歡的編輯器切換到 VS Code ,比如對映你熟悉的鍵盤快捷鍵。

由於編輯器的相對最近釋出的 VS Code 中也新增了像 minimap 這樣的功能,但 VS Code 的擴充套件外掛顯然發展的更快。

Atom Keymap (Atom 鍵盤快捷鍵)

在安裝這個外掛並重啟 VS Code 之後,將使你的 VS 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

Sublime Keymap (Sublime 鍵盤快捷鍵)

在安裝這個外掛和重啟 VS Code 之後,將在 VS Code 中匯入 Sublime Text 的鍵盤快捷鍵。可以通過 VS Code 的強大智慧感知來使用熟悉的 Sublime Text 鍵盤快捷鍵。

這裡寫圖片描述

最佳外掛推薦

VS Code 的使用並不需要很多的外掛外掛,但下面介紹的外掛肯定會讓你變得更有效率。我介紹的以下外掛是一些最有用的外掛。

AutoFileName (檔案路徑自動補全外掛)

當你需要 require 本地檔案時,這個外掛將為你提供基於你輸入的檔案路徑的自動補全的選項。

這裡寫圖片描述

ESLint

新增對 ESLint 的支援,並在安裝和重啟 VS Code 後自動開始工作。

這裡寫圖片描述

JavaScript (ES6) Code Snippets (程式碼片段外掛)

用程式碼片段加快 ES6 開發速度,例如輸入 imd 可以自動生成如下程式碼:

JavaScript 程式碼:

import { } from 'somewhere';

Project Manager (專案管理器外掛)

簡單的專案管理器,可以在你的編輯器中快速切換專案。

這裡寫圖片描述

Sort Lines (程式碼行排序外掛)

這個外掛可以對選中的程式碼行進行排序。也提供不區分大小寫、反向和唯一等排序功能。

這裡寫圖片描述

Wallaby.js (測試外掛)

一個高階的連續測試執行器,當您對您正在工作的檔案進行測試時,它會在你的編輯器中建立通過測試或測試失敗的視覺反饋。

這裡寫圖片描述

Sync Settings (設定同步外掛)

Sync Settings (設定同步外掛)

你很有可能在多臺電腦上進行編碼工作。在電腦上移植你的外掛和設定是輕而易舉的事,這要歸功於 Shan Ali Khan 的設定同步擴充套件。

Git History (Git 歷史記錄外掛)

Git History (Git 歷史記錄外掛)

這裡寫圖片描述

EditorConfig (程式碼格式化外掛)

新增對 EditorConfig 的支援,因此當您格式化檔案時,它會引用此約定。

Document This (JSDoc註釋外掛)

在 TypeScript 和 JavaScript 檔案中自動生成詳細的 JSDoc 註釋。

這裡寫圖片描述

npm Intellisense (npm 模組匯入外掛)

VS Code 擴充套件,在 import 匯入語句中自動完成npm 模組。

這裡寫圖片描述

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 外掛,但它使用的是多指標,不像哪些下載最多的外掛。

change-case (命名格式外掛)

快速修改突出顯示的選中文字的命名格式。 camelCase(駱駝拼命名),PascalCase(首字母大寫),kebab-case(中劃線命名),underscore_delimited(下劃線命名),CONSTANT(大寫命名)等。

vscode-icons (側邊欄圖示外掛)

可以更換側邊欄中漂亮的圖示。

這裡寫圖片描述