配置 VScode 编辑器 (前端篇)
zcy
2021/8/2
文章目錄
- 一、代碼片段設置
- 二、常用插件
- 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
- 10. Project-tree
- 三、常用快捷鍵
一、代碼片段設置
左下角設置 -> 用戶代碼片段
上面彈框輸入 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標簽，自動完成頭部和尾部閉合標簽的同步修改
10. Project-tree
作用：自動生成項目目錄文件結構樹，并寫入readme中
使用：Shift + Cmd + p —> 輸入：Project Tree —> 找到需要生成目錄的項目 —> 回車
三、常用快捷鍵
新建文件: 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 +/-未完待續…目前是初學前端階段，在今后開發過程中遇到好用的插件還會繼續更新、整理
總結
以上是生活随笔為你收集整理的配置 VScode 编辑器 (前端篇)的全部內容，希望文章能夠幫你解決所遇到的問題。
