VS Code上手與超實用插件安利

工欲善其事必先利其器

Visual Studio Code (簡稱 VS Code / VSC) 是一款免費開源的現代化輕量級代碼編輯器，支持幾乎全部主流的開發語言的語法高亮、智能代碼補全、自定義熱鍵、括號匹配、代碼片斷、代碼對比 Diff、GIT 等特性，支持插件擴展，並針對網頁開發和雲端應用開發作了優化。軟件跨平臺支持 Win、Mac 以及 Linux，運行流暢，可謂是微軟的良心之做

微軟有 Visual Studio這個宇宙最強IDE，Visual Studio Code 天然也不會弱(宇宙最強編輯器)

說到代碼編輯器，咱們有必要提一提Sublime Text還有Atom。在開始使用VS Code以前Sublime Text一直是個人主力編輯器，和WebStorm （最強端前端開發工具） 一塊兒用。因爲這篇文章主要介紹VS Code下面就簡單歸納下這幾個：

Sublime Text：在個人平常使用中都挺滿意，快速，穩定。惟一不爽是證書購買(雖然能夠一直無限制使用)，沒有開源

Atom：大家用着真不卡嗎？仍是我電腦配置太差，不過UI真的好看

VS code：微軟開源，比sublime開源，比atom更快，比webstorm更輕，值得一提的是它用的殼是GitHub開源的Electron。

主要功能

Visual Studio Code首先是一個編輯器，它包含了高效的源代碼編輯所需的功能(最爲一個編輯器，主要功能固然是代碼編輯了) 咱們主要仍是看看特點功能。

智能感知 Intellisense

智能感知是各類代碼編輯功能的總稱，包括代碼完成，參數信息，快速信息和成員列表。智能感知功能也被稱爲「代碼補全」，「內容幫助」和「代碼提示」，這是一個現代編輯器最基本的自我修養了。

VS Code原生就支持JavaScript，TypeScript，JSON，HTML，CSS，Less和Sass的Intellisense，真正的強大之處在於，能夠安裝語言擴展來配置更豐富的IntelliSense（幾乎包括全部主流語言）

內置 Git

VS Code 內置了一個 Git GUI，支持最經常使用 Git 命令，這使得您能夠很容易地看到您在項目中所作的更改。固然了，你能夠經過擴展 讓他更強大。

調試 Debugging

VS Code對Node.js運行時提供了內置的調試支持，而且能夠調試JavaScript，TypeScript和任何其餘被轉換爲JavaScript的語言。對於調試其餘語言和運行環境時，咱們也能夠經過擴展來解決。

終端命令行工具 Terminal

在VS Code中提供了一個功能齊全的集成終端，這很是方便，由於您沒必要切換窗口或更改現有終端的狀態就能夠快速執行命令

擴展市場 Extensio

對於強大的插件市場來講，它自帶的功能只是和開始而已。隨着VS Code的流行，基本上你能找到全部你想要的插件(實在找不到你還能夠本身開發)。

更多請查閱https://code.visualstudio.com/docs

開始上手

關於VS Code的使用也很簡單

• 下載安裝：去到它的官網https://code.visualstudio.com/，下載對應版本，而後按照提示一直下一步就好

• 基本使用：在你安裝好後，就能夠看到有用的用戶歡迎指引界面

你能夠在學習欄點擊各項，迅速上手這個編輯器。下面主要就是推薦一些好用插件了，

插件安裝方式

關於插件的安裝，在看了 界面概述後也應該是知道怎麼安裝了：

• 直接在擴展管理中鍵入你要下載的擴展名稱或者關鍵字搜索下載

• 使用快捷鍵 ⇧+⌘+P，打開命令面板，輸入以下命令便可

ext install 擴展名

• 還能夠從插件主頁直接點擊下載，他會喚起VS Code自動下載

基本配置

關於VS Code的各項設置，都在一個JSON文件中，左邊是默認設置，右邊是咱們本身的設置，分爲用戶設置和工做區設置，咱們只須要在右邊咱們編輯設置並保存便可。工做區設置後各項設置會保存在 .vscode文件夾下。

主題推薦

VS Code已經自帶了不少個好看的主題，好比說我一直用的Solarized Dark

這裏我再推薦幾個不錯的，

One Dark Pro： Atom 標誌性的主題

Atom One Dark Theme： 另外一個基於 One Dark 的主題

Dracula Official：超好看

Material Theme 一個簡單而又幹淨的主題，有不少配置選項用於顏色配置 

單單安裝了主題還不夠，咱們還要好看的圖標來足視覺體驗：

vscode icons

Material Icon Theme

更多好看主題請瀏覽https://marketplace.visualstudio.com/search?target=VSCode&category=Themes

實用插件

filesize：在底部狀態欄顯示當前文件大小，點擊後還能夠看到詳細建立、修改時間

Path Intellisense：文件路徑補全，在你用任何方式引入文件系統中的路徑時提供智能提示和自動完成

vscode-fileheader：頂部註釋模板，可定義做者、時間等信息，並會自動更新最後修改時間 

Git Lens：查看詳細的git記錄,內置功能不少 

Git History (git log)：一個好用的Git 歷史查看工具 

npm: 能夠直接在vscode執行npm的一些命令

Npm Intellisense：NPM 依賴補全，在你引入任何 node_modules 裏面的依賴包時提供智能提示和自動完成

Debugger for Chrome：讓 vscode 映射 chrome 的 debug功能，靜態頁面均可以用 vscode 來打斷點調試 

JavaScript (ES6) code snippets：經常使用的類聲明、ES 模塊聲明、CMD 模塊導入等

ESLint：代碼語法檢查

Beautify：格式化代碼的工具

open-in-browser： 在瀏覽器中預覽HTM文件

HTML Snippets：各類 HTML 標籤片斷

IntelliSense for CSS class names：CSS 類名補全，會自動掃描整個項目裏面的 CSS 類名並在你輸入類名時作智能提示

Document This： js 的註釋模板

Settings Sync：同步你得設置和插件

結語

咱們從外觀配置開始到插件推薦結束，到此基本上你就能打造出一個有本身風格強大編輯器，開發效率天然也是很高。你有什麼好用的插件？歡迎留言交流！讓更多的人知道。

同時，建議移步官網看看https://code.visualstudio.com/，那兒有更全更細的文檔，有助於咱們更好的使用它。