Skip to content
angelozerr edited this page Jun 30, 2017 · 22 revisions

Editor features

typescript.java uses the JSDT Editor to support TypeScript, JSX, (and JavaScript with Salsa) by consumming tsserver coming from TypeScript bundle.

Completion

TypeScript completion

Here a demo with TypeScript completion:

TypeScript completion demo

Templates

Templates are available:

  • for TypeScript:

TypeScript Template

  • for React

React Template

You can import, update templates with JavaScript / TypeScript / Editor / Template preferences page:

Template Preference Page

Hover

TypeScript hover

Hyperlink

TypeScript hyperlink

Open Implementation

Since TypeScript 2.1.0, TypeScript provides Open implementation feature that you can use with Ctrl+T:

TypeScript Open Implementation

Code Folding

TypeScript editor content can be folded. For having good performance, the folding strategy doesn't use the TypeScript AST (to fold function, etc) but fold the code according the indentation (like VSCode):

TypeScript Code Folding

Formatting

You can format your TypeScript code with Ctrl+Shift+F or use the menu Source/Format. The formatting behaviour is done by calling format command of the tsserver. If you find a bug, with formatting, please check with VSCode if it has the same problem.

Preferences

By default, editor and formatter options uses the default config of tsserver. But if you wish you can configure editor and formatter options for TypeScript editor with TypeScript / Editor / Formatter project preferences:

TypeScript Formatter Preferences

Mark Occurrences

When you select a variable, method, type, etc, TypeScript editor is able to mark occurrences:

Mark Occurrences

Please note that mark occurrences is done asynchronously in order to avoid freezing Eclipse. It means that with a big project, the mark occurrences doesn't work as long as tsserver is not initialized.

Find References

You can find references (for a method, property, etc) in project with Ctrl+Shift+G or use the menu References/Project

Find References In Project

Please note that today it exists a bug when tsserver is not started, search returns none result. Please do Ctrl+Shift+G several times by waiting fix for issue 46.

Outline

Outline View

Standard Outline is filled with TypeScript elements:

TypeScript Outline

Please note that this outline is filled asynchronously to avoid freezing Eclipse. For large project, this outline can takes time.

Link With Editor

Link With Editor (which is available by default) gives the capability to synchronize the cursor of the active TypeScript editor with the outline to select the well tree item:

TypeScript Outline Link With Editor

Collapse All

Collapse All action gives the capability to collapse all the tree of the outline:

TypeScript Outline Collapse All

Quick Outline

You can search quickly classes, methods, etc with the Quick Outline available with with Ctrl+O or use the menu Navigate/Quick Outline.

TypeScript Quick Outline

Please note that this quick outline share the same TypeScript elements than Outline. It is filled when Outline is filled.

Validation

As you type

By default you can see TypeScript, JavaScript errors when you are typing :

As you type validation

Problem view

When you activate compile/build on save, you will see problem with TypeScritpt compilation:

TypeScript Problem View

Code fixes

Since TypeScript 2.1.4, TypeScript provides several code fixes

Refactoring

Refactoring

Rename

You can rename TypeScript symbol:

Rename Demo

Refactoring Support

Since TypeScript 2.4.1, tsserver provides a refactoring support which will be improved in each TypeScript version. TypeScript 2.4.1 provides one Refactoring support available only for JavaScript file:

Convert to ES5 class

This refactoring support is available with Menu / Refactoring. In the future we will have more support.

Clone this wiki locally