brackets 禁用JSLint 使用JShint 插件和同时分屏编辑html+css+js

说到前端开发编译器,网上有很多,刚开始的时候我使用的是dreawweaver cs6。当然很多大神不屑于这个啦,这个软件的好处就是写网页的时候不想写了就在拆分那里把素材拉一下,嘻嘻~~自动生成的内行样式~~咳咳~其实它的代码拆分和实时预览很多时候跟直接在浏览器上渲染的效果是不一样的。有时脑残了对着那个实时预览一直在骂:明明就是这样写啊,为什么不出效果。其实只要在浏览器上走一遍就行·~~~~

然后出了点事就把dw卸了~~

  • 现在来讲一下Adobe开源编译器Brackets.看一下它的界面




刚开始用dw的时候是没有这种分屏的界面的,有时写完html布局,然后要在样式表里面写样式,要添个class要在html和css文件里面来回的切换神烦,就想找到个分屏的可以同时看着写。然后找到了这款~~之前不知道subine也是可以分好多屏的~~在view哪里~~view-->vertical(垂直分两个屏,还有水平分屏~~)这个编译器的的好处是可以实时预览,也就是你一改代码再浏览器那里就重新渲染了,这个在介绍这款编译器的文档中都有说到。


  • 说到这款编译器写js的时候,内定是使用JSLint这个插件,绑在里面的,这个语法检查工具实在是太严格了,网上说对于新手来时对于编码规范很有用,刚开始的时候我就很相信了,写了一个很短小的代码都报很多错,缩进多少个格都有严格规定的,我只能说用这个写出的代码一定看着很舒服。只是写得时候痛苦啊。所以就想换个轻一点的JShint,同样是可以检查语法的工具,是分出来的吧好像。这样问题来了。

只要三步就可以搞定JS代码用jshint工具检查而不是JS Lint检查,因为JS Lint实在太苛刻了,用JShint同样可以,关于这两个的区别和使用规则网上去搜一下很多的。

  • 然后就是在这个编译器的右边看到框到的那个插件,进去搜jshint下载下来
  • 这个是我已经安装了所以右边的install安装按钮显示暗了,没有安装的话不会暗的。

  • 然后回到主界面

点Debug-->open perference files 就出现下面这个界面。





  • 然后在右边的brackets .json 里面添加以下代码

  • "jshint.scanProjectOnly": true


别忘了上一行末尾加个逗号。




然后就关了这个编译器重新启动,可以看到

这时候报错是JSHint 了




其实这两个都同时报错的,只要我们改了jshint的错误都是可以运行的了,不必要再理会JSLint的。因为我们即想编码规范也不想那么被虐,这种方法是可行的吧。嘻嘻,小谈,如果之后找到更好的办法再来更新

这个编译器还有很多优点,比如在html代码里对着id或者class标签点 ctrl+e可以实现css样式马上编辑,还有右边的插件直接进行PSD格式的文件编码等等。更多惊喜等着去实践。


你可能感兴趣的:(浅谈前端学习)