几款好用的前端开发编辑器推荐安利

目录
  • 一,VSCode
  • 二,Sublime Text!
  • 三,webStrom
  • 四,Atom
  • 五,Brackets
  • 六,HBuilder
  • 七,CodePen
  • 八,runJs

一,VSCode

微软出厂的高颜值编辑器
VSCode官网

1.加载大文件几乎秒开,运行速度很快
2.跨平台的文本编辑器,内置了对许多主流语言的支持
3.非常方便的管理插件,可以快速找到适合自己的前端插件
4.完全免费(非常推荐)

二,Sublime Text!

Sublime Text 是一个文本编辑器(收费软件,可以无限期试用,但是会有激活提示弹窗),同时也是一个先进的代码编辑器。Sublime Text是由程序员Jon Skinner于2008年1月份所开发出来,它最初被设计为一个具有丰富扩展功能的Vim。
Sublime Text!官网

是款比较主流的前端编辑器体积非常小,运行速度特别快非常强大的命令面板功能,可以模糊匹配命令HTML和散文先进的文本编辑器。Sublime Text 3漂亮的用户界面和强大的功能,例如:拼写检查,书签,完整的 Python API , Goto 功能,即时项目切换,多选择,多窗口等等。同时支持Windows、Linux、Mac OS X等操作系统。。

三,webStrom

WebStorm 是JetBrains公司旗下一款JavaScript 开发工具。已经被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。与IntelliJ IDEA同源,继承了IntelliJ IDEA强大的JS部分的功能。

webStrom官网

集成了许多强大的功能快速查找文件,快速搜索对js的开发全面支持,对主流行语言的支持集成了多版本版本控制工具

四,Atom

Atom中文网

github专门为程序员推出的一个跨平台文本编辑器支持CSS,HTML,JavaScript等网页编程语言自动完成分屏功能,集成了文件管理器。常用于web 开发

五,Brackets

Brackets是一款轻巧但功能强大的现代文本编辑器。Brackets 非常适合前端人员使用,该编辑器可以实时预览效果,让你一边编辑一边查看输出效果,非常直观。
Brackets官网

1.快速编辑
在你编辑HTML的CSS样式时不用再单独打开一个页签编辑CSS,可以直接编辑,避免页签之间的来回切换,提高了编辑效率

2.实时预览
Brackets中内置了一个webserver,点击右上角闪电⚡符号,brackets会启动内置服务器,并启动chrome浏览器打开工作目录下被选中的文件。

3.PHP支持
Brackets中的内置LSP( 语言服务器协议)支持为许多开发人员开放了对PHP,Python等语言的支持。并启用诸如代码完成,诊断,跳转到定义等功能。

六,HBuilder

HBuilder是DCloud(数字天堂)推出的一款支持HTML5的Web开发IDE。HBuilder的编写用到了Java、C、Web和Ruby。HBuilder本身主体是由Java编写。它基于Eclipse,所以顺其自然地兼容了Eclipse的插件。
HBuilder官网

快,是HBuilder的最大优势,通过完整的语法提示和代码输入法、代码块等,大幅提升HTML、js、css的开发效率。秒开大文件提供比其他工具更优秀的vue支持大幅提升你的vue开发效率HX是唯一一个新建文件默认类型是markdown的编辑器,也是对md支持最强的编辑器,你甚至可以直接粘贴表格、图片进来。一流的ast语法分析能力语法提示精准、全面、细致,转到定义、重构完善

七,CodePen

有时我们需要调试一些前端代码(无论是 html、css,还是 js),或者要制作一个 demo 分享给他人。这些都可以借助 CodePen 这个网站来实现。
CodePen官网

即时预览。我们甚至可以本地修改并即时预览别人的作品。支持多种主流预处理器。快速添加外部资源文件。只需在输入框里输入库名, CodePen 就会从 cdnjs 上寻找匹配的 css 或 js 库。免费创建模板。支持创建三个模板,不是每个作品都需要从白板开始。优秀的外嵌体验。在 WordPress 或 Reddit 等支持 oEmbed 的平台上,只要简单地把链接贴入编辑框,发布后会自动转为嵌入作品。

八,runJs

这是国内一个很赞的在线编辑器
runJs官网

RunJS 是一个在线的 HTML、Javascript、CSS 等 web 前端代码的编辑分享平台,拥有实时预览、高亮显示、代码格式化等功能,我们提供 OSChina、微博、qq、github、google、yahoo、hotmail这七种登录方式,你只需要有七种任意一个帐号就可以点击右上角的登 录按钮来立即体验RunJS。

以上就是几款好用的前端编辑器安利的详细内容,更多关于前端编辑器的资料请关注我们其它相关文章!

(0)

相关推荐

  • 5款适合PHP使用的HTML编辑器推荐

    概述 Web开发中,很多地方都会用到HTML编辑器(富文本编辑器),我也用过几种,如UEditor.CkEditor等.这几天看了几篇文章,都是关于HTML编辑器的,写个文章记录下. 推荐的编辑器 simditor 这个编辑器是前几天刚看到的,自己还没来得及使用,但是一下子就喜欢上了这个编辑器的样式. Simditor是Tower开源的所见即所得的在线富文本编辑器.Simditor的理念是保持简单,避免过度的功能,每一个特性都追求极致的用户体验.同时,Simditor也很容易扩展. TinyMC

  • 10款最佳Python开发工具推荐,每一款都是神器

    在人工智能开启的时代,Python作为人工智能的首选语言,前景可以预见.因此学习Python的人越来越多.不过,很多初学Python的小白都一定有过这样的体验,因为没有好用的Python开发工具而吃了很多苦头.工欲善其事必先利其器,这道理只有在实践中才会深有体会.那么初Python用什么工具好?各个开发工具又有哪些特点?本文我就以上的问题,为初学者们介绍一下比较受欢迎且好用的工具. 一.最强终端:Upterm 本来想推荐fish或者zsh,但其实这两个我也主要是贪图自动补全这个特性.最近在用的这

  • Vue 实现可视化拖拽页面编辑器

    在线地址 (用梯子会更快些) 可视化页面编辑器,听起来可望不可即是吧,先来张动图观摩观摩一番! 实现这功能之前,在网上参考了很多资料,最终一无所获,五花八门的文章,都在述说着曾经的自己! 那么,这时候就需要自己去琢磨了,如何实现? 需要考虑到: 拖拽的实现 数据结构的定义 组件的划分 可维护性.扩展性 对象的引用:在这里是我感觉最酷的技巧了,来一一讲解其中的细节吧!! 拖拽实现 拖拽事件 这里使用 H5的拖拽事件 ,主要用到: dragstart // 开始拖拽一个元素时触发 draggable

  • 几款好用的前端开发编辑器推荐安利

    目录 一,VSCode 二,Sublime Text! 三,webStrom 四,Atom 五,Brackets 六,HBuilder 七,CodePen 八,runJs 一,VSCode 微软出厂的高颜值编辑器 VSCode官网 1.加载大文件几乎秒开,运行速度很快 2.跨平台的文本编辑器,内置了对许多主流语言的支持 3.非常方便的管理插件,可以快速找到适合自己的前端插件 4.完全免费(非常推荐) 二,Sublime Text! Sublime Text 是一个文本编辑器(收费软件,可以无限期

  • 10款最好的Python开发编辑器

    Python 非常易学,强大的编程语言.Python 包括高效高级的数据结构,提供简单且高效的面向对象编程. Python 的学习过程少不了 IDE 或者代码编辑器,或者集成的开发编辑器(IDE).这些 Python 开发工具帮助开发者加快使用Python 开发的速度,提高效率.高效的代码编辑器或者 IDE 应该会提供插件,工具等能帮助开发者高效开发的特性. 这篇文章收集了一些对开发者非常有帮助的,最好的 10 款 Python IDEs.如果你有其他更好的推荐,请在评论和大家分享一下: 1.

  • livereload工具实现前端可视化开发【推荐】

    在前端开发中,我们会频繁的修改html.css.js,然后刷新页面,开效果,再调整,再刷新,不知不觉会浪费掉我们很多时间.有没有什么方法,我在编辑器里面改了代码以后,只要保存,浏览器就能实时刷新.经过不懈的努力,发现了这么一个工具--livereload.这是一款能根据你本地文件(html.css.js)的变化,自动跟踪刷新浏览器的实时刷新工具,有了这个工具,会大大减轻你刷新页面的工作量. 安装chrome插件 这个就不做详细解释了,去chrome商店,下载安装livereload这么一个插件,

  • 5款Python程序员高频使用开发工具推荐

    很多Python学习者想必都会有如下感悟:最开始学习Python的时候,因为没有去探索好用的工具,吃了很多苦头.后来工作中深刻体会到,合理使用开发的工具的便利和高效.今天,我就把Python程序员使用频率比较高的5款开发工具推荐给大家,希望对大家的工作和学习有帮助. 一.最强终端:Upterm 本来想推荐 fish 或者 zsh,但其实这两个我也主要是贪图自动补全这个特性.最近在用的这个 Upterm 其实很简单好用,它是一个全平台的终端,可以说是终端里的 IDE,有着强大的自动补全功能.之前的

  • Web前端开发工具——bower依赖包管理工具

    Bower 是 twitter 推出的一款包管理工具,基于nodejs的模块化思想,把功能分散到各个模块中,让模块和模块之间存在联系,通过 Bower 来管理模块间的这种联系. 包管理工具一般有以下的功能: a)注册机制:每个包需要确定一个唯一的 ID 使得搜索和下载的时候能够正确匹配,所以包管理工具需要维护注册信息,可以依赖其他平台. b)文件存储:确定文件存放的位置,下载的时候可以找到,当然这个地址在网络上是可访问的. c)上传下载:这是工具的主要功能,能提高包使用的便利性.比如想用 jqu

  • 十个免费的web前端开发工具详细整理

    十个免费的web前端开发工具 网络技术发展迅速,部分技术难以保持 每年都有新的工具出现,这同时也意味着许多旧的工具倒在了新技术的发展之路上. 前端开发占据了web很大一部分,而且也成为了一种职业路径.如果你将前端开发当做自己的又一新技术或者作为一个可发展事业,你需要为这个工作准备合适的工具. 我将要分享我的十大现代必备的前端开发工具.它们都完全免费而且大多数工具能帮助你建立令人惊叹的网站. 1. Grid Guide 特性: 快速生成栅格 首先我要介绍的是Grid.Guide,一款免费的网页应用

  • 20170918 前端开发周报之JS前端开发必看

    1.用函数式编程对JavaScript进行断舍离 当从业20的JavaScript老司机学会函数式编程时,他扔掉了90%的特性,也不用面向对象了,最后发现了真爱啊!!! http://www.jb51.net/article/123958.htm 2.JavaScript作用域和闭包 作用域和闭包在JavaScript里非常重要.但是在我最初学习JavaScript的时候,却很难理解.这篇文章会用一些例子帮你理解它们.我们先从作用域开始.作用域 JavaScript的作用域限定了你可以访问哪些变

  • Bootstrap前端开发案例一

    现在很多公司开发中都在使用bootstrap这个框架,bootstrap是Twitter公司的一个团队的作品,大大简化了我们的前端的开发.(后面会总结一些less的使用) 学习使用API我建议直接查看官网的API,地址:http://www.bootcss.com/ 下面是部分目标效果图: 下面我就总结一个小Demo中的技巧和原理: 第一步.http://www.bootcss.com/下载bootstrap的压缩包,新建index.html,使用sublime或其它编辑器打开index页面,解

  • Vue前端开发规范整理(推荐)

    基于Vue官方风格指南整理 一.强制 1. 组件名为多个单词 组件名应该始终是多个单词的,根组件 App 除外. 正例: export default { name: 'TodoItem', // ... } 反例: export default { name: 'Todo', // ... } 2. 组件数据 组件的 data 必须是一个函数. 当在组件中使用 data 属性的时候 (除了 new Vue 外的任何地方),它的值必须是返回一个对象的函数. 正例: // In a .vue fi

随机推荐