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

栏目: CSS · 发布时间: 5年前

内容简介:插件由Traversy Media提供,提到的插件基本都在用,而且真的蛮好用,所以推荐给大家,如果你有好用的插件可以留言评论,分享给更多的前端开发者们。唤起浏览器开启本地服务,对于支持sass直接编译成css文件

插件由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 都是因为拼写错误导致的。


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Web Designer Idea

Web Designer Idea

梁景红 / 电子工业出版社 / 2006年 / ¥55.00

这是一本以“目的、信息、设计、创意”作为根脉的关于网页视觉的书籍,畅谈的话题从策划到编辑再到设计,从而讨论“我们要建立怎样的站点,并以何种形式完成它”的问题。 全书共分四个部分,分别是网站建设目的,网站信息内容,页面形式设计,网页创作构思。 四部分有机地结合,形成一个统一的整体。“目的”部分以建设网站的目的为主,带领设计师从建站目的的角度,探讨如何抓住首要问题;如何建立网站雏形;如何打开狭隘的、局......一起来看看 《Web Designer Idea》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

URL 编码/解码
URL 编码/解码

URL 编码/解码

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具