JavaScript全栈开发-开发工具

因个人偏好和使用习惯的不同,开发工具不同人有不同的选择。以下是几种常见的前端开发工具:

* WebStorm

* Sublime

* HBuilder

1. WebStorm

首页:http://www.jetbrains.com/webstorm

下载:http://www.jetbrains.com/webstorm/download

1.1 功能特性

WebStorm是由JetBrains开发的一个比较强大的轻量级开发工具,能够完美地支持前端开发及基于NodeJS的服务端开发。

-- 支持JavaScript, Node.js, ECMAScript 6, TypeScript, CoffeeScript, HTML, CSS, Less, Sass 和 Stylus。语法高亮,文档查询,重构

-- 快速定位及错误高亮

-- 项目导航及高级重构功能

-- 支持AngularJS、React、Meteor、Express、其它框架

-- 内置前端及服务端NodeJS断点调试器

-- 与构建工具(Grunt、Gulp)、代码质量工具(JSHint,JSLint,ESLint,JSCS),测试工具(Karma,Mocha),版本控制工具(Git,GitHub,Mercurial,SVN)集成。

-- 版本控制集成(Subversion,Perforce,Git,CVS)

1.2 小技巧

-- 更改IDE主题:File -> Setting -> Appearance & Behavior -> Appearance

-- 更改编辑器代码风格:File -> Setting -> Editor -> CodeStyle

-- 设定IDE和项目的默认编码:File -> Setting -> Editor -> File Encoding

-- 插件安装:File -> Setting -> Plugins

-- 编辑器配置导入导出:File -> Import Settings... / Export Settings...

-- 快捷键设置:File -> Setting -> Keymap

-- 自动保存,文件关闭后仍能进行撤销和重做操作

-- 显示行号,自动换行功能开关:代码左侧区域右键菜单勾选。如下图左侧

-- 鼠标移至html文件顶部区域出现不同浏览器快速打开按钮。如下图右侧

1.3 实用快捷键

1.4 插件支持

WebStorm插件仓库里面很多实用的插件来扩展WebStorm的能力。详见:http://plugins.jetbrains.com/webStorm。

可以通过 File -> Setting -> Plugin 里面的功能在线安装插件,也可将插件下载然后离线安装。

2. Sublime Text

首页:http://www.sublimetext.com/

下载:

http://www.sublimetext.com/2 (Sublime Text 2)

http://www.sublimetext.com/3 (Sublime Text 3)

2.1 功能特性

Sublime Text是一个跨平台的文本编辑器,支持基于Python的插件,可通过Package扩展。

-- 内置支持很多编程语言,并支持语法高亮。用户也可以通过插件支持更多编程语言

-- Go to anything功能,快速跳到文件,符号或行数

-- Command palette功能:弹性快捷键功能

-- 多行选择功能:同时修改多行内容

-- 基于 Python 语言的外挂 API

-- 针对个别项目使用不同的编辑器设置

-- 通过 JSON 文件自定义设置值

-- 跨平台(Windows、Linux 和 Mac OS X)

-- 兼容 TextMate 的语言标记语法

2.2 小技巧

-- 文件未保存退出编辑器,下次启动会自动恢复

-- 双击选中一个标识符,然后连按ctrl+D可以连续选中多个标识符,进行重命名等操作

-- 以某种编码格式打开,以某种编码格式保存见File -> Reopen with Encoding / Save with Encoding

-- 矩形选取,按住鼠标中键(滚轮)不放,向下拉取选择然后松开即可垂直方向选择矩形内的内容。配合ctrl多处选择,可以进行多处编辑

-- html中输入一个标签名如div,按Tab会自动生成

,如安装Emmet插件会给你惊喜

-- 按住ctrl+alt,然后按上或下方向键可进行垂直方向光标定位,按左或右方向键可进行水平选取

2.3 实用快捷键

快捷键练习网站:http://www.shortcutfoo.com/

2.4 插件支持

1) 编写自定义插件扩展:Tools -> New Plugin..

2) 插件下载:https://packagecontrol.io

3) 插件管理

可以安装包管理器来查找,安装,更新插件包。包管理器及安装方法见:https://packagecontrol.io/installation。页面有自动安装或手动安装示例方法。安装完成后在菜单References -> PackageControl打开包管理器。选择Package Control: Install Package选项,可搜索待安装的插件。

4) 常用插件

-- NodeJS扩展

SublimeText-Nodejs(已停止维护):https://packagecontrol.io/packages/Nodejs

Jake:https://github.com/mde/jake

3. HBuilder

首页:http://www.dcloud.io

下载:http://download.dcloud.net.cn/HBuilder.windows.6.0.1.zip

3.1 功能特性

HBuilder是DCloud推出的一款免费的支持HTML5的Web开发IDE。通过完整的语法提示和代码输入法、代码块及很多配套,HBuilder能大幅提升HTML、JavaScript、CSS的开发效率。

-- 代码助手

-- 内置web服务器,可用各种主流浏览器进行测试

-- 各种眼睛保护配色

-- 内置最全语法库支持和浏览器兼容数据

-- 可进行手机App开发

-- 跳转助手、选择助手、转义助手、快捷键助手

-- 语法校验、转到定义、重构 、大纲、任务TODO 、版本历史、内置webserver、预编译less、sass等

3.2 小技巧

-- 代码提示时,按下候选列表前的数字,自动把该候选项输入到编辑区

-- 内置Emmet插件,输入div按Tab,自动生成

,详见Emmet插件

-- 内嵌jQuery、Zepto、微信JS SDK、MUI框架插件,可提示相应框架API的语法。在工程点右键 -> 引用框架语法 来添加对其它(angular、ext、dojo..)框架库语法提示的支持。

-- Ctrl+P边写代码边预览

-- 拖动tab代码选项卡,可以进行左右或上下分屏显示

3.3 实用快捷键

3.4 插件支持

HBuilder基于Eclipse 3.7(2011年6月发布)开发,因此兼容Eclipse3.x版本插件。也可进到 工具 -> 插件安装 -> 浏览Eclipse插件市场 来安装插件。

NodeJS插件:Nodeclipse 安装方法见:http://ask.dcloud.net.cn/article/230

4. 开发工具小结

作为一款开发工具,能让开发者将写代码当成一种享受,愉快地编码,最核心的功能应该满足以下几点:

1. 功能完善,该有的常用功能都有

2. 编码快速,智能提示,自动完成

3. 启动速度,测试速度快

4. 开发工具界面的主题和配色也是比较重要,耐看、代码区分一目了然,不刺眼,不引起视觉疲劳。

5. 可配置,可插件,有扩展的能力,满足自定义开发的需求

上述的几种开发工具各自有其优势:

1) WebStorm :功能完善强大

2) SublimeText:轻量快捷,界面优美

3) HBuilder:Html5开发,快速编码

开发者可根据自己的需要和个人偏好选择其中一个或多个工具使用,以满足快速开发的需求。

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180929A0W9LV00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券