Skip to content

TypeScript BuildPath

angelozerr edited this page Nov 2, 2016 · 13 revisions

TypeScript Build Path

TypeScript Nature

A lot of Eclipse plugins (JDT, JSDT, other TypeScript plugins) use Eclipse Nature which is used for instance to show/hide some menus according the nature(s) of the Eclipse project.

TypeScript IDE doesn't use Eclipse Nature because a TypeScript project can be created with other IDE like VSCode, Atom, WebStorm, etc.

For TypeScript IDE, an Eclipse project is a TypeScript project if it contains one or more tsconfig.json files. The problem is that tsconfig.json files can be hosted in any folders of the project. To avoid scanning each time the whole of files of project, TypeScript IDE uses the following rules:

  • it searches tsconfig.json file inside the root project and /src folder. If a tsconfig.json file exists in those locations, the project has TypeScript Nature.

  • if tsconfig.json is not found in the default location, you can add one or several folders of your project by using TypeScript Build Path.

When a project has TypeScript Nature:

  • it display TypeScript Resources in the root of project inside the Project Explorer:

TypeScript Nature Inside Project Explorer

  • the TypeScript menu item of the project properties is shown:

TypeScript Nature Inside Project Properties

Please note that TypeScript IDE doesn't need TypeScript Nature if you wish to use just completion, hover, search inside TypeScript Editor since it consummes tsserver.

What is Build Path?

When a project is loaded, TypeScript IDE searches tsconfig.json inside the root project and /src folder. If a tsconfig.json file exists in those locations, the project has TypeScript Nature but your project could not follow this rule.

If you are in this case, you must configure Build Path by setting where your(s) tsconfig.json file(s) is(are) hosted. TypeScript Build Path is a list of folders which contains a tsconfig.json file in the root folder. Build Path is used for:

Here a demo with add/remove Build Path:

Demo With Build Path

Add Build Path

To add Build Path, select your custom folder which contains your tsconfig.json file, open contextual menu and select Add to TypeScript BuildPath...

TypeScript Build Path Add Menu

If your selected folder doesn't contains a tsconfig.json file in the root, it opens a dialog which searches folders which contains tsconfig.json files that you can select:

TypeScript Build Path Add Dialog

Remove Build Path

To remove Build Path, select your custom folder which contains your tsconfig.json file, open contextual menu and select Remove to TypeScript BuildPath...

TypeScript Build Path Remove Menu

Default Build Path

TODO : manage default build path with UI preferences to add other default folder (see issue 55).

Compilation

TODO: working on this issue.