vscode 安裝一些快捷配置
Visual Studio Code 最好的功能、插件和設置
發表於 2017年09月14日小編推薦:掘金是一個高質量的技術社區,從 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
可以自動生成如下代碼:
- 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 代碼:- var test = ‘string‘;
- var another = 10;
- var small = 10 * 10;
對齊後:
JavaScript 代碼:- var test = ‘string‘;
- var another = 10;
- 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
vscode 安裝一些快捷配置