【猿說VUE】Visual Studio Code安裝配置

Visual Studio Code安裝配置

現在使用Visual Studio Code編碼的人越來越多，憑藉着免費，開源，輕量，跨平臺的特點得到了大量開發人員的喜愛。該編輯器也集成了所有一款現代編輯器所應該具備的特性，包括語法高亮（syntax high lighting），可定製的熱鍵綁定（customizable keyboard bindings），括號匹配（bracket matching）以及代碼片段收集（snippets）。

1.1 VS Code安裝

訪問Visual Studio Code官網下載適合自己機器的版本。如圖所示，點擊Download for Windows按鈕即可默認下載，也可以點擊向下箭頭選擇別的版本下載 。下載完成後，啓動安裝程序並按照說明進行安裝。對於Windows，需要.NET Framework（4.5.2以上），如果未安裝，則會另外安裝。

Stable和Insiders的區別：Stable版的圖標爲藍色，Insiders版的圖標爲綠色，兩者加載配置文件不一樣。VS Code的新功能和錯誤修復將首先應用於Insiders版本，穩定後然後再應用於Stable版本。 Stable版大約每月更新一次。

1.2 VS Code使用

1.2.1 中文插件安裝

VS Code默認下載爲英語界面，如果有喜歡中文界面的話，可以安裝中文插件，輸入：chinese搜索後安裝。注意安裝完成後需要重啓應用才能生效。參考如下：

1.2.2 瀏覽器插件安裝

VSCode中默認編寫的HTML頁面是不能運行的，如果需要在VSCode運行HTML頁面，直接打來瀏覽器查看，也需要安裝插件。

輸入：open in browser 安裝瀏覽器插件。

1.2.3 安裝VUE開發利器

基本模式參考如上，在擴展插件中進行搜索後安裝。如下插件是在進行Vue開發前端時經常使用的插件，建議大家自行搜索安裝。

• Auto Close Tag：自動添加HTML/XML關閉標記
• Auto Rename Tag：自動完成另一側標籤的同步修改
• Beautify：格式化代碼
• Bracket Pair Colorizer：給括號加上不同的顏色，便於區分不同的區塊，使用者可以定義不同括號類型和不同顏色
• Debugger for Chrome：映射vscode上的斷點到chrome上，方便調試
• ESLint：JavaScript語法糾錯，可以自定義配置，不過配置較爲複雜，建議使用網上一些廣泛使用的eslint配置
• HTML CSS Support：智能提示CSS類名以及ID
• HTML Snippets：智能提示HTML標籤，以及標籤含義
• JavaScript(ES6) code snippets：ES6語法智能提示，以及快速輸入，省去了配置其支持各種包含js代碼文件的時間
• jQuery Code Snippets：jQuery代碼智能提示
• Markdown Preview Enhanced：實時預覽markdown，markdown使用者必備
• markdownlint：markdown語法糾錯
• Material Icon Theme：VS Code圖標主題，支持更換不同色系的圖標
• Path Intellisense：自動提示文件路徑，支持各種快速引入文件
• Vetur：Vue多功能集成插件，包括：語法高亮，智能提示，錯誤提示，格式化，自動補全，debugger。 vscode官方欽定Vue插件，Vue開發者必備。
• filesize：編輯器的狀態欄中顯示焦點文件的大小
• Highlight Matching Tag：突出顯示匹配的打開或關閉標記。可選地，它還顯示狀態欄中標記的路徑
• Vue 3 Snippets：提供一些vue的代碼片段

以上列舉了經常用的一些插件，其他的插接件內容可以隨着開發逐步安裝。

1.2.4 VS Code界面構成

VSCode編輯器的主要界面由五部分組成：活動欄，側邊欄，編輯欄，面板欄，狀態欄

• ①活動欄：圖標從從上到下依次爲：側邊欄，搜索，Git，調試，插件
• ②側邊欄：新建項目文件和文件夾
• ③編輯欄：編寫代碼的區域
• ④面板欄：包括問題，輸出，調試控制檯，終端，最重要的是terminal，用來輸入相關命令
• ⑤狀態欄，點擊該區域可以調出面板欄

1.2.5 VS Code配置項

自動保存設置

File- Preferences- Setting ：在彈出下面界面，選擇User（默認選中），

接着如下圖選擇afterdelay選項即可，接下來設定保存時間：1000表示1秒。

常用快捷鍵

• Ctrl + / （單行註釋）
• Shift + Alt + A （多行註釋）
• Ctrl + Shift + Enter （上方插入一行，鼠標光標在當前行的任意位置都可以直接換行到上一行）
• Ctrl + Enter （下方插入一行，鼠標光標在當前行的任意位置都可以直接換行到下一行）
• Alt + Shift + F （格式化代碼，不需要全選中代碼，直接格式化即可）
• Ctrl + Shift + F （查找文件）