在线js代码编辑器插件(前端代码在线编辑器)

1. 前端代码在线编辑器

常见的网站开发工具有以下几种：

1、Microsoft FrontPage,是一款轻量级静态网页制作软件，特别适合新手开发静态网站的需要，目前该应用很少用于制作网页。

2、Dreamweaver网页制作软件，该软件已成为专业级网页制作程序，支持HTML、CSS、PHP、JSP以及ASP等众多脚本语言的语法着色显示，同时提供了模板套用功能，支持一键式生成网页框架功能。是初学者或专业级网站开发人员必备之选择工具。

3、CSS Design:一款适合对CSS对进调试的专业级应用，能够对CSS语法进行着色，同时支持即时查看样式功能，特别方便程序的调试以及效果的比对。

4、Flash动画制作软件：动画或动态图片是网页的重要组成部分，充分合理的使用Flash程序来设计网页元素，往往可达到意想不到的效果。

5、PS(Photoshop)图像处理软件：用于对网页图片进行润色或特殊效果处理，是一款网页制作必备之软件。

6、Sublime全称为Sublime Text，是一个代码编辑器。Sublime Text具有漂亮的用户界面和强大的功能，例如代码缩略图、功能插件等。Sublime text还是一个跨平台的编辑器，支Windows、linux、Mac等操作系统。

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

8、Visual Studio Code(简称“VS Code”)是一个运行于 Mac OS X、Windows和 Linux 之上的，针对于编写现代Web和云应用的跨平台源代码编辑器，可在桌面上运行，并且可用于Windows，macOS和Linux。

9、HBUilder是一款支持HTML5的Web开发软件。“快”是BUilder的最大优势，通过完整的语法提示、代码输入法以及代码块等，HBuilder可以大幅提升HTML、JavaScript的开发效率。

2. 前端代码在线编辑器怎么用

推荐三个国外开发者写的 Android 代码编辑器，在 Google Play 上都收获超过 5K+ 好评的，同时国内应用商店也可以直接下载的。

1. Dcoder

Dcoder：Android 上的代码编辑器，支持33种语言语法高亮，亮点是支持代码调试，可以把运行结果和错误输出在同一个屏幕，很强大。

支持超过 33 种编程语言语法高亮，除了编写代码，还可以在同一屏幕上调试代码以查看编译错误和结果，是一个很强大的 IDE。

2. Quoda Code Editor

Quoda Code Editor：Android 代码编辑器，支持多种代码，支持 FTP，支持 url 下载代码，支持代码查找和替换，实时HTML / Markdown预览，一个挺不错的 IDE。

Android 代码编辑器，支持多种代码，支持 FTP，支持 url 下载代码，支持代码查找和替换，实时HTML / Markdown预览，一个挺不错的 IDE。

3. anWriter free HTML editor

anWriter free HTML editor：专注于前端页面的代码编辑器：HTML，CSS，JavaScript，LaTeX 等自动补全和代码高亮，并且可以直接预览页面效果，查看 JS 报错。除此以外，也支持一些主流编程语言的代码高亮。

专注于前端页面的代码编辑器：HTML，CSS，JavaScript，LaTeX 等自动补全和代码高亮，并且可以直接预览页面效果，查看 JS 报错。除此以外，也支持一些主流编程语言的代码高亮。

也推荐你一个发现 Android 精选应用神器：

Android 精选：那些被 AppStore 精选的应用，安卓也有哦

3. 前端在线文本编辑器

web前端开发除了PS、DW之外，还有一些常用的前端开发工具，以下仅列出前端工程师常用的两款：

1、WebStorm：WebStorm 是jetbrains公司旗下一款JavaScript 开发工具。目前已经被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。个人经验：WebStorm优点是代码提示、高亮等等，支持很多框架。非常适合项目开发。缺点是启动稍慢。

2、Sublime Text3：Sublime Text 是一个代码编辑器，也是HTML和散文先进的文本编辑器。Sublime Text是由程序员Jon Skinner于2008年1月份所开发出来，它最初被设计为一个具有丰富扩展功能的Vim。个人经验：Sublime Text3通过安装不同的插件可以完美支持各种语言。相对于webstrom，它的启动速度非常快，常用于修改单个文件的错误或者调试。

4. 前端代码编写工具

Notepad

其实就是 Windows 系统自带的记事本啦，致敬经典！

别小瞧记事本，其实它也能作为一款最原始最纯洁的代码编辑器来使用。比如我初学前端时，就用记事本编辑网页代码，然后在保存文件时修改后缀为 .html ，双击就能运行了。正因为原始、没有任何代码提示和校验功能，所以记事本很适合培养新手写代码的规范，缩进、代码的正确性都要自己来保证。

5. 前端编辑器

是由web前端研发部开发的所见即所得的开源富文本编辑器，具有轻量、可定制、用户体验优秀等特点。基于MIT开源协议，所有源代码在协议允许范围内可自由修改和使用。

6. 前端代码编辑工具

cshell是一个在手机上面的移动代码文本文件和源代码编辑的软件，cshell这款软件能够让用户在ipad和iPhone上面随时的进行前端代码的编辑，不仅如此还能直接的在移动平台上面进行测试运行，软件支持html，JavaScript等等文件关键词显示等等。

7. js代码在线编辑器

一、Adobe Edge

目前还处于预览阶段的Adobe Edge是用HTML5、CSS、JavaScript开发动态互动内容的设计工具。内容可以同时兼容移动设备和桌面电脑。Edge的一个重要功能是Web工具包界面，方便确保页面在不同浏览器中的架构一致性，此外Edge还将整合TypeKit这样的字体服务。

动画和图形可以添加到HTML元素中，程序也能通过Edge自身的代码片段库或者JavaScript代码进行扩展。动画可以在独立的时间线上进行嵌套，还能实现互动功能。符合可以服用并通过API和代码片段控制。通过Edge设计的内容可以兼容iOS和Android设备，也可以运行在火狐、Chrome、Safari和IE9等主流浏览器。

二、Adobe Dreamweaver CS6

Adobe Dreamweaver CS6作为一个Web设计软件，提供了对HTML网站和移动程序的可视化编辑界面。其Fluid Grid排版系统整合CSS样式表功能，提供自适应版面的跨平台兼容性。开发者可以完全实现Web设计的可视化操作，无需为代码所困。

用户不但还能在Live View中预览，还提供多屏幕预览功能。开发者可以通过MultiScreen预览面板查看HTML5内容的渲染效果。Live View通过WebKit渲染引擎支持HTML5。

三、Adobe ColdFusion 10

ColdFusion是用来开发企业Web程序的服务器端技术，通过Websockets、互动表单、视频和地理标签等HTML5技术创建富媒体用户体验。

四、Sencha Architect 2

在开发移动和桌面应用的工具中，Sencha的定位是HTML5可视化应用开发。开发团队可以在一个单一集成的环境中完成应用的设计、开发和部署。开发者还可以开发Sencha Touch2和Ext JS4 JavaScript应用，并实时预览。

五、Sencha Touch 2

Sencha Touch2是移动应用框架，也被看作是Sencha的HTML5平台。开发者可以用它开发面向iOS、Android和Blackberry、Kindle Fire等多种平台的移动应用。

六、Dojo Foundation Maqetta

来自于IBM的一个项目，Dojo Foundation Maqetta是为桌面和移动设备开发HTML5应用的开源工具，支持在浏览器中查看HTML5界面。用户体验设计师可以通过拖放组装UI样板

七、微软Visual Studio 2010 ServicePack 1

虽然一开始并不支持HTML5，但微软在2011年三月发布的Visual Studio 2010 SP1中提供了IntelliSense，追加了针对HTML5的一些元素。

八、JetBrains WebStorm 4.0

作为拥有HTML编辑器的JavaScript集成开发环境，WebStorm4.0提供了开发web应用的HTML5样板。开发者可以在创建HTML文档时可获得对HTML5文件的支持。例如砍伐者键入。开发者还可以在chrome浏览器中实时预览HTML文档。

九、Google Web Toolkit

该开发工具用于开发浏览器应用，但库中支持很多HTML5功能。包括对客户端或web存储的支持。其他HTML5功能还包括支持Canvas可视化，以及音频和视频widget。

8. 在线编辑器源代码

1. Visual Studio Code

Visual Studio Code （简称 VS Code）是由微软研发的一款免费的、轻量级的Web集成开发环境，且开源的跨平台文本（代码）编辑器，能运行在Linux、Mac 、Windows系统上。在智能提示变量类型,函数定义,模块方面继承了visio studio的优秀传统，在断点调试上也有不错的表现。

推荐指数：★★★★★

下载地址：Visual Studio Code

最新版本：1.32

VSCode是微软2017年推出的一个轻量但功能强大的源代码编辑器，最新版本是1.32，而且可用于多平台（微软现在对开源的态度还是不错的）。它内置了对JavaScript，TypeScript和Node.js的支持并且具有丰富的其它语言和扩展的支持，功能超级强大。

我是主搞dotnet的同时兼Java，VS可以毫不夸张的说是最好用的一款IDE，因此这个界面风格和使用方式很喜欢，而且提供强大的扩展，几乎在简单的代码管理时不用打开VS了；版本更新很及时，功能丰富且强大。而且官网提供了丰富的说明文档和视频等支持。

智能感知功能

VS Code IntelliSense功能由语言服务提供支持。如果语言服务知道可能的完成，则会在您键入时弹出IntelliSense建议。如果继续键入字符，则会过滤成员列表（变量，方法等），以仅包含包含键入字符的成员。按Tab或Enter将插入所选成员。

VS Code的智能感知提供了非常有用的语法高亮器，同时为变量类型，方法定义和模块引入提供了自动补全功能。而且还可以在设置中（settings.json）自定义IntelliSense。我们可以通过键入Ctrl + Space或键入触发器字符在编辑器窗口中触发IntelliSense 。

VS Code的智能感知提供JavaScript，TypeScript，JSON，HTML，CSS，SCSS等的支持。VS Code支持任何编程语言的基于单词的完成，也可以通过安装语言扩展来配置为具有更丰富的IntelliSense。

断点调试

代码调试是程序开发中一个必不可少的功能，能够快速帮助我们直观的获取信息。VS Code具有对Node.js运行时的内置调试支持，可以调试JavaScript，TypeScript以及任何其他转换为JavaScript的语言。对于调试其他语言和运行时环境，可以安装Debuggers 扩展或者安装其他调试器来辅助完成。

版本管理

Visual Studio Code集成了源代码控制，并包含了内置的Git支持。其他源代码控制提供程序可通过VS Code Marketplace上的扩展获得。

2. Notepad++

Notepad++ 是一款非常有特色的编辑器，软件小巧高效，支持27种编程语言，通吃C,C++ ,Java ,C#, XML, HTML, PHP,JS 等。是开源软件，可以免费使用，同时也支持各类流行的计算机编程语言。编辑器可以运行在微软的windows系统环境下，它的使用是受GPL许可证保护的，支持的语言：C、C++、Java、C#、XML、HTML、PHP、Javascript。

推荐指数：★★★★☆

下载地址：Notepad++

最新版本：7.6.3

Notepad++也是一款非常小巧好用而且功能强大的编辑器，而且开源免费。支持很多种编程语言，对应相关的编程的时候可以进行相互的转换，很方便。只需要在“菜单栏”>“语言”就可以选择自己需要的编程语言。同时也支持语法高亮，代码折叠、自动补全以及宏等功能，可定制性也非常强大。

Notepad++同样支持代码高亮、和自动提示补全功能，不同的语言需要根据自己使用的语言在菜单栏选择，稍显麻烦，Notepad++的代码折叠功能也很好用，总的来说是一款不错的编辑器，但是在易用性上来说比VSCODE还是有不小的距离。

3. Notepad2

Notepad2是一个小巧、快速的替代微软记事本的软件，界面华丽，功能强大，免安装。我实在找不出微软的记事本还能留下来的理由。自定义语法高亮，支持HTML, XML, CSS, JavaScript, VBScript, ASP, PHP, CSS, Perl/CGI, C/C++, C#, Java, VB, Pascal, Assembler, SQL, Python, NSIS, INI, REG, INF, BAT, DIFF, Ruby等众多文件。

推荐指数：★★★☆☆

下载地址：Notepad2