angelozerr/typescript.java

TypeScript IDE for Eclipse with JSDT & tsserver

⚠️ typescript.java is now OUTDATED, it's recommended to use Eclipse Wild Web Developer instead

typescript.java

Goal of typescript.java is to provide the capability to consume TypeScript language Service with tsserver in a Java context. Any Java IDE like Eclipse, Netbeans, WebStorm could consume typescript.java.

TypeScript IDE

On top of core module typescript.java provides an Eclipse IDE integration with TypeScript.

TypeScript IDE provides the following features:

• Wizards:
  • New TypeScript Project
• Editors:
  • JSX Editor
  • TypeScript Editor
    • Completion
    • Templates
    • Hyperlink
    • Hover
    • Validation
    • Quick Fixes
    • Code Folding
    • Code Lens
    • Formatting
    • Mark Occurrences
    • Find References
    • Refactoring
    • Outline
  • tsconfig.json Editor
  • tslint.json Editor
• Compile on save
• Debugging
• Project Explorer
• ATA

To install TypeScript IDE, please start to read Getting Started section.

This integration looks like tern.java; JSDT was extended (completion, hyperlink, hover, etc) to consumme the official TypeScript server tsserver.

Core Features

Once that TypeScript Service client which consumes tsserver is created with Java using core module, you can use it in any Java context (Eclipse, Netbeans, etc). typescript.java provides the capability to use TypeScript language Service with tsserver with SWT :

• contentassist which uses typescript.java. If you start the SWT TypeScriptEditor demo, you will see contentassist available for JavaScript :

Similar Project

Java

See https://github.com/BestSolution-at/java-tsserver which provides the capability to consume tsserver with Java. So why developping an another tsclient?

• java-tsserver requires Java8. Eclipse IDE uses Java7.
• Uses tsclient API instead of using TypeScript Language Service API.

Eclipse

• Eclipse TypeScript
• TypeEcs

Those plugins provide a lot of advanced features for TypeScript (debug, refactoring, etc) compare to typescript.java. So why developping an another Eclipse Plugins?

Here my idea:

• use JSDT JavaScript Editor instead of developping custom editor (DONE for completion, hyperlink, hover).
• use WTP Validator instead of Builder for validation (DONE).
• consume "official" tsserver instead of consumming custom bridge language service like Eclipse TypeScript/TypeEcs have done:
• user will able to update the tsserver just with "npm install typescript".
• other editors consumes "tsserver", so there are a big community which uses "tsserver":
  • Visual Studio Code (Microsoft)
  • Typescript-Sublime-plugin (Microsoft)
  • A Vim plugin for TypeScript
• use async "event" of tsserver to improve performance for validation for instance.
• use async completion, etc

typescript.java's Issues

Compilation errors don't appear in Problems view

Errors only appear in editor

Refresh project when creating duplicate file

Now it is necessary to refresh explicitly to see new file

Improve completion

• fix cursor problem after appying completion
• second popup info
• apply completion to generate method signature

import and from are not colored as reserved words in import sentence.

import and from are not colored as reserved words in import sentence.

Embedded node.js & Preferences

Provides:

• Embedded node.js
• a preferences to select the node.js to use (embedded or installed).

Ctrl+Shift+T is not working for finding types in TypeScript projects

Maybe a new Keyboard short-cut it is necessary to avoid confusion between Java and TypeScript types.

UI preferences for buildpath

Display in the project properties the Build Path folders to add/remove folders, but this issue is not very important since it's possible to add/remove build path folder with Project Explorer https://github.com/angelozerr/typescript.java/wiki/TypeScript-BuildPath#what-is-build-path

Implement Open Type Hierarchy

Link with editor not working with TypeScript files

tsconfig.json Editor

Provide a JSON Editor for tsconfig.json by using WTP JSON Editor which will be available for Eclipse Neon. Syntax coloration, outline, is already managed with WTP JSON Editor. This isue is to link JSON Schema of tsconfig.json to benefit with completion.

This JSON editor will be hosted inside 2 plugins:

• ts.eclipse.ide.json.core
• ts.eclipse.ide.json.ui

@micaelgallego you will have problem compilation if you import those 2 projects. To fix the problem you must clone webtools.sourceediting (https://git.eclipse.org/r/sourceediting/webtools.sourceediting) as a global project and import in your workspace:

• org.eclipse.json
• org.eclipse.wst.json.core
• org.eclipse.wst.json.ui
• org.eclipse.wst.json.schemaprocessor

UI preferences for tsc

Improve editor experience to be similar to Java with JDT

TypeScript.java plugin is in alpha state right now but also is improving quickly.

In this issue I like only to note the differences between editor experience between Java with JDT and TypeScript with this plugin.

• Mark ocurrences is missing. See issue 17.
• Semantic coloring in attributes (clear blue) and locals (brown) is missing. See issue 18.
• import and from are not colored as reserved words in import sentence. See issue 19.
• Navigate to type declaration, not to import. See #20
• Link with editor not working with TypeScript files. See #21
• Autocomplete types not included in current scope with import autocomplete (as JDT does for Java). See
  #22
• Collapse elements in editor (maybe imports can be collapsed automatically as JDT does for Java). See
  #23
• Organize imports (remove unnecessary imports). See
  #24
• Refresh project when creating duplicate file (it is necessary to refresh explicitly to see new file). See
  #25
• File icon in project explorer doesn't show compile error icon when there is an error in the file. See
  #26
• Compilation errors don't appear in Problems view. See
  #27
• Refactor rename is not working. When use Ctrl+R appears a dialog error with message "Operation unavailable in the current selection". See
  #28
• Ctrl+Shift+T is not working for finding types. See
  #29
• Hover when autocompleting shows <pre> and </pre> in the text. See
  #30
• Autocompleting is not working in import path. (see microsoft/TypeScript#188). See
  #31
• In JDT when going to declaration, only the name of the element is selected. In TypeScript.java, all class or method is selected. The behavior should be the similar to JDT. See
  #32
• Open Call hierarchy shows error "The resource is not on the build path of JavaScript project". See
  #33
• Open Type Hierarchy shows error "The resource is not on the build path of JavaScript project". See
  #34
• TypeScript editor is referred as "JavaScript editor" when open a file. See
  #35
• Format code doesn't work. See
  #36
• In JDT when select a method from autocomplete list, parenthesis are write to code, and the parameter names (from documentation/source code) are write and selected (to edit them). In methods with several parameters, every parameter is boxed and developer can navigate with tabs between them. In TypeScript only method name is write. See
  #37
• Outline is missing for TypeScript files. See
  #38

@angelozerr Do you prefer that I open an issue for every item in the list to further discussion or is ok for now to have the list registered here?

Ctrl+Shift+O: Organize imports

Remove unnecessary imports and sort them

TypeScript editor not found

In master version (commit 1dcb95c) There is no TypeScript editor available. Files with .ts extension are opened with Text Editor.

If I try to open with other editor, TypeScript editor is not found.

Support for TypeScript compilation

Implement Open Call hierarchy

TypeScript Outline

Find References (Ctrl+Shift+G) must be executed several times

Find References (Ctrl+Shift+G) doesn't work if tsserver is not started. It should be executed several times and search result works when tsserver is started. It' snot user friendly. Fix this problem by managing the timeout.

UI preferences for tsserver

Improve method auto-completion writing parameter names

In JDT when you select a method from autocomplete list, parenthesis are written to code, and the parameter names (from documentation or source code) are written also. The parameters are also selected to edit them. Moreover, in methods with several parameters, every parameter is boxed and developer can navigate with tab key between them. I think TypeScript should have the same behavior. For now, only the method name is written to the file.

Refactor rename support

When I use Ctrl+R it appears a dialog error with message "Operation unavailable in the current selection"

TypeScript nature

typescript.java can manage completion, hover, validation for _.ts, ._jsx, *.tsx and even *.js file (TypeScript Salsa).

Today completion, hover, validation are executed for thoses files without converting the project to TypeScript (Like Convert to JavaScript project).

It means that if user install typescript.java, the whole project of workspace which have _.ts, ._jsx, *.tsx, *.js will consume TypeScritpt tsserver.

This issue is to define the rules when tsserver must be consumed or not (I would liek to avoid doing "Convert To TypeScript project".

The case that I see which is hassle is for *.js files. My idea is to consume tsserver only if project has jsconfig.json.

@piotrtomiak please give me your opinion about this issue if you decide to use typescript.java. Thanks!

File icon in project explorer doesn't show compile error icon when there is an error in the file

Experiment to implement custom TypeScriptEditor

Today, ts files are opened with JSDT Editor, but there are several problems:

• double parsing of ts file (on JSDT client editor + on tsserver side).
• cannot override outline, open hierarchy, format, etc

This issue is about implementing a custom TypeScriptEditor, but it's a lot of work. I would like to reuse some JSDT features like syntax coloration to benefit with UI preferences to customize color, etc

Navigate to type declaration from reference, not to import

Semantic coloring in attributes (clear blue) and locals (brown) is missing.

Semantic coloring in attributes (clear blue) and locals (brown) is missing.

Autocompleting is not working in import path

See microsoft/TypeScript#188

Execute typescript.java from sources

I want to contribute (as least as beta tester) in typescript.java project.

I've downloaded a brand new eclipse distribution for plugin development. In concrete, I've downloaded "Eclipse IDE for Eclipse Committers 4.5.2".Then I've cloned the project and imported into Eclipse. But I get a lot of errors. What I'm doing wrong?

Collapse elements in editor

Maybe imports can be collapsed automatically as JDT does for Java

JSX syntax coloration

Waiting for JSDT Editor improvement https://bugs.eclipse.org/bugs/show_bug.cgi?id=486961

Release 1.0.0

I would like to create a release for typescript.java. Before doing that I would like to know @micaelgallego @piotrtomiak which important features must be implemented for this release.

Today we have

• for editor completion, hover, validation, hyperlink for typescript files.
• User can specify the version of TypeScript with preferences.

IMHO I think tsc (typescript compiler) must be implemented (I have started it, but it's not very robust).

If you think that there are other important features, tell me and I will develop it before doing the release.

Many thanks @micaelgallego @piotrtomiak for your feedack!

Update Site

Create an Update Site to install TypeScript IDE + Embed node.js

Hover when autocompleting shows `<pre>` and `</pre>` in the text

Hide compiled js, sourcemap files + show it inside ts file

Hide compiled js, sourcemap files + show it inside ts file

[ES6] Auto imports with completion

Code Formatting

Editor for source map *.js.map

Today when we try to open a source map *.js.map file, Eclipse tries to open it with system editor (In my case I have VSCode installed, and it opens VSCode).

Source map follow JSON syntax. It should be good to link *.js.map file to the Neon JSON Editor.

@piotrtomiak are you OK with that?

Code Folding

Implement code folding, but don't use the folding feature of JSDT which requires a build of AST which can be slow. Code folding will work like VSCode (which doesn't require AST) in other words it will use indentation and not the AST to have a very good performance.

Debugging TypeScript

typescript.java uses JSDT Editor for the *.ts file. So It should be cool if we could debug TypeScript like TypEcs with:

• Webclipse, see https://www.genuitec.com/forums/topic/debugging-typescript/
• JSDT debugger, see https://bugs.eclipse.org/bugs/show_bug.cgi?id=487465

Mark occurrences is missing.

Mark ocurrences is missing.

Quick Outline with Ctrl+O

Support for JSX

tsserver supports JSX https://code.visualstudio.com/Updates#_javascript-salsa-preview

This issue is to open *.jsx, *.tsx with JSDT Editor and consume tsserver with *.jsx files.

Find References (Ctrl+Shift+G)

Implement "Find References" (Ctrl+Shift+G)

Support for tslint

Put Eclipse into separate repo

That was a problem with tern.java, where while not directly depending on Eclipse, the build was angelozerr/tern.java#317

I believe there should be typescript.eclipse, that takes this repository as 1 or more jar dependency

ts.TypeScriptException: node file cannot be null

I get this exception when running the TypeScriptEditor example, using Eclipse Mars.2 and the newest typescript.java

ts.TypeScriptException: node file cannot be null at ts.nodejs.AbstractNodejsProcess.checkNodejsFile(AbstractNodejsProcess.java:66) at ts.nodejs.AbstractNodejsProcess.<init>(AbstractNodejsProcess.java:48) at ts.nodejs.NodejsProcess.<init>(NodejsProcess.java:39) at ts.nodejs.NodejsProcessManager.create(NodejsProcessManager.java:85) at ts.client.TypeScriptServiceClient.<init>(TypeScriptServiceClient.java:114) at ts.resources.TypeScriptProject.createServiceClient(TypeScriptProject.java:176) at ts.resources.TypeScriptProject.getClient(TypeScriptProject.java:136) at ts.eclipse.swt.samples.TypeScriptEditor.createUI(TypeScriptEditor.java:48) at ts.eclipse.swt.samples.TypeScriptEditor.main(TypeScriptEditor.java:36)

TypeScript editor is referred as "JavaScript editor" when open a file

Select only the name of the declaration when going to it from reference (Ctrl+Click)

In JDT when going to declaration, only the name of the element is selected. In TypeScript.java, all class or method is selected. I think the behavior should be the similar to JDT.

Configure TypeScript validator with sensible defaults

I was testing TypeScript validation feature and I think it will be good to have more sensible defaults in it, for example:

• Exclude node_modules folder: This folder is used to download "dependencies", not for used code. Moreover, it has potentially thousands of JS files. I think a sensible default is exclude this folder.
• Exclude other "non source code" folders: For example "tmp" or "build" folders

Also, I was wondering it "Validation builder" can be added to project automatically when adding TypeScript nature to project. The steps in https://github.com/angelozerr/typescript.java/wiki/Editor-Features#validation are a bit messy to newbies.

Outline is missing for TypeScript files