对于前端开发的园友来说有可能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

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

 

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

  1. 一、HTML和CSS基础--开发工具--Sublime前端开发工具技巧介绍

    下载:官网下载(根据系统下载) 安装:按步骤安装即可 注意:当前稳定版本为2,但3的功能有提升:Mac和Windows下的快捷键不同 优点:启动速度快,界面简洁,可以直接打开图片. 1 菜单栏主要功能 ...

  2. Mac005--VS&webstorm前端开发工具安装

    Mac--Visual studio Code工具安装(企业常用) 安装网址:https://code.visualstudio.com/download 设置格式: 1.配置工作区与终端字体大小 常 ...

  3. HTML&CSS基础-前端免费开发工具Hbuilder介绍

    HTML&CSS基础-前端免费开发工具Hbuilder介绍 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 工欲善其事必先利其器,想要干好活得有一个好的工具. 一.文本编辑工 ...

  4. Sublime Text前端开发工具介绍

    Sublime Text前端开发工具介绍.. Sublime Text这款前端开发工具中的非常优秀的特性进行介绍 ------------ sublime text 3 3114 注册码 —– BEG ...

  5. Web前端开发工具总结

    前端开发工具: web前端开发乃及其它的相关开发, 推荐sublime text, webstorm(jetbrains公司系列产品)这两个的原因在于,有个技术叫emmet, http://docs. ...

  6. sublime 前端开发工具

    http://code.kpman.cc/2014/10/14/sublime-text-3-mac-%E6%8C%87%E5%8D%97/ gif 屏幕录制:http://recordit.co/ ...

  7. 【翻译】我钟爱的Visual Studio前端开发工具/扩展

    原文:[翻译]我钟爱的Visual Studio前端开发工具/扩展 怎么样让Visual Studio更好地编写HTML5, CSS3, JavaScript, jQuery,换句话说就是如何更好地做 ...

  8. 超高速前端开发工具——Emmet

    [由于 CSDN 不支持富文本编辑器写的文章迁移到 Markdown 编辑器中修改,已重发了一个重新排版的版本, 新版链接:http://blog.csdn.net/ys743276112/artic ...

  9. 前端开发工具icestar

    前端开发工具icestar 最近忙里偷闲,把之前的mock工具进行了全面的重构,最大的改变就是换了个名称icestar,icestar意思就是"爱死他",首先他的预想并不只是替代m ...

随机推荐

  1. laravel blade模板介绍

    第一步:首先写好模板 在sites下新建立一个app.blade.php文件 写入模板如: <!DOCTYPT html><html><head> <titl ...

  2. VB6之写注册表

    难免会遇到写注册表的情况,写了个实用点的RegWrite函数.为了减少代码量,用WScript.Shell取代了API来实现. 使用方式就在注释中了,就不再过多解释了.PS:注释比实现代码要丰富多了, ...

  3. ssh自动化出现的莫名报错

    代码如: ssh -q user@host <<EOF localhost EOF 会出现提示如: Pseudo-terminal will not be allocated becaus ...

  4. oracle linux 7.3 下用dtrace 跟踪 mysql-community-server-5.6.20

    第一部分:oracle linux 7.3 dtrace 安装: http://public-yum.oracle.com/   内核升极到 [root@server1 SPECS]# uname - ...

  5. Struts 之 通配符 路径匹配 常量用法 配置默认值

    Struts 框架学习 Action的开发的几种方式 方式1 : 继承ActionSupport     如果使用Struts校验功能,必须继承此类 方式2 : 实现Action接口 方式3 :不继承 ...

  6. Django学习(一)---基本配置及创建项目、应用

    安装:在Django官网下载最新版Django然后通过pip安装即可 一.创建项目 进入文件夹,打开cmd窗口,输入django-admin startproject myblog(项目名) 二.创建 ...

  7. 数控G代码编程详解大全

    一.G代码功能简述 G00------快速定位 G01------直线插补 G02------顺时针方向圆弧插补 G03------逆时针方向圆弧插补 G04------定时暂停 G05------通 ...

  8. java中常用的包、类、以及包中常用的类、方法、属性----sql和text\swing

    java中常用的包.类.以及包中常用的类.方法.属性 常用的包 java.io.*; java.util.*; java.lang.*; java.sql.*; java.text.*; java.a ...

  9. SSH三大框架的各自工作流程

    一.Struts2的工作流程:1.用户在客户端发起请求,客户端会初始化一个servlet容器请求:2.servlet容器把请求会传递给context容器,context容器找到目标web工程.3.进行 ...

  10. cocos2dx之WebView踩过的坑(android返回键处理问题)

    最近游戏接入了一个私服平台,由于没有sdk,所以支付相关的操作需要在网页端进行,也就是说点击充值需要在游戏内部弹出一个网页,并定位到平台充值的地址.查阅相关资料后决定使用cocos2dx自带的WebV ...