YouTipTs Vscode
Title: Using VS Code to Develop TypeScript
Many IDEs support TypeScript plugins, such as: VS Code, Sublime Text 2, WebStorm / PHPStorm, Eclipse, etc.
This chapter mainly introduces VS Code, VS Code is a cross-platform source code editor that can run on Mac OS X, Windows and Linux, for writing modern Web and cloud applications, developed by Microsoft.
VS Code natively has built-in TypeScript language syntax support, but does not include the TypeScript compiler tsc. If you need to transpile TS source code to JS (execute command `tsc HelloWorld.ts`), you need to install the TypeScript compiler separately in the global or project workspace.
> VS Code Tutorial: [https://example.com/vscode/vscode-tutorial.html](https://example.com/vscode/vscode-tutorial.html)
> In addition, domestic Alibaba and ByteDance also have AI IDEs developed based on VS Code:
>
>
>
> AI Development Environment
### Installing TypeScript Compiler
The simplest installation method is through Node.js package manager npm. After npm is installed, execute the following command to install globally (-g):
```bash
npm install -g typescript
```
After installation, you can verify by outputting the version number:
```bash
tsc --version
```
### Installing Visual Studio Code on Windows
1. Download (https://code.visualstudio.com/).
!(https://example.com/wp-content/uploads/2019/01/9EDCE892-F34A-4D0C-82BF-03175CFA5F91.jpg)
2. Double-click the VSCodeSetup.exe icon !(https://example.com/wp-content/uploads/2019/01/1546508926-7107-launch-setup-process.jpg) to install.
!(https://example.com/wp-content/uploads/2019/01/1546508925-5165-setup-wizard.jpg)
3. After installation, the Visual Studio Code interface looks similar to the following:
!(https://example.com/wp-content/uploads/2019/01/1546508924-5187-ide.jpg)
4. We can click the currently edited code file in the left window, select **open in command prompt**, then we can use the **tsc** command in the lower right part of the screen to execute TypeScript file code.
!(https://example.com/wp-content/uploads/2019/01/1546508926-3046-traverse-files-path.jpg)
### Installing Visual Studio Code on Mac OS X
For Mac OS X installation and configuration of Visual Studio Code, please refer to: [https://code.visualstudio.com/Docs/editor/setup](https://code.visualstudio.com/docs/setup/setup-overview)
### Installing Visual Studio Code on Linux
For Linux installation and configuration of Visual Studio Code, please refer to: [https://code.visualstudio.com/Docs/editor/setup](https://code.visualstudio.com/docs/setup/setup-overview)
* * *
## Getting Started Example: Hello World
We take a minimal Hello World project in Node.js environment as an example. Create a new project folder and open VS Code:
```bash
mkdir HelloWorld
cd HelloWorld
code .
```
Create a new file helloworld.ts in the explorer.
!(https://example.com/wp-content/uploads/2026/06/create-new-file.png)
Write the following TS code. You can see the TS-specific keyword let and string type annotation:
```typescript
let message : string = "Hello World";
console.log(message);
```
Open the **Integrated Terminal** (shortcut key `kb(workbench.action.terminal.toggleTerminal)`), enter `tsc helloworld.ts` to compile the code. After successful compilation, the JS file helloworld.js will be automatically generated.
!(https://example.com/wp-content/uploads/2026/06/compiled-hello-world.png)
When Node.js is installed on this machine, you can execute the code by running `node helloworld.js`.
!(https://example.com/wp-content/uploads/2026/06/run-hello-world.png)
Opening the compiled helloworld.js will find that: the type declaration is removed, and let is downgraded to ES5's var:
```javascript
var message = "Hello World";
console.log(message);
```
* * *
## IntelliSense
IntelliSense provides code auto-completion, hover documentation, and function parameter signature hints, improving coding efficiency and accuracy.
VS Code provides full IntelliSense for both single TS files and TS projects with `tsconfig.json` configuration.
### Hover Documentation Hint
Hover over any TS identifier to quickly view the type and documentation of the variable/function;
The shortcut key `kb(editor.action.showHover)` can manually invoke the hover hint at the cursor position.
### Function Signature Hint
When writing function call code, the editor automatically displays the function parameter description and highlights the parameter currently being filled;
Enter left parenthesis `(` or comma `,` to automatically trigger the signature hint. Use shortcut key `kb(editor.action.triggerParameterHints)` to manually invoke it.
* * *
## Snippets
In addition to intelligent completion, VS Code has built-in basic TS code snippets. When entering keywords, quick templates automatically pop up.
You can install third-party extensions to expand the snippet library, or customize TS code snippets. For details, refer to the **User-Defined Snippets** documentation.
> **Tip**: Set `editor.snippetSuggestions` to `"none"` in the configuration file to disable snippet suggestions; if you need to keep it, you can configure the snippet display priority: `top` (top), `bottom` (bottom), `inline` (mixed with normal suggestions, sorted alphabetically, default configuration).
* * *
## Error and Warning Hints
The TS language service validates code in real-time and automatically marks syntax and logic issues:
* The editor status bar summarizes the total number of errors and warnings in the current project;
* Click the status bar statistics number, or use the shortcut key `kb(workbench.actions.view.problems)` to open the **Problems** panel, which lists all errors;
* For code lines with exceptions, they are marked with red hints inline, and the error location is marked on the right-side thumbnail ruler.
Use shortcut keys `kb(editor.action.marker.nextInFiles)` / `kb(editor.action.marker.prevInFiles)` to jump to the next/previous issue in the current file. A popup displays details and available quick fixes.
## Code Navigation
Rely on navigation features to quickly browse source code of large TS projects:
* **Go to Definition** `kb(editor.action.revealDefinition)`: Locate the source definition of the identifier;
* **Peek Definition** `kb(editor.action.peekDefinition)`: Popup preview of the source code without switching the current file;
* **Find All References** `kb(editor.action.goToReferences)`: List all locations in the project where this identifier is called;
* **Go to Type Definition**: Locate the type source code of the variable (for class instances, it jumps to the class itself, not the instance creation code);
* **Go to Implementation** `kb(editor.action.goToImplementation)`: Find the specific implementation code of interface/abstract methods.
Quick navigation is achieved through symbol search in the command palette