Tern（tern.js）是一个独立的JavaScript代码分析引擎（code-analysis engine），可以增强代码编辑器的功能。它具有以下特性：

1. 变量、属性的代码提示
2. 函数参数提示
3. 判断一个表达式的类型
4. 定位类型的定义
5. 自动化重构操作
6. 支持大量流行JavaScript框架

Tern本身基于JavaScript编写，可以在Node.js和浏览器中运行。

Tern目前支持的编辑器包括：Emacs、Vim、Sublime Text、Brackets、Light Table、Eclipse等。

架构图如下：

说明：

1. 运行在最上层的，是各种编辑器插件。它们充当客户端角色
2. 编辑器插件通过基于HTTP的简单的JSON协议，向Tern服务器发出处理请求
3. Tern服务器本质上是Node.js应用，因此它依赖于Node.js运行时环境
4. Tern服务器采用插件式架构，可以开发不同的模块（Server Module），以支持多种JavaScript框架的代码提示。模块把类型推断的工作交由类型推断引擎处理
5. 类型推断引擎可以：在给定的上下文和抽象语法树（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，具体说明如下：

要让一个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进行合理的代码提示：

/**
 * @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文件：

1. Lint：进行语义检查，其它Linter主要进行语法检查。例如

   new Date().setHours("1")

    虽然语法上没有错误，但是无法通过Lint验证
2. ESLint：提供最好的ES6支持，并且提供对JSX语言的支持。该ESLint貌似不太好用，开启对应Tern模块后，没有效果
3. JSHint：从JSLint分支而来，提供更好的可配置性。内置对jQuery、Node.js等框架的支持，提供对ES6的基本支持。缺点是难以确定是哪个规则引发了错误
4. JSCS：主要进行编程风格的检查，不检查潜在的编程BUG

这些Linter有对应的Tern模块。推荐使用Lint + JSLint的组合。

Tern模块Lint可以用于对JavaScript代码进行检查，发现常见的编程错误，例如：未知属性、未知标识符、调用一个不是函数的对象、传递无效参数、类型转换错误，等等。启用该模块后，应当同时启用JSDoc的Strong模式。

在工程上右击 ⇨ Validate可以触发验证。下面的代码导致警告：

/**
 * @type {string}
 */
var str;
str = 1;  //[Lint]: Type mismatch: cannot convert from string to number

启用此Tern模块后，可以在工程上右击 ⇨ Properties ⇨ JavaScript ⇨ Tern ⇨ Validation ⇨ JSHint中对JSHint进行配置。

可以通过Eclipse的图形化界面配置，也可以指定

.jshintrc

1 == "1"

for ( var key in obj ) {
    if ( obj.hasOwnProperty( key ) ) {
        // 这是对象自己定义，而不是继承自原型链的属性
    }
}

if (a = 10) {}

typeof a == "functio"

该插件基于tern.java，为Eclipse WTP增加以下特性：

1. 让WTP自带HTML编辑器、JSP编辑器支持AngularJS表达式和指令
2. 增加一个视图Angular Explorer，可以以树形结构显示AngularJS模块、控制器
3. 让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的语法高亮、代码提示了。

The post 使用Tern增强Eclipse的JS代码提示 appeared first on 绿色记忆.