2019年,前端工程师需要安装的15个VSCode 插件

2,970 阅读2分钟

插件由Traversy Media提供,提到的插件基本都在用,而且真的蛮好用,所以推荐给大家,如果你有好用的插件可以留言评论,分享给更多的前端开发者们。

1.Live Server

唤起浏览器开启本地服务,对于

2.Live Sass Compiler

支持sass直接编译成css文件

3.HTML CSS Support

支持html编写class提示已经定义的类名

4.Auto Rename Tag

适用于 JSX、Vue、HTML,在修改标签名时,能在你修改开始(结束)标签的时候修改对应的结束(开始)标签,帮你减少 50% 的击键;

5.Prettier - Code formatter

实际上已经是代码格式化的工具标准,支持格式化几乎所有的前端代码,并且类似于 EditorConfig 支持用文件来配置格式规则;

6.JavaScript (ES6) code snippets

ES6语法中的JavaScript代码片段(支持JavaScript和TypeScript)

7.Turbo Console Log

通过自动执行编写有意义的日志消息的操作,使调试更加容易。

8.Guides 缩进参考

与内置的缩进参考线不同,Guides能够让你通过配置项来修改参考线的颜色、样式、缩进空白的背景色等,如果你愿意折腾,甚至能够配置出类似 Indent Rainbow 那样风格的参考线。下图是我使用 Solarized Dark 主题时参考线的配置:

{
    "guides.normal.color.dark": "rgba(91, 91, 91, 0.6)",
    "guides.normal.color.light": "rgba(220, 220, 220, 0.7)",
    "guides.active.color.dark": "rgba(210, 110, 210, 0.6)",
    "guides.active.color.light": "rgba(200, 100, 100, 0.7)",
    "guides.active.style": "dashed",
    "guides.normal.style": "dashed",
    "guides.stack.style": "dashed",
}

9.Bracket Pair Colorizer

识别代码中的各种括号,并且标记上不同的颜色,方便你扫视到匹配的括号,在括号使用非常多的情况下能环节眼部压力,编辑器快捷键固然好用,但是在临近嵌套多的情况下却有些力不从心

10.Code Spell Checker

强烈推荐,对大部分非英语母语又不想写出四不像变量名的程序员来说,正确识记拼写各种单词还是有不小的挑战,比模棱两可时需要去查在线词典不同的是,这款插件能实时的识别单词拼写是否有误,并给出提示,不少 bug 都是因为拼写错误导致的。

11.GitLens — Git supercharged

把VSCode 结合 Git的使用体验优化到了极致,能让我们在不离开编辑器,不执行任何命令的情况下知晓光标所在位置代码的修改时间、作者信息等。

12.Auto-Open Markdown Preview

打开Markdown文件时自动打开Markdown预览

13.Vetur

vue项目支持插件

14.ES7 React/Redux/GraphQL/React-Native snippets

react项目支持插件