前言
準備告別webstorm入坑VS Code了,跟隨了我好久的webstorm在無數次瘋狂吃我內存的之后,終于被我狠下心扔掉了。換了VS Code后真是感覺上了天。在瘋狂裝了一堆插件后果斷卸載重裝了,選擇一些好的插件真的是重要呢。還有下文中有小姐姐出沒,請自動忽略。程序員不需要妹子,不過我需要。
先說一下我用的字體吧。Fira Code-傳說中程序員的專用字體(并沒有引戰的意思,我就是這樣看到的)。
1. Atom One Dark Theme
這個是用來配置編輯器主題的,比如語法高亮這種的,不同的小姐姐有不同的愛好,我喜歡這種配色的哈哈哈。安裝完在文件>首選項>顏色主題里選擇Atom One Dark就可以了。
2. Auto Close Tag (這個插件的作者自曝在更改大文件時,插件會出錯,還未解決,評分也已經降到了3星,使用時請注意)
3. Auto Rename Tag
有了這個在更改標簽的時候可以巧妙的偷個懶,標簽頭和尾改一個另外一個也會同步的。
4. Bracket Pair Colorizer
當括號也擁有了不同的顏色...
5. Color Highlight
ta會把css中的顏色顯示出來,比如#c0c0c0就會在邊上顯示出當前的顏色。
6. Color Picker
按住一定的快捷鍵或者在命令行輸入Color Picker,就可以調用顏色選擇面板啦。
7. Debugger for Chrome
感覺是模擬 chrome 的 debug功能,比如靜態頁面這種的就可以用 vscode 來打斷點調試 。
8. ESLint
這個東西大家應該都懂的吧。怎么配置我之前有寫過一篇文章。
9. HTML Class Suggestions 與 HTML CSS Support
HTML Class Suggestions 用來在HTML里提示引入的外部css選擇器名稱。HTML CSS Support 用來在html 里css屬性提示。
10. HTML Snippets
HTML代碼的提示功能,這個必須要的。
11. IntelliJ IDEA Key Bindings
這個插件看個人需要啦,我是因為webstrom的快捷鍵用習慣了,所以用這個把ta的快捷鍵拷過來了。
12. IntelliSense for CSS class names
CSS 類名補全工具,會自動掃描整個項目里面的 CSS 類名并在你輸入類名時做智能提示。
13. JavaScript (ES6) code snippets
ES6語法自動提示插件。
14. Less/Scss/Node.js/Modules/Npm/Path IntelliSense
各種智能提示插件。
15. Open HTML in Default Browser、Open in Browser
允許你右鍵然后直接在瀏覽器中預覽啦。
16. VSCode Great Icons
用不同的圖標來區分不同類型的文件,有很多類似的插件,不過個人覺得這款最好啦。
暫時我就用到這幾個插件啦,遇到好的再更新。好吧git的插件沒放上來,畢竟有過VS Code初始化git把代碼全刪掉的慘痛回憶,請接收我滿滿的怨念吧。