Using TypeScript with External Editors

Instead of the built-in Monaco editor, you may use an external editor. In this overview, we'll explain how to use Atom and VSCode.

Setting up a New Project

Create a new TypeScript project in the Atomic Editor
Navigate to Developer > Plugins > TypeScript > Create External Editor Project

This will generate a tsconfig.json file and copy over the latest Atomic.d.ts into your project directory.

Using Atom as an External Editor

First, make sure that you have a copy of Atom installed - it can be found @ https://atom.io and is available for all major platforms.

Besides Atom, you will also need the [Typescript package](https://atom.io/packages/atom-typescript). You can install it manually or use the built-in package installer to install the package (see picture to the left).

When all these steps are done, open your root project folder inside of Atom, and voila, you should be good to go. To build the project, use `F6`.

Additionally, you can use a linter to help identify some style and best practice violations in your code:
https://atom.io/packages/linter
https://atom.io/packages/linter-tslint

Using VSCode as an External Editor

First, make sure you have a copy of VSCode installed - it can be found @ https://code.visualstudio.com, and is, just as Atom, available on all major platforms.

In VSCode, open the root of your project folder. Now, you will need to configure a Task Runner - you can do this by opening the Command Palette (View > Command Palette or CMD/CTRL + SHIFT + P) and finding Tasks: Configure Task Runner.

Select TypeScript: tsconfig.json in the task runners available. Now, you should be able to edit your TypeScript and add new scripts inside of VSCode. To Build, press CMD/CTRL + SHIFT + B.

If you're on Linux, you may have to install TypeScript using sudo npm install -g typescript first.

VSCode has the ability to hide the generated .js files from the file tree for any corresponding .ts files. To do this, you can modify the files.exclude setting under Preferences->Settings.

An example configuration is:

    "files.exclude": {
        // exclude .js and .js.map files, when in a TypeScript project.  Also .asset files.
        "**/*.js": { "when": "$(basename).ts"},
        "**/*.js.map": true,
        "**/*.asset": true
    }