配置 VScode 编辑器 (前端篇)
zcy
2021/8/2
文章目錄
- 一、代碼片段設(shè)置
- 二、常用插件
- 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
- 三、常用快捷鍵
一、代碼片段設(shè)置
左下角設(shè)置 -> 用戶代碼片段
上面彈框輸入 HTML，或者JavaScript，css，以html舉例
在彈出的 html.json 文件里可以寫(xiě)自己想要配置的代碼塊，例如：
上面的內(nèi)容表示，在編輯器輸入"prefix" 的內(nèi)容之后就會(huì)自動(dòng)跳出 “body” 段的代碼，"$" 符號(hào)表示光標(biāo)指向的地方，效果如下：
輸入dul回車(chē)，就會(huì)自動(dòng)彈出 “body” 預(yù)置好的代碼，非常方便
二、常用插件
1. open in browser
作用：html頁(yè)面在瀏覽器中打開(kāi)預(yù)覽
點(diǎn)擊左側(cè)欄的第五個(gè)方塊圖標(biāo)，搜索 open in browser 插件，點(diǎn)擊安裝
此時(shí)再打開(kāi)html頁(yè)面，右鍵單擊，就有了 open in default browser 的選項(xiàng)，選擇打開(kāi)默認(rèn)瀏覽器
也可以點(diǎn)擊 open in other browser 選擇其他瀏覽器
success！
2. Guides
作用：輔助線對(duì)齊，選中的代碼塊會(huì)通過(guò)紅線匹配前綴后綴，以免代碼繁多搞砸
效果：
3. HTMLHint
作用：html代碼檢測(cè)，支持html5，錯(cuò)誤的地方會(huì)標(biāo)下滑波浪線，提示錯(cuò)誤信息
4. Path Intellisense
作用：可以很好的識(shí)別引入文件的路徑，根據(jù)路徑提示功能
效果如下圖：
5. Material Theme
作用：這是一款顏色主題的插件，讓你的編輯器變得更順眼
安裝完成后，左下角設(shè)置，顏色主題
在上方彈出的選項(xiàng)框里選擇你喜歡的主題，我個(gè)人喜歡 ocean 的藍(lán)色！
6. prettier
作用：在保存的時(shí)候格式化代碼，讓代碼整潔易懂
安裝成功后，在左下角 設(shè)置 -> 設(shè)置 -> 輸入save ->勾選 Format On Save
點(diǎn)shift + alt +F 第一次格式化，會(huì)彈出一個(gè)選框配置格式化插件，選擇 prettier
當(dāng)每次保存html文件時(shí)就可以自動(dòng)格式化了
7. vetur
作用：vue多功能集成插件，包括語(yǔ)法高亮，智能提示，emmet，錯(cuò)誤提示，格式化
8. carbon-now-sh
作用：將代碼段生成一張圖片
安裝后，選擇要展示的代碼，按F1 或者 ctrl + shift + p 在上方輸入框輸入 carbon，然后回車(chē)
此時(shí)會(huì)彈出一個(gè)網(wǎng)頁(yè)（需要穩(wěn)定網(wǎng)絡(luò)），里面是代碼截圖，點(diǎn)擊export可以導(dǎo)出截圖
9. Auto Rename Tag
作用：修改html標(biāo)簽，自動(dòng)完成頭部和尾部閉合標(biāo)簽的同步修改
10. Project-tree
作用：自動(dòng)生成項(xiàng)目目錄文件結(jié)構(gòu)樹(shù)，并寫(xiě)入readme中
使用：Shift + Cmd + p —> 輸入：Project Tree —> 找到需要生成目錄的項(xiàng)目 —> 回車(chē)
三、常用快捷鍵
新建文件: Ctrl+N 文件之間切換: Ctrl+Tab 代碼行向左或向右縮進(jìn): Ctrl+[ 、 Ctrl+] 代碼格式化: Shift+Alt+F 向上或向下移動(dòng)一行: Alt+Up 或 Alt+Down 向上或向下復(fù)制一行: Shift+Alt+Up 或 Shift+Alt+Down 移動(dòng)到行首: Home(fn + ←) 移動(dòng)到行尾: End(fn + →) 移動(dòng)到文件結(jié)尾: Ctrl+End 移動(dòng)到文件開(kāi)頭: Ctrl+Home 多行編輯(列編輯): Alt+Shift+鼠標(biāo)左鍵 或 Ctrl+Alt+Down/Up 手動(dòng)保存: Ctrl+S 全屏顯示(再次按則恢復(fù)): F11 放大或縮小(以編輯器左上角為基準(zhǔn)): Ctrl +/-未完待續(xù)…目前是初學(xué)前端階段，在今后開(kāi)發(fā)過(guò)程中遇到好用的插件還會(huì)繼續(xù)更新、整理
總結(jié)
以上是生活随笔為你收集整理的配置 VScode 编辑器 (前端篇)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
