-
-
Notifications
You must be signed in to change notification settings - Fork 1
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.
- Create a new TypeScript project in the Atomic Editor
- Navigate to
Developer > Plugins > TypeScript > Create External Editor Project
This will generate atsconfig.json
file and copy over the latestAtomic.d.ts
into your project directory.
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.
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
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
}
Additionally, you can use this linter to help identify some style and best practice violations in your code.
Home | Copyright (c) 2020-2021