vscode运行html的插件_vscode前端常用插件推荐,搭建JQuery、Vue等开发环境
vscode是微软开发的的一款代码编辑器,就如官网上说的一样,vscode重新定义(redefined)了代码编辑器。当前市面上常用的轻型代码编辑器主要是:sublime,notepad++,editplus,atom这几种。比起notepad++、editplus,vscode集成了许多IDE才具有的功能,比起它们更像一个代码编辑器;比起sublime,vscode颜值更高,安装配置插件更为方便;比起atom,vscode启动速度更快,打开各种大文件不卡。可以说,vscode既拥有高自由度、又拥有高性能和高颜值,最关键的是,vscode还是一款免费并且有团队持续快速更新的代码编辑器。可以说,vscode是代码编辑器的首选。个人推荐编写前端代码时,代码编辑器选择vscode,IDE选择WebStorm。
vscode安装插件只需要点击图片所示按钮,即可进入拓展,在搜索框中输入插件名点击安装后,等待安装好即可点击重新加载重启vscode使得插件生效。
当你不需要某个插件时只需要进入扩展,点击对应插件右下角的齿轮按钮即可选择禁用或卸载该插件。
下面,我将推荐一些我认为对编写前端代码比较有帮助的vscode插件:
1.Auto Close Tag
自动闭合HTML/XML标签
2.Auto Rename Tag
自动完成另一侧标签的同步修改
3.Beautify
格式化代码,值得注意的是,beautify插件支持自定义格式化代码规则,例如:
{
"indent_size": 4,
"indent_char": " ",
"css": {
"indent_size": 2
}
}
mac版vscode中beautify的默认格式化代码按键为cmd+b,也可以自定义快捷键
4.Bracket Pair Colorizer
给括号加上不同的颜色,便于区分不同的区块,使用者可以定义不同括号类型和不同颜色
5.Debugger for Chrome
映射vscode上的断点到chrome上,方便调试
6.ESLint
js语法纠错,可以自定义配置,不过配置较为复杂,建议使用网上一些广泛使用的eslint配置,日后我也会专门针对eslint配置写一篇文章。
7.GitLens
方便查看git日志,git重度使用者必备
8.HTML CSS Support
智能提示CSS类名以及id
9.HTML Snippets
智能提示HTML标签,以及标签含义
10.JavaScript(ES6) code snippets
ES6语法智能提示,以及快速输入,不仅仅支持.js,还支持.ts,.jsx,.tsx,.html,.vue,省去了配置其支持各种包含js代码文件的时间
11.jQuery Code Snippets
jQuery代码智能提示
12.Markdown Preview Enhanced
实时预览markdown,markdown使用者必备
13.markdownlint
markdown语法纠错
14.Material Icon Theme
个人认为最好的vscode图标主题,支持更换不同色系的图标,值得点出的是,该插件更新极其频繁,基本和vscode更新频率保持一致
15.open in browser
vscode不像IDE一样能够直接在浏览器中打开html,而该插件支持快捷键与鼠标右键快速在浏览器中打开html文件,支持自定义打开指定的浏览器,包括:Firefox,Chrome,Opera,IE以及Safari
16.Path Intellisense
自动提示文件路径,支持各种快速引入文件
17.React/Redux/react-router Snippets
React/Redux/react-router语法智能提示
18.Vetur
Vue多功能集成插件,包括:语法高亮,智能提示,emmet,错误提示,格式化,自动补全,debugger。vscode官方钦定Vue插件,Vue开发者必备。
总结:vscode自从发布以来就横扫各大社区(毕竟微软爸爸),成为了许多开发者的首选代码编辑器。我根据个人vscode使用经验推荐了以上18个插件,希望能对大家有所帮助。同时,也欢迎大家进行交流!
2018.3.19更新:应 @雨雾星天 同学的要求,添加angular相关的vscode插件推荐。
1.Angular Files
集成了angular-cli的功能
2.Angular 5 Snippets
angular智能语法提示
欢迎大家进行交流~
vscode运行html的插件_vscode前端常用插件推荐,搭建JQuery、Vue等开发环境相关推荐
- bootstrap表单拖拽生成器插件_web前端常用插件、工具类库汇总,新手必收藏!!!...
前言 在开发中,我们经常会将一些常用的代码块.功能块进行封装,为的是更好的复用.那么,被抽离出来独立完成功能,通过API或配置项和其他部分交互,便形成了插件. 下面这些是我在工作中积累的一些常用的前端 ...
- html5常用插件大全,前端常用插件utils汇总
发布于 2020-03-06 工具库 || 数据处理 表单验证---jquery 图片懒加载---JavaScript---vue---react 图片预览类似朋友圈满足聊天递增图片的需求---vue ...
- vscode前端常用插件
vscode前端常用插件 文章目录 vscode前端常用插件 1. Live Server 1.1 Live Server的使用 2. rest client 3. GitLens 4. CSS pe ...
- chrome vue插件_VS Code 前端常用插件推荐
⊕.vscode安装插件只需要点击图片所示按钮,即可进入拓展,在搜索框中输入插件名点击安装后,等待安装好即可点击重新加载重启vscode使得插件生效. Ξ.当你不需要某个插件时只需要进入扩展,点击对应 ...
- 前端常用插件之calender日历控件
前端常用插件之calender日历控件 最近,发现一个插件--简单好用的页面日历控件,个人觉得有必要与大家分享一下,它就是calender日历控件. 准备环境: Bootstrap文件:bootstr ...
- 60+ 个前端常用插件库合集
60+ 个前端常用插件库合集 目录 60+ 个前端常用插件库合集 DataTables LazyLoad lightSlider alertify.js pickadate.js-日期/时间选择器 c ...
- 前端常用插件之artDialog弹出框
前端常用插件之artDialog弹出框 最近,发现一个插件--好看精致的页面弹出框,个人觉得有必要与大家分享一下,它就是artDialog弹出框. 引用上一篇文章<前端常用插件之art-temp ...
- CAD插件-幕墙设计常用插件sama整理
CAD插件-幕墙设计常用插件sama整理 SWF画弧形焊缝.LSP 标注多段线-(边长A1.对角线A2.角度A3)LSP 尺寸整理(修正)LSP 对齐afLSP 多段线顶点布块-(xxp)LSP 计算 ...
- 【花雕体验】07 搭建行空板开发环境之VSCode编程
行空板作为一台4核单板微型计算机,运行完整Python,亦可体验海量Python库,极简操作只需2步即可拥抱Python,多种连接方式,集成度高,利于教学,接口丰富扩展性强,是新一代Python教学利 ...
最新文章
- 第十五届全国大学生智能车竞赛百度深度学习车模
- 【JUC并发编程05】集合的线程安全
- 【bzoj3575】 Hnoi2014—道路堵塞
- 独立主题需要有index.php模板文件,wordpress 主题模板文件列表及其作用
- 如何挑选家用交换机 交换机选购攻略分享
- echarts 有引导线和内部文字_点、线、面构图的异同以及相互转化
- hdu 5326(基础题) work
- java cap是什么_寒冬面试归来总结最新蚂蚁4面(Java):CAP+数据强一致性+分布式等...
- OGRE粒子系统简介
- SQLServer组成:
- 程序员在网吧办公是什么感觉?网友:在被打的边缘疯狂试探!
- luogu题解P1967货车运输--树链剖分
- linux系统移植和根文件系统制作
- STM8S103定时器1,定时器2多路PWM波输出
- js实现word生成书签_javascript下用ActiveXObject控件替换word书签,将内容导
- 使用FeedDemon整理RSS Feed
- 对抗网络之PG-GAN,无条件下生成更真实的人脸图像
- 美国的非农数据一般会在几点发布
- 怀念—伤心者,不痛不痒,冷暖自知
- 全同态加密知识体系整理
热门文章
- 【SpringCloud】服务调用OpenFeign
- 10-11-010-简介-架构-架构简介
- 【kafka】kafka 2.3 关于控制Broker端入站连接数的讨论
- 【ES】ES 7.6报错 SearchPhaseExecutionException: all shards failed OutOfMemoryError
- spark学习-71-源代码:Endpoint模型介绍(3)-Endpoint SendAsk流程
- 【MAC】Mac下配置perl的DBD::MySQL模块
- 【MySQL】MySQL EXPLAIN用法和结果
- 【Flink】Flink 检查点 Triggering checkpoint createBlockoutputstream no further info information
- Intellij IDEA神器居然还藏着这些实用小技巧,爽!!!
- 这样的 Spring Cloud 微服务项目太牛了!