在前端开发中值得推荐的常用工具-不凡学院

在前端开发中值得推荐的常用工具

2019-11-07 09:58 3631 17

###sublime
![sublime](/media/article/20180115164118.jpg)
  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](/media/article/20180115172436.png)
  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
![hbuild](/media/article/20180115171241.jpg)
  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
![webstrom](/media/article/20180115164245.jpg)
  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](/media/article/20180115171220.jpg)
  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](/media/article/20180115164117.png)
  PicPick是一款截取全屏、活动窗口、指定区域、固定区域、手绘区域功能，支持滚动截屏，屏幕取色，支持双显示器，具备白板、屏幕标尺、直角坐标或极坐标显示与测量，具备强大的图像编辑和标注功能的软件。
  截图可以保存到剪贴板、自动或手动命名的文件（png/gif/jpg/bmp）。
#### 软件功能
	屏幕截图：支持全屏、活动窗口、滚动窗口 、窗口控制、区域、 固定区域、手绘 、重复捕捉；
	Ribbon界面图像编辑器： 箭头、 线条等绘图工具。模糊、 锐化、、 像素化、 旋转、 翻转，框架等特效。
	拾色器和调色板：支持RGB、HTML、 c + + 、Delphi等代码类型，Photoshop风格转换，保存颜色；
	屏幕放大镜、量角器、屏幕坐标计算功能；为你的演示文稿把屏幕当作白板自由绘画!

#### 优势：
* 全面支持Windows（完全支持Windows7）
* 多语言支持，超过28种语言
* 所有功能都可在双显示器下使用
* 不需要注册表、不需要系统目录，复制至USB即可运行

picpick官方地址：http://ngwin.com/picpick；
***
### notepad++
![notepad++](/media/article/20180115171229.jpg)
  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/

上一篇: 聊聊纸面原型图下一篇: 五分钟带你了解月薪3W的UI设计师到底是干嘛的!郑州ui设计前景如何？

扫码分享此文章