vscode 插件推荐 - 献给所有前端工程师
VScode现在已经越来越完善。性能远超Atom和webstorm,你有什么理由不用它?
在这里,我会给你们推荐很多实用的插件,让你对 vscode 有更深刻的体会,渐渐地你就会知道它有多好用。
走马观花前,请先将你的 vscode 更新到最新版本。
通用插件
HTML Snippets
超级实用且初级的 H5代码片段以及提示
HTML CSS Support
让 html 标签上写class 智能提示当前项目所支持的样式
新版已经支持scss文件检索
Debugger for Chrome
让 vscode 映射 chrome 的 debug功能,静态页面都可以用 vscode 来打断点调试,真666~
配置稍微复杂一些,哪天心情好我再另写教程吧~
jQuery Code Snippets
jquery 重度患者必须品,废话不多说,上图
vscode-icon
让 vscode 资源树目录加上图标,必备良品!
Path Intellisense
自动路劲补全,默认不带这个功能的,赶紧装
Npm Intellisense
require 时的包提示(最新版的vscode已经集成此功能)
Document this
js 的注释模板 (注意:最新版的vscode已经原生支持)
ESlint
ESlint 接管原生 js 提示,可以自定制提示规则。这个比较高玩,不会的就算了,我之前发过一篇文章 sublime 配置 Atom js 语法校验中有提到,他们的配置文件是通用的。
HTMLHint
html代码检测
Project Manager
在多个项目之前快速切换的工具
beautify
格式化代码的工具
Bootstrap 3 Sinnpet
常用 bootstrap 的可以下
Atuo Rename Tag
修改 html 标签,自动帮你完成尾部闭合标签的同步修改,不过有些bug。
GitLens
丰富的git日志插件
fileheader
顶部注释模板,可定义作者、时间等信息,并会自动更新最后修改时间
filesize
在底部状态栏显示当前文件大小,点击后还可以看到详细创建、修改时间
Bracket Pair Colorizer
让括号拥有独立的颜色,易于区分。可以配合任意主题使用。
Quokka
使用:先shift+cmd+p (ctrl+shift+p)输入 quokka 选择 new javascript 就行了
Quokka 是一个调试工具插件,能够根据你正在编写的代码提供实时反馈。它易于配置,并能够预览变量的函数和计算值结果。另外,在使用 JSX 或 TypeScript 项目中,它能够开箱即用。
/*?*/
在某个表达式之后(或//?
在语句之后)插入特殊注释将仅记录该表达式的值。
例如,
a.b()/*?*/.c().d()
将输出a.b()
表达式的结果,和
a.b().c().d() /*?*/
// or just
a.b().c().d() //?
将输出完整a.b().c().d()
表达式的结果。
/*?.*/
在任何表达式之后插入特殊注释将报告执行表达式所花费的时间。
a() //?. $
显示a()
执行时间和结果。
插件地址:https://quokkajs.com/
CSS Peek
使用此插件,你可以追踪至样式表中 CSS 类和 ids 定义的地方。当你在 HTML 文件中右键单击选择器时,选择“ Go to Definition 和 Peek definition ”选项,它便会给你发送样式设置的 CSS 代码。
插件地址:
https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek
HTML Boilerplate
通过使用 HTML 模版插件,你就摆脱了为 HTML 新文件重新编写头部和正文标签的苦恼。你只需在空文件中输入 html,并按 Tab 键,即可生成干净的文档结构。
插件地址:
https://marketplace.visualstudio.com/items?itemName=sidthesloth.html5-boilerplate
Prettier
Prettier 是目前 Web 开发中最受欢迎的代码格式化程序。安装了这个插件,它就能够自动应用 Prettier,并将整个 JS 和 CSS 文档快速格式化为统一的代码样式。如果你还想使用 ESLint,那么还有个 Prettier – Eslint 插件,你可不要错过咯!
插件地址:
https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
Color Info
这个便捷的插件,将为你提供你在 CSS 中使用颜色的相关信息。你只需在颜色上悬停光标,就可以预览色块中色彩模型的(HEX、 RGB、HSL 和 CMYK)相关信息了。
插件地址:
https://marketplace.visualstudio.com/items?itemName=bierner.color-info
Icon Fonts
这是一个能够在项目中添加图标字体的插件。该插件支持超过 20 个热门的图标集,包括了 Font Awesome、Ionicons、Glyphicons 和 Material Design Icons。
插件地址:
https://marketplace.visualstudio.com/items?itemName=idleberg.icon-fonts
Minify
这是一款用于压缩合并 JavaScript 和 CSS 文件的应用程序。它提供了大量自定义的设置,以及自动压缩保存并导出为.min文件的选项。它能够分别通过 uglify-js、clean-css 和 html-minifier,与 JavaScript、CSS 和 HTML 协同工作。
使用F1 运行文件缩小器Minify
插件地址:
https://marketplace.visualstudio.com/items?itemName=HookyQR.minify
Vue插件
以下推荐vue框架所需的插件
vetur
语法高亮、智能感知、Emmet等
VueHelper
snippet代码片段
主题
Material
冷门、好看、实用。此主题已停更许久
Dracula
目前我觉得是vscode上最漂亮的主题,vscode 1.11+允许自定义statusBar等全局ui后,该主题也跟进改了很多小细节,良心!~
One Dark Pro
源于Atom,老版本的Atom One Dark主题可以扔了.
Themes
当然,在众多的实用插件中,岂能少了漂亮的主题呢?你每天都会与你的 VSCode 编辑器进行“亲密的接触”,为何不把它打扮得更漂亮些呢?这里有一些帮助你更改侧边栏的配色方案,以及图标的相关主题,与大家分享:
• One Monokai
• Aglia
• One Dark
• Material Icon
没有一款字体能够让所有人都喜欢。但是,总有一款字体能够让你满意。在等宽字体中,我推荐五款我觉得十分养眼的给大家,希望你们也喜欢。
1、Source Code Pro
这款来自Adobe的开源字体,是我的最爱。
Source Code Pro
2、Menlo
Menlo
3、Consolas
Consolas
4、Monaco
Monaco
5、Courier New
vscode 插件推荐 - 献给所有前端工程师相关推荐
- vscode 插件推荐 - 献给所有前端工程师(2018.4.29更新)
大家好,我是Moer. VScode现在已经越来越完善.性能远超Atom和webstorm,你有什么理由不用它? 在这里,我会给你们推荐很多实用的插件,让你对 vscode 有更深刻的体会,渐渐地你就 ...
- vscode插件推荐(个人使用)
前言 现在市面上的vscode推荐五花八门,八成的推荐都是cv出来的,毫无任何的意义,所以在这里自己整理一份属于自己的vscode插件推荐,可以给各位难兄难弟一点小小的建议 以下插件顺序不分先后,纯粹 ...
- flutter开发vscode插件推荐(开发必备)
这里是坚果前端小课堂,大家喜欢的话,可以关注我的公众号"坚果前端,",或者加我好友,获取更多精彩内容 vscode开发插件推荐 扩展是完成工作的快捷方式.许多扩展有助于减少重复性工 ...
- 用vscode编写静态页面_开发中实用的VSCode插件推荐
本篇文章给大家介绍一下开发中实用的VSCode插件推荐.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 工欲善其事必先利其器,以下是本人为前端开发收集的vscode插件,有需要的话赶 ...
- vscode插件推荐2020_2020年,前端开发者必备的10个VS Code扩展插件
全文共1689字,预计学习时长5分钟 图源:Unsplash 在2017年,VSCode有260万月活跃用户(这是我找到的最新官方数据,现在肯定更多),可以说是目前最好的代码编辑器. 它最大的一个特点 ...
- npm 安装less插件_2020 VSCode插件推荐
工欲善其事必先利其器,从事前端开发已近两年多,休闲时候收录一些觉得常用的插件. DOM操作 Auto Close Tag 自动闭合HTML标签. Auto Rename Tag 自动重命名标签. Au ...
- react开发vscode插件推荐
由于本人主要是做react开发,用的代码编辑器是传说中的宇宙第一前端神器vscode, 所以在这里记录并推荐一些本人开发过程中常用的一些vscode插件帮助开发. 1. 代码提示类插件 1.1 Rea ...
- vs插件html,VSCode插件推荐-html实时加载插件-live server
很多刚接触前端的小伙伴们在开发 html 页面的时候觉得调试很不方便.因为每一次进行html 代码的更改的时候,要先保存 html 代码,然后用浏览器打开这个代码.而一个 html 页面在开发的时候总 ...
- 【vscode插件集】学前端一年,珍藏的 40个 vscode 插件
猿生不能只有 Ctrl + C 和 Ctrl + V,还要有 Ctrl + D. 工欲善其事,必先利其器.今天给大家带来了博主学习前端一年多以来偷懒 ,呸~ 提升效率必备的 40 个 vscode 插 ...
最新文章
- Hadoop学习笔记-关于Hadoop你不得不知道的12个事实
- layui如何集成文件服务器,layui使用upload组件实现文件上传功能
- 学习笔记——Java
- 稍等片刻 正在提取文件_电脑文件误删除并且清空了回收站,怎么恢复文件?教你一招!...
- 在Opendaylight中karaf启动的时候自动安装feature
- 多线程并发神器--ThreadLocal
- MySQL-5.5.33主从复制
- oracle biee 11g客户端连接OCI 10g/11g数据源时报错
- 力扣1232.缀点成线
- –is-dba_查询存储–每个DBA的下一代工具
- php获取当天日期及星期几,[PHP]获取当天或指定日期属于星期几
- 专科python应届生工资多少-大四应届毕业生,学了两个月Python,找工作感觉好难啊?...
- [转载] 在Python中使用Matplotlib绘制常见图表
- Cocos2d-x v3.2笔记——总结Cocos2d-x 3.x版本的一些变化
- 李宏毅机器学习——半监督学习
- PHP 连接SQLServer的方法
- 雷塞控制器SMC304简单介绍
- HTML5 标签audio添加网页背景音乐代码
- sr650安装linux网卡驱动,SR650安装Windows2016添加RAID卡驱动
- ubuntu/window安装dukto