vscode配置和插件

使用Visual Studio Code編寫Vue的札記

前言

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/

1、下載並安裝VSCode

點擊下載： VSCode，而且安裝到本地。

2、支持Vue文件的基本語法高亮

在VSCode Marketplace 搜素Vue 出現關於語法高亮的插件有 vue，vue-beautify，vue-color，VueHelper，vertur等等。比較了下載數量能夠了解到，vetur 是目前比較好的語法高亮插件，咱們來安裝一下吧。

安裝插件：Ctrl + P而後輸入 ext install vetur 而後回車點安裝便可

安裝vetur以後，還需配置一下：emmet.syntaxProfiles，預防識別錯誤，不配置也沒有太大問題

無語法高亮效果圖：

高亮語法效果圖：（舒服多了）

3、支持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 , 若是還沒建立，還可使用下面快捷命令來建立。

4、我的VSCode首選項配置推薦（可根據本身喜愛修改）

5、插件拓展-提升效率有效使用插件

Auto Close Tag 自動閉合HTML標籤

Auto Rename Tag 修改HTML標籤時，自動修改匹配的標籤

Bookmarks添加行書籤

Can I Use HTML五、CSS三、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-router二、vuex2）

6、快捷鍵使用

全局

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" } ]

請使用手機"掃一掃"x