Skip to content

Instantly share code, notes, and snippets.

@develax
Last active May 5, 2024 12:47
Show Gist options
  • Save develax/5bbd06edbec8d3a9706a5ea5f76526cb to your computer and use it in GitHub Desktop.
Save develax/5bbd06edbec8d3a9706a5ea5f76526cb to your computer and use it in GitHub Desktop.
VSCode + TypeScript setup

VSCode + TypeScript setup

Set TS version for VSCode intellisence

VS Code command palette: > TypeScript: Select TypeScript version

@develax
Copy link
Author

develax commented Apr 18, 2024

1. Install Node.js

2. Install TypeScript
npm install -g typescript

3. Initialize Your Project
npm init -y

4. Create a TypeScript Configuration File
tsc --init
This file enables you to specify various compiler options such as the target JavaScript version, the module system, source maps, the output directory, etc.

5. Create a .ts file in your project
For example, hello.ts.

6. Compile TypeScript
tsc hello.ts

7. Automate the Compilation Process
To make the process easier, you can configure VS Code to build your TypeScript files automatically:

  1. Open the Command Palette (by pressing Ctrl + Shift + P.
  2. Type Tasks: Configure Default Build Task and press Enter.
  3. Select tsc: build - tsconfig.json from the list. This creates a tasks.json file in the .vscode folder.

Now, you can build your TypeScript project by pressing Ctrl + Shift + B or running the build task through the Terminal menu.

8. Watch Mode
To automatically compile your TypeScript files whenever you save them, you can start the TypeScript compiler in watch mode. In the terminal, run: tsc --watch
This command will monitor your TypeScript files for changes and recompile them automatically.

@develax
Copy link
Author

develax commented Apr 18, 2024

Format TypeScript Document
This will format the entire document.

  • Windows/Linux: Shift + Alt + F
  • macOS: Shift + Option + F

Format Selection

  • Windows/Linux: Ctrl + K Ctrl + F
  • macOS: Cmd + K Cmd + F

Duplicate code line
Alt + Shift + Down Arrow or Alt + Shift + Up Arrow

@develax
Copy link
Author

develax commented May 5, 2024

Check TypeScript versions: npm list typescript

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment