前言

?? 作者主頁：https://hongweblog.blog.csdn.net/

?? 簡介：沒有什么遠大的理想，做自己喜歡的事情就好~

?? 掃碼關注微信公眾號： >>> Dianc小助手 <<<

?? 前端學習路線圖、面試刷題、二次元壁紙珍藏，Dianc小助手后續會持續完善，

?? 大家的積極參與和討論，是Dianc推送更多優質內容的動力~

初識VS Code

Visual Studio Code（以下簡稱vscode）是一個輕量且強大的代碼編輯器，跨平臺支持Windows，Mac OS X和Linux，內置JavaScript、TypeScript和Node.js支持，而且擁有豐富的插件生態系統，可通過安裝插件來支持C++、C#、JAVA、Python、PHP等其他語言，

功能如此之多，不禁感嘆VScode YYDS！！

起因

其實寫這篇文章也是有點緣分的，前幾天，幫學弟搞了一個他們老師布置的作業（啊，不得不說我也不會哈哈，熱區這個東西還真就是我的盲區了），解決完他的問題之后我就問他為啥不用Vscode去寫代碼，一個！就能完成HTML5的格式不快嗎？

然后他就說感覺Vscode不好用！！當場我就把我之前的那個插件教程給上去了，殊不知那是我幾個月前水的文章，現在一看真的是太水了，我自己看都懵了，

上圖就是我近4個月前寫的文章了，自己現在看還是不是很明了，何況新手是吧，后來我就下載了一個錄屏軟體，來輔助這次的教程，有gif動圖會顯得更生動！

基礎配置

好了，巴拉這么多，回歸正題，下載插件！（Vscode以插件出名）

首先我們先熟悉一下Vscode的界面（剛開始上手，小白或者是說英文不好的小伙伴可能會有點懵逼）

上面也許還是會有新手不太懂，但是沒什么關系，用著用著你就明白了，首先我們需要打開插件商店，畢竟VScode是圍繞插件來進行生態的，

為了節目效果，我又一次洗掉了我所有插件，就連中文都刪了

下載中文插件

這個不用多說，讓Vscode的所有界面和解釋都變成中文，英文好的小伙伴就不需要了吧哈哈，反正博主我就是英文不好（死記硬背）

親筆認證：最強插件

啊，博主自己認為的，如果有異議也可以私信我噢，前端開發怎么能沒有這個嘞是吧~

Live Server 實時預覽

光說不練假把式，那么我們就來看看這個插件到底強在哪，先創建一個html檔案

不知道小伙伴能不能看得清楚，大概就是不用重繪瀏覽器，只要你修改代碼，然后就能實時看到網頁的變化，當然實作上面的操作還需要一個設定支持，那就是自動保存

首先點擊左下角的設定圖示，然后再點擊設定

當然選擇哪種自動保存的辦法都是看小伙伴的喜好，我習慣離開編輯器就報存，方便，

1. off：關閉自動保存，
2. afterDelay：當檔案修改后的時間超過"Files：Auto Save Delay"中配置的值時自動進行保存
3. onFocusChange：編輯器失去焦點時自動保存更新后的檔案，
4. onWindowChange：視窗失去焦點時自動保存更新后的檔案，

自動閉合標簽插件 Auto Close Tag

小伙伴應該會發現我演示的都是從零開始，因為我把插件都洗掉了，一起體驗重新安裝插件讓VScode變得完善的感覺吧，

那么說到這個插件，可以說可有可無，但是多一個插件多一份舒心也是很好的，當你寫了<div類似這樣的代碼時，那么下一刻你再輸入>就會幫你閉合這個標簽

讓我們來看看演示

標簽同步修改 Auto Rename Tag

這個插件可以說挺好用的，當你寫錯標簽然后修改前面的標簽時，這個插件會幫你自動將結束標簽也修改了，就不用你動后面的啦，詳情看演示

高亮代碼

當你看別人或者自己寫的專案時，總會遇到那種一堆括號的函式，那么如何區分對應的關系呢，這個插件對配對的括號進行著色，方便區分，未安裝該插件之前括號統一都是白色的，

Bracket Pair Colorizer 用不同顏色高亮顯示匹配的括號

下載插件前

下載插件后

TODO提示高亮顯示

如果我們在撰寫代碼時想在某個地方做一個標記，后續再來完善或者修改里面的內容，可以利用此插件高亮顯示，之后可以幫助我們快速定位到需要修改的代碼行，

說到這個插件，就來說說前端開發的一些潛規則吧

// TODO: + 說明

如果代碼中有該注釋，說明在該注釋處有功能代碼待撰寫，待實作的功能在說明中會簡略說明，

// FIXME: + 說明

如果代碼中有該注釋，說明該注釋處代碼需要修正，甚至代碼是錯誤的，不能作業，需要修復，如何修正會在說明中簡略說明，

在某個地方做一個標記，后續再來完善或者修改里面的內容，這就是要高亮的原因，

讓你CSS效率提高一個檔次 wscats.eno

使用less必備插件，寫好less能幫助你編譯出css代碼，less寫起來比css方便快捷，

如下，我沒有創建css檔案，只是創建less然后保存之后就默認css創建在同一個檔案夾下，那我們可以看看less和css的差距，為什么會說less方便，

轉成css后顯示

發現沒有，css那些父級嵌套的處理，在less里面能夠直接嵌套，這就是方便，當然還需要更改一些設定，我之前的文章就有說明啦，這里我還是參考之前的圖片，但是這里會解釋清楚

擴展同樣是可以單獨設定的，點擊擴展設定

然后根據我這張圖去修改配置

vscode-icons 圖示美化

下載完成后，你的檔案夾和檔案的圖示都會發生翻天覆地的變化，有些小伙伴說這個對你文章寫作沒啥大用，但是我相信每一個前端開發工程師都有顆愛美的心是吧

常用快捷命令

記住以下命令，能幫助你更高效的開發，使用快捷鍵可能是程式員的必修課吧！
多試多練，能記得更快噢，

編輯器與視窗管理

Ctrl+Shift+P或者 F1: 打開命令面板，

Ctrl+Shift+N: 新建視窗，

Ctrl+Shift+W: 關閉視窗，

視窗分屏：Ctrl+1/Ctrl+3/Ctrl+3

Ctrl+B：顯示/隱藏側邊欄

Ctrl+"+/-"：放大/縮小界面

檔案操作

Ctrl+N：新建檔案

Ctrl+W：關閉檔案

Ctrl+Tab：檔案切換

格式調整

Ctrl+C/Ctrl+V：復制或剪切當前行/當前選中內容

Alt+Up/Down：向上/下移動一行

Shift+Alt+Up//Down：向上/下復制一行

Ctrl+Shift+K：洗掉當前行

Ctrl+Z：撤銷上一步操作

Shift+Alt+Right：選擇單行

最后

以上就是關于目前博主所掌握的前端必備插件了，其實還有一些沒什么用的，這里就不過多展示啦，相信我有了上述的插件，你開發的效率將大大提升

最后的最后，這篇文章我也肝了一個下午，同屬專欄爆肝文章，如果對你有幫助，不妨點個訂閱本專欄，三連關注一下博主唄，讓更多小伙伴看到這些用心的文章~

熱門文章推薦：

🥇 還不會搭建個人博客?手把手教你用Wordpress搭建只屬于你的世界~
🥈 Hexo的準備作業（手把手教你搭建Node.js/Git環境）
🥉 PHP實作簡易登陸注冊系統全步驟