首页
资讯教程
学员佳作
设计规范
设计导航
商务合作
郑州ui设计培训_h5前端开发培训
首页
学员佳作
资讯教程
设计导航
在前端开发中值得推荐的常用工具
2019-11-07 09:58
3631
17
###sublime  Sublime Text 是一个代码编辑器(Sublime Text 2是收费软件,但可以无限期试用),也是HTML和散文先进的文本编辑器。Sublime Text是由程序员Jon Skinner于2008年1月份所开发出来,它最初被设计为一个具有丰富扩展功能的Vim。 Sublime Text具有漂亮的用户界面和强大的功能,例如代码缩略图,Python的插件,代码段等。还可自定义键绑定,菜单和工具栏。Sublime Text 的主要功能包括:拼写检查,书签,完整的 Python API , Goto 功能,即时项目切换,多选择,多窗口等等。Sublime Text 是一个跨平台的编辑器,同时支持Windows、Linux、Mac OS X等操作系统。 #### 主要特点: 深度整合GBK编码,可以完美支持GBK编码文件。 去除自动检测升级提示。 自动换行功能。 安装Emmet(ZenCoding)插件。 调整字体大小为11px以适合正常人使用习惯。 软件已注册。 #### 优点: + 主流前端开发编辑器 + 体积较小,运行速度快 + 文本功能强大 + 支持编译功能且可在控制台看到输出 + 内嵌python解释器支持插件开发以达到可扩展目的 + Package Control:ST支持的大量插件可通过其进行管理 sublime官方地址:https://www.sublimetext.com/ *** ### atom  Atom 是github专门为程序员推出的一个跨平台文本编辑器。具有简洁和直观的图形用户界面,并有很多有趣的特点:支持CSS,HTML,JavaScript等网页编程语言。它支持宏,自动完成分屏功能,集成了文件管理器。 #### 优点: + 小清新界面让人耳目一新.颜控必备 + 丰富的插件几乎能够满足所有 web 开发需求 + git 原生支持 + 简单的插件编写 + 自定义界面(可以更改展示和背景,ui 等等) + 支持各种编程语言的代码高亮(HTML / CSS / Javascript / PHP / Python / C / C++ / Objective C / Java / JSON / Perl / CoffeeScript / Go / Sass / YAML / Markdown 等等)、 与大多数其他编辑器相比,Atom的语言支持已经算是覆盖非常全面了 #### 缺点: + 打开大文件比较卡 + svn 支持较差 atom官方地址:https://atom.io/ *** ### hbuild  HBuilder是DCloud(数字天堂)推出的一款支持HTML5的Web开发IDE。[1] HBuilder的编写用到了Java、C、Web和Ruby。HBuilder本身主体是由Java编写。 它基于Eclipse,所以顺其自然地兼容了Eclipse的插件。 #### 优点: + 快,是HBuilder的最大优势,通过完整的语法提示和代码输入法、代码块等,大幅提升HTML、js、css的开发效率。 + 绿柔主题,保护健康 + 最全的语法库 + 最全的浏览器兼容性数据 + 强悍的转到定义和一键搜索 hbuild官方地址:http://www.dcloud.io/ *** ### webstorm  WebStorm 是jetbrains公司旗下一款JavaScript 开发工具。目前已经被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。与IntelliJ IDEA同源,继承了IntelliJ IDEA强大的JS部分的功能。 #### 优点: + 联想查询,项目查找函数或者变量,只需要按着Ctrl键点击函数或者变量等,就能直接跳转到定义;可以全项目查找函数或者变量,还可以查找使用并高亮。 + 代码重构,这个操作有些像Resharper,熟悉Resharper的用户应该上手很快,支持的有重命名、提取变量/函数、内联变量/函数、移动/复制、安全删除等等。 + 代码检查和快速修复,可以快速找到代码中的错误或者需要优化的地方,并给出修改意见,快速修复。 + 代码调试,支持代码调试,界面和IDEA相似,非常方便。 + 代码结构浏览,可以快速浏览和定位 + 代码折叠,功能虽小,不过胜在方便高效 + 包裹或者去掉外围代码,自动提示包裹或者去掉外围代码,一键搞定 webstorm官方地址:http://www.jetbrains.com/webstorm/ *** ### visual studio code  Visual Studio Code(以下简称vscode)是一个轻量且强大的代码编辑器,支持Windows,OS X和Linux。内置JavaScript、TypeScript和Node.js支持,而且拥有丰富的插件生态系统,可通过安装插件来支持C++、C#、Python、PHP等其他语言。 ###优点: + 满足智能感知:使用IntelliSense提供智能完成,基于变量类型,函数定义和导入的模块,超越语法高亮和自动完成。 + 打印语句调试已成为过去:直接从编辑器调试代码。启动或附加到正在运行的应用程序并使用中断点,调用堆栈和交互式控制台进行调试。 + 内置的Git命令:与Git和其他SCM供应商合作从未如此简单。审阅差异,阶段文件,并从编辑器进行提交。从任何托管SCM服务推送和拉。 + 可扩展和可定制:想要更多功能?安装扩展程序以添加新的语言,主题,调试程序,并连接到其他服务。扩展运行在不同的进程中,确保它们不会减慢你的编辑器。详细了解扩展。 visual studio code官方地址:https://code.visualstudio.com/ *** 6.推荐一个图形工具picpick  PicPick是一款截取全屏、活动窗口、指定区域、固定区域、手绘区域功能,支持滚动截屏,屏幕取色,支持双显示器,具备白板、屏幕标尺、直角坐标或极坐标显示与测量,具备强大的图像编辑和标注功能的软件。 截图可以保存到剪贴板、自动或手动命名的文件(png/gif/jpg/bmp)。 #### 软件功能 屏幕截图:支持全屏、活动窗口、滚动窗口 、窗口控制、区域、 固定区域、手绘 、重复捕捉; Ribbon界面图像编辑器: 箭头、 线条等绘图工具。模糊、 锐化、、 像素化、 旋转、 翻转,框架等特效。 拾色器和调色板:支持RGB、HTML、 c + + 、Delphi等代码类型,Photoshop风格转换,保存颜色; 屏幕放大镜、量角器、屏幕坐标计算功能;为你的演示文稿把屏幕当作白板自由绘画! #### 优势: * 全面支持Windows(完全支持Windows7) * 多语言支持,超过28种语言 * 所有功能都可在双显示器下使用 * 不需要注册表、不需要系统目录,复制至USB即可运行 picpick官方地址:http://ngwin.com/picpick; *** ### notepad++  Notepad++是 Windows操作系统下的一套文本编辑器(软件版权许可证: GPL),有完整的中文化接口及支持多国语言编写的功能(UTF8技术)。除了可以用来制作一般的纯文字说明文件,也十分适合编写计算机程序代码。Notepad++ 不仅有语法高亮度显示,也有语法折叠功能,并且支持宏以及扩充基本功能的外挂模组。 #### 软件特性 所见即所得功能、语法高亮、字词自动完成功能,支持同时编辑多重文档;支持自定义语言; 对于HTML网页编程代码,可直接选择在不同的浏览器中打开查看,以方便进行调试; 自动检测文件类型,根据关键字显示节点,节点可自由折叠/打开,可显示缩进引导线,使代码富有层次感; 可打开双窗口,在分窗口中又可打开多个子窗口; 可显示选中文本的字节数,并非普通编辑器所显示的字数;提供了一些实用工具,如邻行互换位置、宏功能等; picpick官方地址:https://notepad-plus-plus.org/; 另外,知乎上有人推荐了一些能提高工作效率的“云端”工具:(其实就是线上工具→_→) + 查阅: can i use:http://caniuse.com + CSS参考手册:http://css.doyoe.com/jQuery + API文档:http://www.css88.com/jqapi-1.9/ + 百度统计分析:http://tongji.baidu.com/data/browser + 代码压缩/整理: + 压缩工具1:http://tool.css-js.com/ + 压缩工具2:http://refresh-sf.com/yui/JSON + 编辑工具:http://tools.jb51.net/tools/json/json_editor.htm + JSONView(Chrome插件):https://chrome.google.com/webstore/detail/jsonview/chklaanhfefbnpoihckbnefhakgolnmc + 美化JS代码:http://jsbeautifier.org/性能/测试: + JS性能测试:http://jsperf.com + Google的页面加载速度分析:https://developers.google.com/speed/pagespeed/insights + 手机端web调试Console:http://jsconsole.com/CSS代码生成/库: + 雪碧图制作工具:http://wearekiss.com/spritepad + 可视化CSS3生成器:http://css3.mikeplate.com/ + 可视化HTML5&CSS3生成工具:http://webdirections.org/tools/ + 网易的NEC(Nice Easy CSS)代码库:http://nec.netease.com/library + 便捷: - 占位图:http://dummyimage.com/loading.gif - 生成器:http://www.webscriptlab.com/ - 二维码生成器:http://qr.jibaoku.com/ - UC二维码(Chrome插件):http://goo.gl/dn4cA - 配色工具:https://kuler.adobe.com/ - 在线开发:http://jsbin.com/
17
上一篇: 聊聊纸面原型图
下一篇: 五分钟带你了解月薪3W的UI设计师到底是干嘛的!郑州ui设计前景如何?
扫码分享此文章
相关阅读
豆瓣电影API
聊聊纸面原型图
五分钟带你了解月薪3W的UI设计师到底是干嘛的!郑州ui设计前景如何?
2019 年最受欢迎的10个 JavaScript 动画库
2018年爱(和使用)渐变的10个理由
如何制作C4D立体像素
PS/AI 下载入口
如何打造2.5D风格插画