配置 VScode 編輯器 (前端篇)
2021/8/2
目錄
- 配置 VScode 編輯器 (前端篇)
- 一、代碼片段設定
- 二、常用插件
- 1. open in browser
- 2. Guides
- 3. HTMLHint
- 4. Path Intellisense
- 5. Material Theme
- 6. prettier
- 7. vetur
- 8. carbon-now-sh
- 9.Auto Rename Tag
- 三、常用快捷鍵
一、代碼片段設定
左下角設定 -> 用戶代碼片段
上面彈框輸入 HTML，或者JavaScript，css，以html舉例
在彈出的 html.json 檔案里可以寫自己想要配置的代碼塊，例如：
上面的內容表示，在編輯器輸入"prefix" 的內容之后就會自動跳出 “body” 段的代碼，"$" 符號表示游標指向的地方，效果如下：
輸入dul回車，就會自動彈出 “body” 預置好的代碼，非常方便
二、常用插件
1. open in browser
作用：html頁面在瀏覽器中打開預覽
點擊左側欄的第五個方塊圖示，搜索 open in browser 插件，點擊安裝
此時再打開html頁面，右鍵單擊，就有了 open in default browser 的選項，選擇打開默認瀏覽器
也可以點擊 open in other browser 選擇其他瀏覽器
success！
2. Guides
作用：輔助線對齊，選中的代碼塊會通過紅線匹配前綴后綴，以免代碼繁多搞砸
效果：
3. HTMLHint
作用：html代碼檢測，支持html5，錯誤的地方會標下滑波浪線，提示錯誤資訊
4. Path Intellisense
作用：可以很好的識別引入檔案的路徑，根據路徑提示功能
效果如下圖：
5. Material Theme
作用：這是一款顏色主題的插件，讓你的編輯器變得更順眼
安裝完成后，左下角設定，顏色主題
在上方彈出的選項框里選擇你喜歡的主題，我個人喜歡 ocean 的藍色！
6. prettier
作用：在保存的時候格式化代碼，讓代碼整潔易懂
安裝成功后，在左下角 設定 -> 設定 -> 輸入save ->勾選 Format On Save
點shift + alt +F 第一次格式化，會彈出一個選框配置格式化插件，選擇 prettier
當每次保存html檔案時就可以自動格式化了
7. vetur
作用：vue多功能集成插件，包括語法高亮，智能提示，emmet，錯誤提示，格式化
8. carbon-now-sh
作用：將代碼段生成一張圖片
安裝后，選擇要展示的代碼，按F1 或者 ctrl + shift + p 在上方輸入框輸入 carbon，然后回車
此時會彈出一個網頁（需要穩定網路），里面是代碼截圖，點擊export可以匯出截圖
9.Auto Rename Tag
作用：修改html標簽，自動完成頭部和尾部閉合標簽的同步修改
三、常用快捷鍵
新建檔案: Ctrl+N
檔案之間切換: Ctrl+Tab
代碼行向左或向右縮進: Ctrl+[ 、 Ctrl+]
代碼格式化: Shift+Alt+F
向上或向下移動一行: Alt+Up 或 Alt+Down
向上或向下復制一行: Shift+Alt+Up 或 Shift+Alt+Down
移動到行首: Home(fn + ←)
移動到行尾: End(fn + →)
移動到檔案結尾: Ctrl+End
移動到檔案開頭: Ctrl+Home
多行編輯(列編輯): Alt+Shift+滑鼠左鍵 或 Ctrl+Alt+Down/Up
手動保存: Ctrl+S
全屏顯示(再次按則恢復): F11
放大或縮小(以編輯器左上角為基準): Ctrl +/-
未完待續…目前是初學前端階段，在今后開發程序中遇到好用的插件還會繼續更新、整理
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/291840.html
標籤：其他
上一篇：初識軟體測驗