使用Tern增强Eclipse的JS代码提示
Tern（tern.js）是一个独立的JavaScript代码分析引擎（code-analysis engine），可以增强代码编辑器的功能。它具有以下特性：
- 变量、属性的代码提示
- 函数参数提示
- 判断一个表达式的类型
- 定位类型的定义
- 自动化重构操作
- 支持大量流行JavaScript框架
Tern本身基于JavaScript编写，可以在Node.js和浏览器中运行。
Tern目前支持的编辑器包括：Emacs、Vim、Sublime Text、Brackets、Light Table、Eclipse等。
架构图如下：
说明：
- 运行在最上层的，是各种编辑器插件。它们充当客户端角色
- 编辑器插件通过基于HTTP的简单的JSON协议，向Tern服务器发出处理请求
- Tern服务器本质上是Node.js应用，因此它依赖于Node.js运行时环境
- Tern服务器采用插件式架构，可以开发不同的模块（Server Module），以支持多种JavaScript框架的代码提示。模块把类型推断的工作交由类型推断引擎处理
- 类型推断引擎可以：在给定的上下文和抽象语法树（AST）下，推断代码中变量和属性的类型
tern.java是tern.js的衍生项目，允许在Java上下文中使用tern.js。tern.java提供几种Tern服务器实现，分别基于J2V8、 Rhino、 Java 8 Nashorn、 Node.js等JavaScript引擎/运行环境，tern.js在这些引擎中运行，而tern.java则对tern.js进行了基于Java的API封装。
Tern.java是 Tern Eclipse IDE的支撑技术。
该插件用于把Tern集成到Eclipse中，最好在Eclipse IDE for Java EE Developers的基础上安装此插件，因为它依赖于WebTools、JSDT 。
Tern Eclipse IDE增强了Eclipse自带JavaScript Editor、JSP Editor、HTML Editor的代码提示功能。
Update Site：http://oss.opensagres.fr/tern.repository/1.1.0/
可以选择所有组件并安装。
Tern Eclipse IDE的全局配置项位于：Window ⇨ Preferences ⇨ JavaScript ⇨ Tern，具体说明如下：
| 配置项 | 说明 |
| Content Assist | Indent with 4 Spaces |
| Development | Trace on console 勾选后，可以看到Tern详细的活动日志 |
| Server ⇨ Node.js | Node.js install，可以选择其他Node.js安装位置 |
要让一个Eclipse工程使用Tern，需要在工程上右击 ⇨ Configure ⇨ Convert to Tern Project。系统会自动弹出对话框，让你选择需要启用的Tern模块（Module），这些模块为流行JavaScript框架提供代码提示。
在以后，你可以而随时工程上右击 ⇨ Properties ⇨ JavaScript ⇨ Tern，增加需要的模块。
为了实现自动完成、代码跟踪，Tern Eclipse IDE需要知道你引用的JS库的源码位置。默认的，当前工程中的所有源码会自动识别。
如果要引用位于其它工程中的源码，可以在工程上右击，定位到 Properties ⇨ JavaScript ⇨ Tern ⇨ Script Paths进行设置。
JSDoc是一套JavaScript注释的规范，类似于JavaDoc。它定义了一系列@开头的符号，作为被注释函数、变量的元数据。
通过JSDoc模块（该模块现在自动启用），我们可以为Tern提供类型提示，以便Tern进行合理的代码提示：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
/** * @param {string} * str1 * @param {string} * str2 * @returns {Number} */ function addStr( str1, str2 ) { //在函数内部，str1、str2获得Content Assist，可以Alt + /调出提示 } addStr("","").toFixed(0); //在函数外部，返回值获得Content Assist /** * @type {string} */ var str //可以为任意变量提示类型 |
这一功能与Pydev的Type Hinting很类似。
在工程上右击 ⇨ Properties ⇨ JavaScript ⇨ Tern，勾选When Enabled, types specified in comments ...，可以启用Strong模式：JSDoc中指定的类型，比上下文自动推断（例如把变量复制给与@type不兼容的类型）优先。
从0.9开始，Tern Eclipse IDE提供对Eclipse WTP Validator的集成，通过几种Linter来验证JavaScript文件：
- Lint：进行语义检查，其它Linter主要进行语法检查。例如 new Date().setHours("1") 虽然语法上没有错误，但是无法通过Lint验证
- ESLint：提供最好的ES6支持，并且提供对JSX语言的支持。该ESLint貌似不太好用，开启对应Tern模块后，没有效果
- JSHint：从JSLint分支而来，提供更好的可配置性。内置对jQuery、Node.js等框架的支持，提供对ES6的基本支持。缺点是难以确定是哪个规则引发了错误
- JSCS：主要进行编程风格的检查，不检查潜在的编程BUG
这些Linter有对应的Tern模块。推荐使用Lint + JSLint的组合。
Tern模块Lint可以用于对JavaScript代码进行检查，发现常见的编程错误，例如：未知属性、未知标识符、调用一个不是函数的对象、传递无效参数、类型转换错误，等等。启用该模块后，应当同时启用JSDoc的Strong模式。
在工程上右击 ⇨ Validate可以触发验证。下面的代码导致警告：
|
1 2 3 4 5 |
/** * @type {string} */ var str; str = 1; //[Lint]: Type mismatch: cannot convert from string to number |
启用此Tern模块后，可以在工程上右击 ⇨ Properties ⇨ JavaScript ⇨ Tern ⇨ Validation ⇨ JSHint中对JSHint进行配置。
可以通过Eclipse的图形化界面配置，也可以指定 .jshintrc 配置文件。可用的配置项如下表：
| 配置项 | 说明 | ||
| Enforcing options：这些选项如果设置为true，JSHint会产生更多的警告信息 | |||
| bitwise | 禁止使用JavaScript中很少见的位运算符 | ||
| curly | 强制要求使用{}包围if/while等语句块 | ||
| eqeqeq | 强制要求使用===、!==代替==、!=。后两者会在比较前进行类型转换，常常导致意外错误： 1 == "1" | ||
| esversion | 强制要求代码遵循ECMAScript版本： 3：IE6-9等老浏览器的版本 5：提示JSHint你的代码使用ECMAScript 5.1 6：提示JSHint你的代码使用ECMAScrip6，不是所有浏览器实现了ES6 |
||
| forin | 强制要求在使用for..in迭代对象属性时，过滤从原型链继承得到的属性：
|
||
| freeze | 禁止覆盖Native类型的原型，例如Array、Date | ||
| futurehostile | 如果标识符占用了未来版本JavaScript的关键字，发出警告 | ||
| globals | 指定一个全局变量的白名单，这些变量虽然没有在源码中明确定义，但是JSHint不会发出警告 | ||
| latedef | 禁止在定义前使用变量。实质上JavaScript只有函数级作用于，所有变量的定义都会被提前到函数的首部 | ||
| maxdepth | 控制代码块的最大层次 | ||
| maxerr | JSHint最大生成的错误个数，默认50 | ||
| maxparams | 允许函数的最大参数个数 | ||
| maxstatements | 允许函数的最大语句行数 | ||
| noarg | 禁止使用arguments.caller、arguments.callee | ||
| nocomma | 禁止使用逗号操作符 | ||
| nonew | 禁止调用构造器却不赋值给变量 | ||
| strict | 要求代码在ECMAScript 5的strict模式下运行 | ||
| undef | 禁止使用未定义的变量 | ||
| unused | 对未使用的变量发出警告 | ||
| varstmt | 禁止使用var声明变量，必须使用let、const代替 | ||
| Relaxing options：这些选项如果设置为true，JSHint会产生更少的警告信息 | |||
| asi | 抑制对缺失分号的警告 | ||
| boss | 抑制对期望==而使用了=（例如 if (a = 10) {} ）的警告 | ||
| eqnull | 抑制针对== null这种比较方式的警告 | ||
| evil | 抑制对eval()调用的警告，该调用不被建议，因为容易导致代码注入而出现安全问题 | ||
| funcscope | 尽管JavaScript只有全局、函数两个作用域，但是默认的，JSHint会对：块外引用块内声明的变量的情况予以警告 该选项设置为true，则抑制此警告 |
||
| iterator | 抑制对使用__iterator__属性的警告，__iterator__不被所有浏览器支持 | ||
| loopfunc | 抑制对在循环中定义函数的警告 | ||
| notypeof | 抑制对错误的typeof比较值的警告，默认JSHint对 typeof a == "functio" 发出警告，因为functio不是有效的类型 | ||
| proto | 抑制对使用__proto__属性的警告 | ||
| scripturl | 抑制对使用javascript:形式的URL的警告 | ||
| supernew | 抑制对new function () { ... }、new Object的警告，这种代码有时用于创建单例 | ||
| withstmt | 抑制对使用with语句的警告 | ||
| Environments：让JSHint知晓某些预定义全局变量 | |||
| browser | 定义现代浏览器暴露的全局变量，包括很早就有的document、navigator以及HTML5引入的FileReader等 | ||
| devel | 定义一些调试用于的全局变量，包括console、alert | ||
| browserify | 与Browserify tool联用 | ||
| couch | 与CouchDB联用 | ||
| dojo | 与Dojo Toolkit联用 | ||
| jquery | 与jquery联用 | ||
| module | 提示JSHint，代码正在使用ECMAScript6模块 | ||
| node | 提示代码运行在Node.js环境中 | ||
| nonstandard | 定义一些非标准但是广泛使用的全局变量，包括escape、unescape | ||
该插件基于tern.java，为Eclipse WTP增加以下特性：
- 让WTP自带HTML编辑器、JSP编辑器支持AngularJS表达式和指令
- 增加一个视图Angular Explorer，可以以树形结构显示AngularJS模块、控制器
- 让WTP自带JavaScript编辑器支持AngularJS特性（例如模块）
Update Site：http://oss.opensagres.fr/angularjs-eclipse/1.1.0/
可以选择全部插件安装，如果你安装过Tern Eclipse IDE，则其中部分插件已经安装到你的Eclipse中了。
Window ⇨ Preferences ⇨AngularJS，可以配置语法高亮。
Window ⇨ Preferences ⇨ Web ⇨ HTML Files ⇨ Web Resources把Error的严重级别改为Warning级别，如果使用Framework7，全部改为忽略。
CSS样式类自动提示：工程上右击 ⇨ Properties ⇨ Web Resources ⇨ CSS，勾选“Search CSS id and class in all CSS file”。
要让一个Eclipse工程支持AngularJS开发，需要在工程上右击 ⇨ Configure ⇨ Convert to AngularJS Project。该操作会生成一个.tern-project文件，并且为工程添加angular nature。
现在，你的HTML、JSP、JavaScript编辑器就支持AngularJS的语法高亮、代码提示了。
Leave a Reply