vscode 安裝一些快捷配置

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

 

小編推薦：掘金是一個高質量的技術社區，從 ECMAScript 6 到 Vue.js，性能優化到開源類庫，讓你不錯過前端開發的每個技術乾貨。各大應用市場搜索「掘金」便可下載APP，技術乾貨盡在掌握..

Visual Studio Code 是由 Microsoft(微軟) 發佈的一個免費的，開源的跨平臺文本編輯器。他們基於在線編輯 Visual Studio Online (代號爲 「Monaco」)，並結合 GitHub 的 Electron 實現的一個跨平臺編輯器。他們在爲程序員建立一個快速且高效工做環境方面取得巨大進步。

• 提供智能補全功能的智能感知 。
• 編輯器內置代碼 調試工具。
• 側邊欄內置 Git 命令。
• 處理多實例能力的 集成終端。
• 經過擴展和主題的 定製能力。
• 下載 VS Code Insiders，能夠獲取 天天構建的最新版本

 

爲何選擇 Visual Studio Code

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

全部你所找到的 包(packages) 都是用 JavaScript 構建的，所以任何人均可以輕鬆地編寫本身的擴展包。您能夠在這裏找到有關擴展的文檔: https://code.visualstudio.com/docs/extensions/overview

功能 Features

VS Code 最重要的功能是它的側邊欄，它集成了在編碼和重構時會用到的核心功能，你須要的其餘任何功能均可以經過安裝擴展來知足。

智能感知 IntelliSense

一個很是有用的語法高亮和自動完成功能，提供了基於變量類型、函數定義和導入模塊的自動補全功能。

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

調試 Debugging

內置調試器能夠經過添加斷點和觀察器進行調試，以幫助你加快編輯，編譯等。
默認狀況下，它支持 NodeJS ，而且能夠調試任何能夠被轉換爲 JavaScript 的語言（愚人碼頭注：好比，TypeScript 等），但像 C++ 或 Python 這樣的其餘運行時則須要安裝擴展才能進行調試。

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

內置 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 的鍵盤快捷鍵。

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

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

最佳插件推薦

VS Code 的使用並不須要不少的插件插件，但下面介紹的插件確定會讓你變得更有效率。我介紹的如下插件是一些最有用的插件。

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

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

當你須要 require 本地文件時，這個插件將爲你提供基於你輸入的文件路徑的自動補全的選項。

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 開發速度，例如輸入 imd 能夠自動生成以下代碼：

JavaScript 代碼:

1. import { } from 'somewhere';

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

Project Manager (項目管理器插件)

簡單的項目管理器,能夠在你的編輯器中快速切換項目。

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

Sort Lines (代碼行排序插件)

這個插件能夠對選中的代碼行進行排序。也提供不區分大小寫、反向和惟一等排序功能。

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

Wallaby.js (測試插件)

一個高級的連續測試運行器，當您對您正在工做的文件進行測試時，它會在你的編輯器中建立經過測試或測試失敗的視覺反饋。

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

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

EditorConfig (代碼格式化插件)

添加對 EditorConfig 的支持，所以當您格式化文件時，它會引用此約定。

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

Document This (JSDoc註釋插件)

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

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

npm Intellisense (npm 模塊導入插件)

VS Code 擴展，在 import 導入語句中自動完成npm 模塊。

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

Align (代碼對齊插件)

對齊文本，使代碼根據 =，:等對齊。

對齊前：

JavaScript 代碼:

1. var test = 'string';
2. var another = 10;
3. var small = 10 * 10;

對齊後：

JavaScript 代碼:

1. var test = 'string';
2. var another = 10;
3. var small = 10 * 10;

https://marketplace.visualstudio.com/items?itemName=steve8708.Align

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