美文网首页让前端飞Web前端之路
提高前端开发效率—前端代码编辑器

提高前端开发效率—前端代码编辑器

作者: 前端小咖 | 来源:发表于2019-12-03 18:30 被阅读0次

工欲善其事,必先利其器。但我最开始接触网页的时候,人们普遍认为能用记事本写HTML和CSS的才是大神,彼时也没有前端这一说法,随着网页越来越复杂用记事本的开发效率就太低了,这一篇主要介绍几种我现在还常用到的几款编辑器。

但还是要说明一点,这些编辑器和IDE都只是写代码的工具而已,不一定要评个谁优谁劣,看到很多类似的争论感觉挺可笑的,就一个编辑器而言,有的人说他的优点云云,难道别的编辑器就没有吗,用的顺手,开发的效率高就是好的工具。

Dreamweaver

Dreamweaver原来是鼎鼎大名的,很长一段时间DW就是网页制作的主战场,DW可是被称为IDE,提供了很多功能,具有所见即所得的功能,DW有三种视图模式:代码模式、设计模式和拆分模式,拆分模式,对于代码不熟练的初学者非常友好。

目前DW的主要问题是老,当然如果老而弥坚是没问题的,但现在流行的前后端分离的项目,VUE,Angular,React框架,使用DW有力不从心的感觉,DW不支持ES6语法的高亮提示。不支持CSS预编译语法。不知道DW会不会推出新的版本,如果不,大概DW会逐渐退出前端的舞台了。

现在我需要他的原因有两个,

1、设计模式

比如编辑一个静态的复杂的表格,在设计模式下可以像word一样编辑表格,添加修改内容,合并拆分表格。或者使用拆分模式一边看代码,一边看效果。

另外如果拷贝黏贴一篇网上的文章到设计模式中,将会实现很好的格式化,几乎很少无意义的标签和样式,这是其他编辑器和富文本编辑器做不到的。

2、查找和替换功能

DW查找和替换窗口非常友好,可以在当前页面,打开的页面,当前站点,指定目录查找和替换文本,有时候非常方便。

Sublime

Sublime只是一个文本编辑器,它的拥护者也很多,非常轻量级,打开文件速度很快,

但要愉快的使用Sublime,需要安装很多插件,对于我这样的懒人,同样需要安装插件的情况下我比较愿意使用VS code。

VS Code

VS Code全称是Visual Studio Code ,它的特点有一点很值得注意,那就是免费,安装VS Code及其插件非常容易,和微软的其他Visual Studio产品比较,VS Code只是一款轻量级的代码编辑器,而不是一个重量级的完整 IDE,但在前端领域已经足够优秀。

WebStorm

WebStorm目前是我的最爱,它的功能全,集成度高,几乎想要的都有,开发效率非常高,但WebStorm的缺点是打开速度慢,占用内存多,如果你的电脑配置不好,也许用它不是一个好的选择。另外WebStorm是收费软件,这一点比不过VS Code。

Hbuilder

Hbuilder是DCloud推出的一款支持HTML5的Web开发IDE。比上面的几种编辑器比较Hbuilder的用户少了一些,Hbuilder宣称自己快,也许指的是开发效率,就其打开速度和响应速度而言,我觉得可以用一个慢字形容。

Hbuilder对BootStrap和webApp的支持非常好,如果做这样的项目Hbuilder是个好选择。

如果对于学习编程有很多疑惑,没有思路,不知道如何有效率的学习,可以添加我的前端交流学习群 939106847,需要最新系统的学习教程也可以管我要。做了很多年开发,对于学习方式,如何提高自己的技术有一定的经验,术业有专攻,多跟有经验的人交流学习,对这个行业信息了解的多,职业发展的空间就越大

相关文章

  • 学习笔记:React组件

    一、前沿 React主要的作用是提高前端开发MVC架构中的View开发效率。提高前端页面的代码复用率、简化前端数据...

  • 提高前端开发效率—前端代码编辑器

    工欲善其事,必先利其器。但我最开始接触网页的时候,人们普遍认为能用记事本写HTML和CSS的才是大神,彼时也没有前...

  • web 前端开发规范

    web 前端开发规范 web 前端开发规范的意义 提高团队的协作能力 提高代码的复用利用率 可以写出质量更高,效率...

  • 前端开发利器:Emmet 介绍

    Emmet 是一个能提高前端开发效率的编辑器插件,支持 Sublime,Atom,TextMate,Nodepad...

  • 关于Snippets和Bootstrap 3 Snippets插

    Snippets Snippets就是代码片段,是前端开发中节省时间、提高效率、减少出错的好东西。前端开发中,最容...

  • 一稿设计,多端适配优雅的解决方案 - rem

    规范目的 为提高前端团队开发效率,输出高质量的前端页面代码,提高UI设计还原度,特编写该规范文档。本文档如有不对或...

  • Emmet 常用语法

    Emmet 是一个能大幅度提高前端开发效率的一个工具,通过在编辑器中输入 HTML 或 CSS 的代码缩写,按T...

  • jenkins+gitlab pipeline 自动化持续集成(

    一、需求背景 随着前端开发工程化的发展, 为了提高项目的开发效率、代码可维护性、代码质量、代码规范、业务正确性、以...

  • 记一个前端自动化测试解决方案探析

    前端测试一直是前端项目开发过程中及其重要的一个环节,高效的测试方法可以减少我们进行代码自测的时间,提高开发效率,如...

  • gulp 用法大全

    gulp 是基于 node 实现 Web 前端自动化开发的工具,利用它能够极大的提高开发效率。在 Web 前端开发...

网友评论

    本文标题:提高前端开发效率—前端代码编辑器

    本文链接:https://www.haomeiwen.com/subject/mokhgctx.html