前言
准备告别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把代码全删掉的惨痛回忆,请接收我满满的怨念吧。