webstorm怎么编译angluarjs

AngularJS体验式编程系列文章，将介绍如何用angularjs构建一个强大的web前端系统。angularjs是由Google团队开发的一款非常优秀web前端框架。在当前如此多的web框架下，angularjs能脱颖而出，从架构设计上就高人一等，双向数据绑定，依赖注入，指令，MVC，模板。Angularjs创新地把后台技术融入前端开发，扫去jQuery一度的光芒。用angularjs就像写后台代码，更规范，更结构化，更可控。

webstorm

前言

俗语讲：“工欲善其事，必先利其器”，为了玩转AngularJS，顺手的工具要选好。在上一篇文章中，通过yeoman我们构建了一个AngularJS的工程，通过vi编辑器和命令行 *** 作，我们几乎可以完成整个的项目开发。但是，随着代码量和文件数的增加，文件和目录越来越难把握，代码文件各种难懂，缩进不一致，controller和directive被多少个地方所引用，。。。

我们需要一个IDE，来帮助我们更好的看懂项目，管理代码。WebStorm是目前我认为AngularJS开发最理想工具。

目录

WebStorm介绍

导入Javascript工程

安装AngularJS插件

WebStorm使用

1 WebStorm介绍

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

WebStorm可能最大的缺点就是需要付费，对于个人开发者49刀。不过，WebStorm还推出了几种免费的liences。

Classroom License:申请课堂演示

Open Source Project License:申请做为开源项目的贡献者

MVP License: 申请微软的专家

可以通过购买页面找到信息

当然我是不会告诉大家，在google里可以找到过去版本的liences的，只是中国的程序员真是太苦逼了。

2 导入Javascript工程

打开WebStorm后，我们可以通过 *** 作：

"file"==>"open Directory"==>"select Directory" ==> "ok"

来选择我们已经构建好的工程。

webstorm1

WebStrom对Html5, javascript, css，json… 大部分的代码都支持非常好。

webstorm2

3 安装AngularJS插件

不过，默认的WebStrom并不认识，AngularJS的指令，当我尝试写代码ng-controller时，编辑器没有出现对应该的提示。

<div ng

webstorm3

对于特别熟悉的AngularJS的人来说，并不是那么重要。但是，如果有语法提示不是会更好吗？

安装AngularJS插件，两种办法：

在IDE中，自动下载自动安装

手动下载，手动安装

1) 在IDE中，自动下载自动安装

我们需要以下的 *** 作：

1 File->Settings->Plugins

2 点击 “Browse Repositories”

3 选中 “AngularJS” 双击

4 选择 “Yes”

5 重启WebStorm

webstorm4

我在使用这个方法的时候失败了

2) 手动下载，手动安装

我们在jetbrains的插入库中，找到AngularJS

下载angularjs-pluginzip，然后解压到D:\toolkit\WebStorm 601\plugins\目录

~ D:\toolkit\WebStorm 601\plugins\angularjs-plugin

重启WebStorm

再次输入代码：

<div ng-c

webstorm5

语法的提示，太帅气了！！

我查了一下插件的开发者的代码，支持全部的angularJS指令语法：

ng-app,ng-bind,ng-bind-html-unsafe,ng-bind-template,ng-class,ng-class-even,ng-class-odd,

ng-cloak,ng-controller,ng-form,ng-hide,ng-include,ng-init,ng-non-bindable,ng-pluralize,

ng-repeat,ng-show,ng-submit,ng-style,ng-switch,ng-switch-when,ng-switch-default,ng-options,

ng-view,ng-transclude,ng-model,ng-list,ng-change,ng-value,ng-required,required

4 WebStorm使用

1) 对于HTML的页面：WebStorm会在右上角出现浏览器的图标方便我们打开测试

webstorm6

2) 对Javascript脚本：WebStorm会方便的配置NodeJS启动, UnitTest启动 等等

webstorm7

IDE的功能很强大，熟悉后会极大地提升我们的开发效率的，特别是对于大规模的多人项目。

ECMAScript 6是JavaScript语言的下一代标准，已经在2015年6月正式发布了。Mozilla公司将在这个标准的基础上，推出javascript 20。

ES6的目标，是使得JavaScript语言可以用来编写大型的复杂的应用程序，成为企业级开发语言。

可是如果我们在webstorm写下了一段ES6的代码时候，会报出很多错误，那么为了更好的体验ES6，应该如何设置这个所谓的神器呢？

下面给大家讲解一下具体流程：

1） 我们一定要下载最新版本的1103 webstorm，只有这个版本才能更好的兼容ES6特性。

2）设置JavaScript语言版本：

Preferences > Languages & Frameworks > JavaScript

3）设置自动转码工具。

你可能希望你写的代码有更好的兼容性，但目前的ES6肯定不是所有浏览器都支持的，所以我们要用到ES6转码器。

Babel是一个广泛使用的ES6转码器，可以将ES6代码转为ES5代码，从而在浏览器或其他环境执行。这意味着，你可以用ES6的方式编写程序，又不用担心现有环境是否支持。

1 webstorm 一般是自带插件 live edit 的，不用下载

2 chrome浏览器下载插件 JetBrains IDE Support

3 webstorm 的设置中 对 live edit 进行自定义设置

如图1，随自己的需要修改即可，解释：(1) 3ms 网页更新会很快 (2) 最后一个必须打勾，才能真正使用浏览器的JB插件

4 上面几步完成之后只需要 debug(不是run) (如图2)就可以实现网页同步编辑了（浏览器上面的这一行(如图3) 不要点取消，否则 就不能同步了）

其他：端口号可自定义设置如图4，5，6

有关JetBrains IDE Support：是一款支持编译即时显示在浏览器上调试的谷歌浏览器插件。是一款web开发人员常用的开发者插件，程序员习惯称之为JB插件。这款调试插件需要与一些开发工具结合使用，比如JetBrains公司发布的一个web开发IDE，webstorm！支持代码提示、补全、定位、与Git集成等等各种功能，已经跟传统强类型语言的开发环境感觉无多大差异！

参考链接：>

前言：此版本的软件安装包附加破解教程我可以给您一份，不过仅供个人使用，切勿传播，希望可以帮助您

安装教程

1、在本站下载好文件包并解压，得到如下图所示文件。

2、双击“WebStorm-201823exe”主程序运行，在安装向导界面直接点击“Next”。

3、选择你想要的安装路径，点击“Next”。

4、勾选对应的 *** 作系统，小编的电脑为64位，点击“Next”。

5、这里默认即可，点击“Install”开始安装。

6、安装进行中，需要一些时间，请耐心等待。

点击下载WebStorm201823破解版

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

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

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

以上就是关于webstorm怎么编译angluarjs全部的内容，包括:webstorm怎么编译angluarjs、webstorm怎样使用es6中的import、webstore如何同步idea的插件等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！