前端开发工具Brackets介绍,安装及安装Emme插件时踩过的坑

  对于前端开发的园友来说有可能IDE工具有很多,层次不穷,还有每个人的喜好及习惯也不一样,因为我是一名后端开发的.Net程序员,但是大家都知道,现在都提倡什么全栈工程师,所以也得会点前端开发,所以我对于前端来说可能是个菜鸟,大神绕过,勿喷!我刚接触程序,开发网站时主要用Dreamweaver,后来也用过WebStorm和Sublime2,不过在学习Bootstrap3的时候偶然的机会接触到Brackets就个人比较喜欢他,就不想用别的IDE了,我这里不做这些工具的比较,说哪一个更好,我觉得各有所爱吧,只要自己用着顺手即可;
  Brackets 介绍

  Brackets 是一个免费、开源且跨平台的 HTML/CSS/JavaScript 前端 WEB 集成开发环境 (IDE工具)。该项目由 Adobe创建和维护,根据MIT许可证发布,支持 Windows、Linux 以及 OS X 平台。
  Brackets 的特点是简约、优雅、快捷!它没有很多的视图或者面板,也没太多花哨的功能,它的核心目标是减少在开发过程中那些效率低下的重复性工作,例如浏览器刷新,修改元素的样式,搜索功能等等。和他有可能跟别的通用代码编辑器不一样,Brackets 是专门针对 WEB 前端开发而生,所以专注,还有一个我比较喜欢的地方他虽然没有很多花哨的功能,但是它在Github上有很多插件,你可以拿过来直接用即可,可以让你的Brackets很强大,能屈能伸;

Brackets 下载地址:

  官网:  https://github.com/adobe/brackets/releases/download/release-1.10/Brackets.Release.1.10.msi

       百度网盘:http://pan.baidu.com/s/1min5dOk

      Brackets安装:一路下一步即可;

      Brackets工具界面:

     

上面图只是简单展示了一下行内快速编辑功能,就是比如在当前页面引用的js或者css等代码,在当前行上ctrl+e即可在当前行下面把相关代码调出来,直接修改,不用去在引用页面去修改,这个我觉得太方便了;还有很多换肤、不用刷新浏览器既可以做到实时预览等很多功能,各位可以自己去玩一玩!我上面我提到他可以支持很多插件,其中我今天重点提到的时Emmet插件,有可能很多朋友都用过,或许在别的IDE里使用过,Bracket和Emmet配合写前端更顺手了;Emmet下载地址:https://emmet.io/download/;

  

 上图可以看出他支持的IDE很多,使用别IDE的朋友可以试试,这个会让你开发前端很方便;

bruckets安装Emmet插件:

      安装过程很简单,有三种方法:第一种为从github上把下载链接复制上粘贴到brucket插件里;

第二种方法:从github上下载zip压缩包,直接拖到相应位置即可

第三种方法为:直接找到插件安装目录(帮助->显示扩展目录->user)把下载的压缩包放进去就可以,下面图是我安装的插件目录,从图上可以看出我安装了Brucket-Emmet;

安装完成以后可以试试他的威力了,想验证的话创建一个页面输入!然后按Tab键是否有代码就可以,Emmet的详细使用规则及使用方法-我这里就推荐一个文章,大家可以去看看:http://www.iteye.com/news/27580,如果没效果的话检查一下插件配置是否正常;

第一步查看node_modules文件夹是否存在,没有的话得安装nodejs,然后把nodejs的该目录复制到该目录路下,一般通过最新版的Brucket插件安装,不是直接复制进去的话会有,nodejs安装这里就不写了;

第二部查看该node_modules下的emmet下的lib文件夹中是否缺少配置json文件;

这两步配置好以后就能正常使用了,我这里为了不让园友走弯路,我把相关的插件及配置后的文件都分享到我的百度网盘中,大家直接放到你的插件按目录下即可;

插件下载地址:http://pan.baidu.com/s/1c2gZL0O

希望能帮助到各位园友,今天就这样吧;

时间: 2024-08-04 04:57:06

前端开发工具Brackets介绍,安装及安装Emme插件时踩过的坑的相关文章

Brackets - 强大免费的开源跨平台Web前端开发工具IDE (HTML/CSS/Javascript代码编辑器)

Brackets 是一个免费.开源且跨平台的 HTML/CSS/JavaScript 前端 WEB 集成开发环境 (IDE工具).该项目由 Adobe 创建和维护,根据MIT许可证发布,支持 Windows.Linux 以及 OS X 平台. Brackets 的特点是简约.优雅.快捷!它没有很多的视图或者面板,也没太多花哨的功能,它的核心目标是减少在开发过程中那些效率低下的重复性工作,例如浏览器刷新,修改元素的样式,搜索功能等等.和 Sublime Text.Everedit 等通用代码编辑器

对网站前端开发工具和浏览器的介绍

Web 前端开发工具 1.NotePad ① 占用内存小,微软自带,免安装. ② 不方便编辑代码,一次只能打开一个文件. ③ 不可扩展插件,写代码效率低. ④ 对于代码缩进不太友好. ⑤ 通常来说支持基本的纯文字编辑工作.格式不是很好控制. 2.EditPlus ① 小巧但功能强大,占用内存小. ② 颜色标记智能代码提示以及高亮显示. ③ 同时编辑多个文件 ④ 可支持各类丰富的插件. ⑤ 支持代码高亮显示,并且支持多种语言. ⑥ NotePad开源且跨平台. ⑦ 方便编辑代码.可以同时编辑多个文

Android笔记1——开发前奏1开发环境搭建和开发工具使用介绍

转载请注明http://www.cnblogs.com/devtrees/p/4382234.html 欢迎指正错误,共同进步! 一背景知识 1.1G-4G的介绍 Generation(一代) WAP(wait and pay) Wireless Markup Language(WML)精简版的html语言 二.Android概述 1.Android操作系统介绍 2.Android历史介绍 3.Android系统架构(重点) 第一层:应用层Application 第二层:应用框架层Applica

常用前端开发工具合集

1.Firebug http://getfirebug.com/最流行的前端开发工具 2.HttpWatch http://www.httpwatch.com/集成在IE和Firefox上的监听HTTP和HTTPS的工具 3.Fiddler http://www.fiddler2.com/fiddler2/Fiddler是一个记录你电脑和网络之间所有HTTP(S)请求的网络调试代理 4.HttpFox https://addons.mozilla.org/eu/firefox/addon/664

[翻译] iOS开发工具的介绍(第一部分)

IOS DEVELOPMENT TIPS & TRICKS - PART I http://blog.trifork.com/2013/12/19/ios-development-tips-tricks-part-i/ As you might know, I am very fond of developing apps for the iOS platform. I started back in mid-2009 by trying to create an app for the Dut

sublime+emmet前端开发工具

Sublime简直神一样的存在! 逗的了python,耍的了json,玩得起HTML,撩的了CSS.反正目前能用到几种代码的都能用它编辑. 上手容易,界面清晰,简洁方便,可扩展性强.eclipse,dw什么的启动起来实在慢.而且黑色背景很炫酷.还有各种惊喜随时等你去发现. 恩,说正事,今天开始接触D3.js,本来打算安装myeclipse+tomcat的(用不习惯DW这种半自动的前端开发工具,没开发过很复杂的网站,所以都是前端后台都在eclipse上做,虽然前端大部分都是找模板修改一下),突然意

WEB前端开发工具总结

前端开发工具: web前端开发乃及其它的相关开发, 推荐sublime text, webstorm(jetbrains公司系列产品)这两个的原因在于,有个技术叫emmet, http://docs.emmet.io,而这两个对他的支持是: sublime text 是所有编辑器里边支持emmet比较好的的唯一一款. webstorm是所有编辑器里边唯一内置emmet的一款,并且将emmet的精神往前推动的一款. webstorm针对前端er. 他们的详细对比: http://www.36ria

便捷的前端开发工具

便捷的前端开发工具 说到工具?那是可是不得了的东西,它是人类文明进步的基石.人类,从石器时代发展到现代社会,也是工具,从石具到现代高科技的演变过程史!当然啦!我们现在互联网时代,前端开发,也是离不开工具的.使用工具是为了创造更好的工具,为了更高的效率.那作为前端爱好者或前端开发者们,你们知道哪些前端开发工具吗?享受了它们的便捷了吗?今天,我就给大家介绍几个开发者工具吧! CSS检查工具-CKStyle 之前的几篇文章给大家介绍有关CSS有关的知识点,想必有不少人已经遇到过有关CSS压缩或检查的问

前端开发工具集合

收集的一些轻量级非常实用的前端开发小工具: CSS3相关 CSS3样式生成器:http://www.css88.com/tool/css3Preview/ CSS3渐变样式生成器,类似Photoshop中的渐变界面:http://www.colorzilla.com/gradient-editor/ CSS3动画制作工具Sencha Animator:http://www.sencha.com/products/animator/ 背景色alpha透明工具:http://www.linxz.de