使用VScode開發Angular

前言主題插件快捷鍵問題記錄Vs Code打開新的文件會覆蓋窗口中的,怎麼改文件夾按照層級結構顯示如何快速打開項目參考文獻

前言

Visual Studio Code（簡稱VS Code）是一個由微軟開發，同時支持Windows、 Linux 和 macOS 等操做系統且開放源代碼的代碼編輯器，它支持測試，並內置了 Git 版本控制功能，同時也具備開發環境功能，例如代碼補全（相似於 IntelliSense）、代碼片斷和代碼重構等。該編輯器支持用戶個性化配置，例如改變主題顏色、鍵盤快捷方式等各類屬性和參數，同時還在編輯器中內置了擴展程序管理的功能。

Java 開發習慣使用 IDEA，前期我也是繼續使用 IDEA 來開發 Angular，不過編寫 Html 時，對於代碼的提示不夠智能。雖然 webstorm 和 IDEA 很類似，可是 VsCode 比 webstorm 更輕量級，因此就轉而使用 VsCode。

如下內容記錄除此使用 VsCode 的過程，包括

主題

做爲一個非前端開發人員，以爲 Atom One Dark Theme 這個主題界面確實不錯，網上風評也不錯，深受前端大佬們的喜好。

一、點擊擴展商店搜索你要找的插件名稱如Atom One Dark Theme，點擊安裝。

二、使用剛纔下載的主題

最後的效果圖以下所示：

再推薦一款主題： VSCode simpler Icons with Angular ，效果以下：

插件

因爲工做須要，在網上搜索了前端大佬推薦的插件，大體以下：

• Auto Close Tag：匹配標籤，關閉對應的標籤。對於HTML/XML很實用。
• Auto Rename Tag：改變標籤的時候同時改動開閉合標籤；對於HTML/XML很實用。
• HTML CSS Support： 這個也是HTML必備插件之一。
• HTML Snippets ： 提供對HTML語言的支持
• CSS Peek：html和css中關聯css的跳轉
• Code Runner：代碼編譯運行看結果，支持衆多語言
• Git History：查看git分支提交日誌的插件
• Git History Diff ：尋找每個git分支上面提交過的節點，並能夠對比差別性。
• Path Autocomplete ：路徑智能補全插件。
• Path Intellisense ： 路徑智能提示插件。
• beautify ： 良好的拓展性，能夠格式化JSON|JS|HTML|CSS|SCSS,比內置格式化好用；可是react工程的jsx文件用beautify插件格式化會亂掉，建議不要用
• Chinese (Simplified) Language Pack for Visual Studio Code ： 適用於 VS Code 的中文（簡體）語言包。
• fileheader ：新建文件做者註釋

接下來是適用 Angular 開發的插件：

Debugger for Chrome ： 只須要在代碼編輯器中設置斷點，在瀏覽器中會在斷點處暫停

npm Intellisense: 支持在代碼中導入npm模塊（require方法）時的自動補全

Angular Extension pack： 集成了不少提高Angular開發效率的插件

TSLint：TS語法檢測

其次習慣了 IDEA 的快捷鍵，這裏也能夠安裝相關插件。

IntelliJ IDEA Keybindings：IDEA風格的快捷鍵

快捷鍵

VS Code的快捷鍵有不少，須要具體的請仔細參考 VS Code => 左下角設置按鈕 => 鍵盤快捷方式

因爲在上一步驟安裝了 IDEA 風格快捷鍵的插件，因此使用起來都很順手，不過仍是有個別快捷鍵須要調整一下。

咱們能夠自定義快捷鍵，在keybindings.json裏面設置覆蓋便可。該文件具體路徑位於：

C:\Users\Administrator\AppData\Roaming\Code\User\keybindings.json
複製代碼

不過關於 command 屬性的值須要確認好再去修改。

在 VsCode 中全局命令使用 ctrl+shift+p 快捷鍵 ，以下圖所示：

如下內容按照我的使用習慣來配置：

Ctrl+Y ：刪除當前行，還有個相似的快捷鍵 Ctrl+X ，不事後者沒法一次性刪除多行，我的習慣使用 Ctrl+D來刪除。

Ctrl+D ：複製行，我的習慣使用 Ctrl+Alt+Down。

Alt+逗號：移動到當前代碼首部。

Alt+句號：移動到當前代碼尾部。

關於後面兩個快捷鍵，若是感興趣的朋友能夠按照本身的習慣進行配置，不必定非要使用 Home/End 按鍵來實現。具體配置過程以下圖所示：

問題記錄

Vs Code打開新的文件會覆蓋窗口中的,怎麼改

這是由於你單擊文件名的緣故，這個是「預覽模式」，因此再單擊其餘文件時，會覆蓋當前打開的文件。
複製代碼

若是你要每次都打開新tab，那就雙擊文件名好了。這個邏輯和sublime是同樣的。

補充：

預覽模式是如今各種編輯器的默認功能，若是你實在不喜歡，能夠關掉的，看下面：

ctrl+shift+p，在搜索框中輸入 Settings，以下所示：

給你配置settings.json里加一條：

// 控制打開的編輯器是否爲預覽編輯器。預覽編輯器在被固定 (例如，經過雙擊或編輯) 前可重用，其字體樣式爲斜體。
"workbench.editor.enablePreview": true,
改成
"workbench.editor.enablePreview": false,
複製代碼

文件夾按照層級結構顯示

左下角點擊設置，在搜索框輸入：compact，取消勾選便可。

如何快速打開項目

進入到項目目錄下，而後 Shift+鼠標右鍵打開命令行窗口，輸入 code+空格+. 便可。

參考文獻

Angular 開發技巧

強大的 VS Code

10 種 JavaScript 開發者必備的 VS Code 插件

VS Code折騰記 - (2) 快捷鍵大全，沒有更全