基礎(chǔ)必備插件
- Chinese (Simplified) Language Pack for Visual Studio Code
讓軟件顯示為簡(jiǎn)體中文語(yǔ)言。
- Prettier：代碼格式化
Prettier 是一個(gè)代碼格式化工具风范，只關(guān)注格式化聚唐，但不具備校驗(yàn)功能。在一個(gè)多人協(xié)同開(kāi)發(fā)的團(tuán)隊(duì)中捅位，統(tǒng)一的代碼編寫(xiě)規(guī)范非常重要轧葛。一套規(guī)范可以讓我們編寫(xiě)的代碼達(dá)到一致的風(fēng)格，提高代碼的可讀性和統(tǒng)一性艇搀。自然維護(hù)性也會(huì)有所提高尿扯。
- ESLint：代碼格式校驗(yàn)
日常開(kāi)發(fā)中，建議用可以用 Prettier 做代碼格式化焰雕，然后用 eslint 做校驗(yàn)衷笋。
- Beautify
代碼格式化工具。
Beautify 插件可以快速格式化你的代碼格式矩屁，讓你在編寫(xiě)代碼時(shí)雜亂的代碼結(jié)構(gòu)瞬間變得非常規(guī)整辟宗，代碼強(qiáng)迫癥必備，較好的代碼格式在后期維護(hù)以及他人閱讀時(shí)都會(huì)有很多的便利档插。
插件支持的語(yǔ)言非常多慢蜓，基本堵蓋了目前所有的語(yǔ)言，而且你還可以自定義代碼格式化的結(jié)構(gòu)郭膛。
- Auto Close Tag晨抡、Auto Rename Tag
自動(dòng)閉合標(biāo)簽、自動(dòng)對(duì)標(biāo)簽重命名则剃。
js,css相關(guān)插件
- open in browser
安裝open in browser插件后耘柱，在 HTML 文件中「右鍵選擇 --> Open in Default Browser」，即可在瀏覽器中預(yù)覽網(wǎng)頁(yè)棍现。
- Live Server
在本地啟動(dòng)一個(gè)服務(wù)器调煎，代碼寫(xiě)完后可以實(shí)現(xiàn)「熱更新」，實(shí)時(shí)地在網(wǎng)頁(yè)中看到運(yùn)行效果己肮。就不需要每次都得手動(dòng)刷新頁(yè)面了士袄。
使用方式：安裝插件后悲关，開(kāi)始寫(xiě)代碼；代碼寫(xiě)完后娄柳，右鍵選擇「Open with Live Server」寓辱。
- JavaScript(ES6) code snippets
ES6 語(yǔ)法智能提示，支持快速輸入赤拒。
- CSS Peek
增強(qiáng) HTML 和 CSS 之間的關(guān)聯(lián)秫筏，快速查看該元素上的 CSS 樣式。
vue相關(guān)插件
- Vetur
Vue 多功能集成插件挎挖，包括：語(yǔ)法高亮这敬，智能提示，emmet蕉朵，錯(cuò)誤提示崔涂，格式化，自動(dòng)補(bǔ)全墓造，debugger堪伍。VS Code 官方欽定 Vue 插件，Vue 開(kāi)發(fā)者必備觅闽。
- Vue CSS Peek
CSS Peek 對(duì) Vue 沒(méi)有支持帝雇，該插件提供了對(duì) Vue 文件的支持。
- Vue VSCode Snippets
vue補(bǔ)全
- Element UI Snippets
Element UI補(bǔ)全
react相關(guān)插件
- ES7 React/Redux/GraphQL/React-Native snippets
React/Redux/react-router 的語(yǔ)法智能提示蛉拙。
小程序,app相關(guān)插件
- minapp：小程序支持
小程序開(kāi)發(fā)必備插件尸闸。
Markdown相關(guān)插件
- Markdown Preview Github Styling
以 GitHub 風(fēng)格預(yù)覽 Markdown 樣式，十分簡(jiǎn)潔優(yōu)雅孕锄。就像下面這樣吮廉，左側(cè)書(shū)寫(xiě) Markdown 文本，右側(cè)預(yù)覽 Markdown 的渲染效果：
- Markdown Preview Enhanced
預(yù)覽 Markdown 樣式畸肆。
VS Code 配置相關(guān)插件
- Settings Sync
地址：https://github.com/shanalikhan/code-settings-sync
作用：多臺(tái)設(shè)備之間宦芦，同步 VS Code 配置。通過(guò)登錄 GitHub 賬號(hào)來(lái)使用這個(gè)同步工具轴脐。
- vscode-syncing
地址：https://github.com/nonoroazoro/vscode-syncing
作用：多臺(tái)設(shè)備之間调卑，同步 VS Code 配置。
其他推薦插件
- GitLens
Git 神器大咱，碼農(nóng)必備恬涧。
- highlight-icemode：選中相同的代碼時(shí)，讓高亮顯示更加明顯
VSCode 自帶的高亮顯示碴巾，實(shí)在是不夠顯眼溯捆。用插件支持一下吧。
所用了這個(gè)插件之后厦瓢，VS Code 自帶的高亮就可以關(guān)掉了：
在用戶(hù)設(shè)置里添加"editor.selectionHighlight": false即可提揍。
參考鏈接：vscode 選中后相同內(nèi)容高亮插件推薦
- TODO Highlight(備忘插件)
寫(xiě)代碼過(guò)程中啤月，突然發(fā)現(xiàn)一個(gè) Bug，但是又不想停下來(lái)手中的活碳锈，以免打斷思路顽冶，怎么辦欺抗？按照代碼規(guī)范售碳，我們一般是在代碼中加個(gè) TODO 注釋。比如：（注意绞呈，一定要寫(xiě)成大寫(xiě)TODO贸人，而不是小寫(xiě)的todo）
//TODO:這里有個(gè)bug，我一會(huì)兒再收拾你
- javascript console utils：快速打印 log 日志
安裝這個(gè)插件后佃声，當(dāng)我們按住快捷鍵「Cmd + Shift + L」后艺智，即可自動(dòng)出現(xiàn)日志 console.log()。簡(jiǎn)直是日志黨福音圾亏。
當(dāng)我們選中某個(gè)變量 name十拣，然后按住快捷鍵「Cmd + Shift + L」，即可自動(dòng)出現(xiàn)這個(gè)變量的日志 console.log(name)志鹃。
其他的同類(lèi)插件還有：Turbo Console Log夭问。
不過(guò)，生產(chǎn)環(huán)境的代碼曹铃，還是盡量少打日志比較好缰趋，避免出現(xiàn)一些異常。
- Local History
維護(hù)文件的本地歷史記錄陕见，強(qiáng)烈建議安裝秘血。代碼意外丟失時(shí)，有時(shí)可以救命评甜。
- 必備調(diào)試工具 Debugger for Chrome
此工具簡(jiǎn)直就是前端開(kāi)發(fā)必備灰粮，將大大地改變你的開(kāi)發(fā)與調(diào)試模式。
以往的前端調(diào)試忍坷，主要是 JavaScript 調(diào)試粘舟，你需要在 Chrome 的控制臺(tái)中找到對(duì)應(yīng)代碼的部分，添加上斷點(diǎn)承匣，然后在 Chrome 的控制臺(tái)中單步調(diào)試并在其中查看值的變化蓖乘。
而在使用了 Debugger for Chrome 后，當(dāng)代碼在 Chrome 中運(yùn)行后韧骗，你可以直接在 VSCode 中加上斷點(diǎn)嘉抒，點(diǎn)擊運(yùn)行后，Chrome 中的頁(yè)面繼續(xù)運(yùn)行袍暴，執(zhí)行到你在 VSCode 中添加的斷點(diǎn)后些侍，你可以直接在 VSCode 中進(jìn)行單步調(diào)試隶症。
- 代碼拼寫(xiě)檢查 Code Spell Checker
此插件安裝后就不用管就好了，在你代碼中有單詞拼寫(xiě)錯(cuò)誤時(shí)岗宣，你就會(huì)發(fā)現(xiàn)它的好處蚂会，因?yàn)槲覀儗?xiě)代碼畢竟都是大量的英文單詞變量定義，插件還可以給出錯(cuò)誤拼寫(xiě)單詞的建議耗式。
- Highlight Matching Tag標(biāo)簽高亮
- path autocomplete:路徑智能補(bǔ)全
