vscode配置和插件
使用Visual Studio Code編寫Vue的劄記
梁源 2017-04-28 2860
前言
Visual Studio Code is a lightweight but powerful source code editor which runs on your desktop and is available for Windows, macOS and Linux. It comes with built-in support for JavaScript, TypeScript and Node.js and has a rich ecosystem of extensions for other languages (such as C++, C#, Python, PHP, Go) and runtimes (such as .NET and Unity). Begin your journey with VS Code with these introductory videos.
英文官網：https://code.visualstudio.com/
中文官網：http://www.vscode.org/
一、下載並安裝VSCode
點擊下載： VSCode，並且安裝到本地。
二、支持Vue文件的基本語法高亮
在VSCode Marketplace 搜素Vue 出現關於語法高亮的插件有 vue，vue-beautify，vue-color，VueHelper，vertur等等。比較了下載數量可以了解到，vetur 是目前比較好的語法高亮插件，我們來安裝一下吧。
安裝插件：Ctrl + P然後輸入 ext install vetur 然後回車點安裝即可
安裝vetur之後，還需配置一下：emmet.syntaxProfiles，預防識別錯誤，不配置也沒有太大問題
無語法高亮效果圖：
高亮語法效果圖：（舒服多了）
三、支持Vue文件的ESLint
安裝ESLint可以有效的提示代碼的低級錯誤，初期可能有些不習慣，但是使用時間長了會是很要的幫手。
安裝插件：Ctrl + P 然後輸入 ext install eslint然後回車點安裝即可
ESLint 不是安裝後就可以用的，還需要一些環境和配置：
首先，需要全局的 ESLint , 如果沒有安裝可以使用npm install -g eslint 來安裝。
其次，vue文件是類 HTML 的文件，為了支持對 vue 文件的 ESLint ，需要 eslint-plugin-html
npm install -g eslint-plugin-html 來安裝
接著，安裝了 HTML 插件後，還需要在 vscode 中配置下 ESLint：
"eslint.validate": [
"javascript",
"javascriptreact",
"html",
"vue"
],
"eslint.options": {
"plugins": ["html"]
},
最後，別忘了在項目根目錄下創建 .eslintrc.json , 如果還沒創建，還可以使用下面快捷命令來創建。
四、個人VSCode首選項配置推薦（可根據自己喜好修改）
五、插件拓展-提高效率有效使用插件
Auto Close Tag 自動閉合HTML標簽
Auto Rename Tag 修改HTML標簽時，自動修改匹配的標簽
Bookmarks添加行書簽
Can I Use HTML5、CSS3、SVG的瀏覽器兼容性檢查
Code Runner 運行選中代碼段（支持大量語言，包括Node）
CodeBing 在VSCode中彈出瀏覽器並搜索，可編輯搜索引擎
Color Highlight 顏色值在代碼中高亮顯示
Color Picker 拾色器
Document This 註釋文檔生成
EditorConfig for VS Code EditorConfig插件
Emoji 在代碼中輸入emoji
ESLintESLint插件，高亮提示
File Peek 根據路徑字符串，快速定位到文件
Font-awesome codes for html FontAwesome提示代碼段
ftp-sync 同步文件到ftp
Git Blame在狀態欄顯示當前行的Git信息
Git History(git log) 查看git log
GitLens 顯示文件最近的commit和作者，顯示當前行commit信息
Guides 高亮縮進基準線
Gulp Snippets Gulp代碼段
HTML CSS Class Completion CSS class提示
HTML CSS Support css提示（支持vue）
HTMLHintHTML格式提示
Indenticator 縮進高亮
JavaScript (ES6) code snippets ES6語法代碼段
language-stylus Stylus語法高亮和提示
Lodash Lodash代碼段
markdownlint Markdown格式提示
MochaSnippets Mocha代碼段
Node modules resolve 快速導航到Node模塊
npm運行npm命令
npm Intellisense 導入模塊時，提示已安裝模塊名稱
Output Colorizer彩色輸出信息
Partial Diff 對比兩段代碼或文件
Path Autocomplete路徑完成提示
Path Intellisense 另一個路徑完成提示
Prettify JSON 格式化JSON
Project Manager快速切換項目
REST Client 發送REST風格的HTTP請求
Settings Sync VSCode設置同步到Gist
String Manipulation 字符串轉換處理（駝峰、大寫開頭、下劃線等等）
Test Spec Generator 測試用例生成（支持chai、should、jasmine）
TODO Parser Todo管理
Version Lens package.json文件顯示模塊當前版本和最新版本
vetur 目前比較好的Vue語法高亮
View Node Package 快速打開選中模塊的主頁和代碼倉庫
vscode-icons 文件圖標，方便定位文件
VSCode Great Icons 文件圖標拓展
VueHelper Vue2代碼段（包括Vue2 api、vue-router2、vuex2）
六、快捷鍵使用
全局
Ctrl + Shift + P, F1顯示命令面板
-
按一下
Backspace會進入到Ctrl+P模式 -
在
Ctrl+P下輸入>可以進入Ctrl+Shift+P模式
Ctrl + P 快速打開
-
直接輸入文件名，跳轉到文件
-
?列出當前可執行的動作 -
!顯示Errors或Warnings，也可以Ctrl+Shift+M -
:跳轉到行數，也可以Ctrl+G直接進入 -
@跳轉到symbol（搜索變量或者函數），也可以Ctrl+Shift+O直接進入 -
@根據分類跳轉symbol，查找屬性或函數，也可以Ctrl+Shift+O後輸入:進入 -
根據名字查找
symbol，也可以Ctrl+T
Ctrl + Shift + N 打開新窗口
Ctrl + Shift + W 關閉窗口
基本
Ctrl + X 剪切（未選中文本的情況下，剪切光標所在行）
Ctrl + C 復制（未選中文本的情況下，復制光標所在行）
Alt + Up 向上移動行
Alt + Down 向下移動行
Shift + Alt + Up 向上復制行
Shift + Alt + Down 向下復制行
Ctrl + Shift + K 刪除行
Ctrl + Enter 下一行插入
Ctrl + Shift + Enter 上一行插入
Ctrl + Shift + \ 跳轉到匹配的括號
Ctrl + ] 增加縮進
Ctrl + [ 減少縮進
Home 跳轉至行首
End 跳轉到行尾
Ctrl + Home 跳轉至文件開頭
Ctrl + End 跳轉至文件結尾
Ctrl + Up 按行向上滾動
Ctrl + Down 按行向下滾動
Alt + PgUp 按屏向上滾動
Alt + PgDown 按屏向下滾動
Ctrl + Shift + [ 折疊代碼塊
Ctrl + Shift + ] 展開代碼塊
Ctrl + K Ctrl + [ 折疊全部子代碼塊
Ctrl + K Ctrl + ] 展開全部子代碼塊
Ctrl + K Ctrl + 0 折疊全部代碼塊
Ctrl + K Ctrl + J 展開全部代碼塊
Ctrl + K Ctrl + C 添加行註釋
Ctrl + K Ctrl + U 移除行註釋
Ctrl + / 添加、移除行註釋
Shift + Alt + A 添加、移除塊註釋
Alt + Z 自動換行、取消自動換行
多光標與選擇
Alt + 點擊 插入多個光標
Ctrl + Alt + Up 向上插入光標
Ctrl + Alt + Down 向下插入光標
Ctrl + U 撤銷上一個光標操作
Shift + Alt + I 在所選行的行尾插入光標
Ctrl + I 選中當前行
Ctrl + Shift + L 選中所有與當前選中內容相同部分
Ctrl + F2 選中所有與當前選中單詞相同的單詞
Shift + Alt + Left 折疊選中
Shift + Alt + Right 展開選中
Shift + Alt + 拖動鼠標 選中代碼塊
Ctrl + Shift + Alt + Up 列選擇 向上
Ctrl + Shift + Alt + Down 列選擇 向下
Ctrl + Shift + Alt + Left 列選擇 向左
Ctrl + Shift + Alt + Right 列選擇 向右
Ctrl + Shift + Alt + PgUp 列選擇 向上翻頁
Ctrl + Shift + Alt + PgDown 列選擇 向下翻頁
查找替換
Ctrl + F 查找
Ctrl + H 替換
F3 查找下一個
Shift + F3 查找上一個
Alt + Enter 選中所有匹配項
Ctrl + D 向下選中相同內容
Ctrl + K Ctrl + D 移除前一個向下選中相同內容
Alt + C 區分大小寫
Alt + R 正則
Alt + W 完整匹配
進階
Ctrl + Space 打開建議
Ctrl + Shift + Space 參數提示
Tab Emmet插件縮寫補全
Shift + Alt + F 格式化
Ctrl + K Ctrl + F 格式化選中內容
F12 跳轉到聲明位置
Alt + F12 查看具體聲明內容
Ctrl + K F12 分屏查看具體聲明內容
Ctrl + . 快速修復
Shift + F12 顯示引用
F2 重命名符號
Ctrl + Shift + . 替換為上一個值
Ctrl + Shift + , 替換為下一個值
Ctrl + K Ctrl + X 刪除行尾多余空格
Ctrl + K M 更改文件語言
導航
Ctrl + T 顯示所有符號
Ctrl + G 跳轉至某行
Ctrl + P 跳轉到某個文件
Ctrl + Shift + O 跳轉到某個符號
Ctrl + Shift + M 打開問題面板
F8 下一個錯誤或警告位置
Shift + F8 上一個錯誤或警告位置
Ctrl + Shift + Tab 編輯器歷史記錄
Alt + Left 後退
Alt + Right 前進
Ctrl + M 切換焦點
編輯器管理
Ctrl + F4, Ctrl + W 關閉編輯器
Ctrl + K F 關閉文件夾
Ctrl + \ 編輯器分屏
Ctrl + 1 切換到第一分組
Ctrl + 2 切換到第二分組
Ctrl + 3 切換到第三分組
Ctrl + K Ctrl + Left 切換到上一分組
Ctrl + K Ctrl + Right 切換到下一分組
Ctrl + Shift + PgUp 左移編輯器
Ctrl + Shift + PgDown 右移編輯器
Ctrl + K Left 激活左側編輯組
Ctrl + K Right 激活右側編輯組
文件管理
Ctrl + N 新建文件
Ctrl + O 打開文件
Ctrl + S 保存
Ctrl + Shift + S 另存為
Ctrl + K S 全部保存
Ctrl + F4 關閉
Ctrl + K Ctrl + W 全部關閉
Ctrl + Shift + T 重新打開被關閉的編輯器
Ctrl + K Enter 保持打開
Ctrl + Tab 打開下一個
Ctrl + Shift + Tab 打開上一個
Ctrl + K P 復制當前文件路徑
Ctrl + K R 在資源管理器中查看當前文件
Ctrl + K O 新窗口打開當前文件
顯示
F11 全屏、退出全屏
Shift + Alt + 1 切換編輯器分屏方式（橫、豎）
Ctrl + + 放大
Ctrl + - 縮小
Ctrl + B 顯示、隱藏側邊欄
Ctrl + Shift + E 顯示資源管理器 或 切換焦點
Ctrl + Shift + F 顯示搜索框
Ctrl + Shift + G 顯示Git面板
Ctrl + Shift + D 顯示調試面板
Ctrl + Shift + X 顯示插件面板
Ctrl + Shift + H 全局搜索替換
Ctrl + Shift + J 顯示、隱藏高級搜索
Ctrl + Shift + C 打開新命令提示符窗口
Ctrl + Shift + U 顯示輸出面板
Ctrl + Shift + V 顯示、隱藏 Markdown預覽窗口
Ctrl + K V 分屏顯示 Markdown預覽窗口
調試
F9 設置 或 取消斷點
F5 開始 或 繼續
F11 進入
Shift + F11 跳出
F10 跳過
Ctrl + K Ctrl + I 顯示懸停信息
集成終端
Ctrl + ` 顯示命令提示符窗口
Ctrl + Shift + ` 新建命令提示符窗口
Ctrl + Shift + C 復制所選內容
Ctrl + Shift + V 粘貼所選內容
Ctrl + Up 向上滾動
Ctrl + Down 向下滾動
Shift + PgUp 向上翻頁
Shift + PgDown 向下翻頁
Ctrl + Home 滾動到頂部
Ctrl + End 滾動到底部
修改默認快捷鍵
打開默認鍵盤快捷方式設置：
File -> Preferences -> Keyboard Shortcuts，或者：Alt+F -> p -> k
修改 keybindings.json：
// Place your key bindings in this file to overwrite the defaults
[
// ctrl+space 被切換輸入法快捷鍵占用
{
"key": "ctrl+alt+space",
"command": "editor.action.triggerSuggest",
"when": "editorTextFocus"
},
// ctrl+d 刪除一行
{
"key": "ctrl+d",
"command": "editor.action.deleteLines",
"when": "editorTextFocus"
},
// 與刪除一行的快捷鍵互換
{
"key": "ctrl+shift+k",
"command": "editor.action.addSelectionToNextFindMatch",
"when": "editorFocus"
},
// ctrl+shift+/多行註釋
{
"key":"ctrl+shift+/",
"command": "editor.action.blockComment",
"when": "editorTextFocus"
},
// 定制與 sublime 相同的大小寫轉換快捷鍵，需安裝 TextTransform 插件
{
"key": "ctrl+k ctrl+u",
"command": "uppercase",
"when": "editorTextFocus"
},
{
"key": "ctrl+k ctrl+l",
"command": "lowercase",
"when": "editorTextFocus"
}
]vscode配置和插件