TypeScript in Visual Studio Code

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. It offers classes, modules, and interfaces to help you build robust components.

Working with TypeScript in Visual Studio Code

Installing the TypeScript compiler

Visual Studio Code includes TypeScript language support but does not include the TypeScript compiler, tsc. You will need to install the TypeScript compiler either globally or in your workspace to transpile TypeScript source code to JavaScript (tsc HelloWorld.ts).

The easiest way to install TypeScript is through npm, the Node.js Package Manager. If you have npm installed, you can install TypeScript globally (-g) on your computer by:

npm install -g typescript

You can test your install by checking the version.

tsc --version

Another option is to install the TypeScript compiler locally in your project (npm install --save-dev typescript) and has the benefit of avoiding possible interactions with other TypeScript projects you may have.

Syntax highlighting and semantic highlighting

In addition to syntax highlighting, TypeScript and JavaScript also provide semantic highlighting.

Syntax highlighting colors the text based on lexical rules. Semantic highlighting enriches the syntax coloring based on resolved symbol information from the language service.

Whether semantic highlighting is visible depends on the current color theme. Each theme can configure whether to display semantic highlighting and how it styles the semantic tokens.

If semantic highlighting is enabled and the color theme has a corresponding styling rule defined, different colors and styles can be seen.

Semantic highlighting can change colors based on:

  • The resolved type of a symbol: namespace, variable, property, variable, class, interface, typeParameter.
  • Whether the variable/property is read-only (const) or modifiable.
  • Whether the variable/property type is callable (a function type) or not.


IntelliSense shows you intelligent code completion, hover info, and signature information so that you can write code more quickly and correctly.

VS Code provides IntelliSense for individual TypeScript files as well as TypeScript tsconfig.json projects.


VS Code includes basic TypeScript snippets that are suggested as you type;

You can install extensions to get additional snippets or define your own snippets for TypeScript. See User Defined Snippets for more information.

Tip: You can disable snippets by setting editor.snippetSuggestions to "none" in your settings file. If you'd like to see snippets, you can specify the order relative to suggestions; at the top ("top"), at the bottom ("bottom"), or inlined ordered alphabetically ("inline"). The default is "inline".

JSDoc support

VS Code's TypeScript IntelliSense understands many standard JSDoc annotations, and uses them to show typing information and documentation in suggestions, hover info, and signature help.

TypeScript language within VS Code

Keep in mind that when using JSDoc for TypeScript code, you should not include type annotations. The TypeScript compiler only uses TypeScript type annotations and ignores those from JSDoc.

To disable JSDoc comment suggestions in TypeScript, set "typescript.suggest.completeJSDocs": false.

Hover information

Hover over a TypeScript symbol to quickly see its type information and relevant documentation:

Hover for a lodash function

You can also show the hover info at the current cursor position with the ⌘K ⌘I (Windows, Linux Ctrl+K Ctrl+I) keyboard shortcut.

Signature help

As you write a TypeScript function call, VS Code shows information about the function signature and highlights the parameter that you are currently completing:

Signature help for the lodash capitalize function

Signature help is shown automatically when you type a ( or , within a function call. Use ⇧⌘Space (Windows, Linux Ctrl+Shift+Space) to manually trigger signature help.

Auto imports

Automatic imports speed up coding by helping you find available symbols and automatically adding imports for them.

Just start typing to see suggestions for all available TypeScript symbols in your current project.

Global symbols are shown in the suggestion list

If you choose one of the suggestions from another file or module, VS Code will automatically add an import for it. In this example, VS Code adds an import for Hercules to the top of the file:

After selecting a symbol from a different file, an import is added for it automatically

You can disable auto imports by setting "typescript.suggest.autoImports": false.


VS Code includes a TypeScript formatter that provides basic code formatting with reasonable defaults.

Use the typescript.format.* settings to configure the built-in formatter, such as making braces appear on their own line. Or, if the built-in formatter is getting in the way, set "typescript.format.enable" to false to disable it.

For more specialized code formatting styles, try installing one of the formatting extensions from the VS Code marketplace.

JSX and auto closing tags

VS Code's TypeScript features also work with JSX. To use JSX in your TypeScript, use the *.tsx file extension instead of the normal *.ts:

IntelliSense in JSX

VS Code also includes JSX-specific features such as autoclosing of JSX tags in TypeScript:

Set "typescript.autoClosingTags" to false to disable JSX tag closing.

Code navigation

Code navigation lets you quickly navigate TypeScript projects.

  • Go to Definition F12 - Go to the source code of a symbol definition.
  • Peek Definition ⌥F12 (Windows Alt+F12, Linux Ctrl+Shift+F10) - Bring up a Peek window that shows the definition of a symbol.
  • Go to References ⇧F12 (Windows, Linux Shift+F12) - Show all references to a symbol.
  • Go to Type Definition - Go to the type that defines a symbol. For an instance of a class, this will reveal the class itself instead of where the instance is defined.
  • Go to Implementation ⌘F12 (Windows, Linux Ctrl+F12) - Go to the implementations of an interface or abstract method.

You can navigate via symbol search using the Go to Symbol commands from the Command Palette (⇧⌘P (Windows, Linux Ctrl+Shift+P)).

  • Go to Symbol in File ⇧⌘O (Windows, Linux Ctrl+Shift+O)
  • Go to Symbol in Workspace ⌘T (Windows, Linux Ctrl+T)


Press F2 to rename the symbol under the cursor across your TypeScript project:

Renaming a method


VS Code includes some handy refactorings for TypeScript such as Extract function and Extract constant. Just select the source code you'd like to extract and then click on the lightbulb in the gutter or press (⌘. (Windows, Linux Ctrl+.)) to see available refactorings.

TypeScript refactoring

See Refactorings for more information about refactorings and how you can configure keyboard shortcuts for individual refactorings.

Available TypeScript refactorings include:

  • Extract to method or function - Extract the selected statements or expressions to either a new method or a new function in the file.

    Triggering the extract method refactoring on a selection

    After selecting the Extract to method or Extract to function refactoring, enter the name of the extracted method/function.

  • Extract to constant - Extract the selected expression to a new constant in the file.

    Extracting a constant from a selection

  • Extract type to interface or type alias - Extract the selected complex type to either an interface or a type alias.

    Extract an inline type to an interface

  • Move to new file - Move one or more classes, functions, constants, or interfaces in the top-level scope of the file to a new file. The new file's name is inferred from the selected symbol's name.

    Moving a class to a new file

  • Convert between named imports and namespace imports - Convert between named imports (import { Name } from './foo') and namespace imports (import * as foo from './foo').

    Converting a named import to a namespace import

  • Convert between default export and named export - Convert from using a export default and having a named export (export const Foo = ...).

  • Generate get and set accessors - Encapsulate a selected class property by generating a getter and setter for it.

    Generating getters and setters from class property

  • Convert parameters to destructured object - Rewrite a function that takes a long list of arguments to take a single arguments object.

Quick Fixes

Quick Fixes are suggested edits that address simple coding errors. Example Quick Fixes include:

  • Adding a missing this to a member access.
  • Fixing a misspelled property name.
  • Removing unreachable code or unused imports
  • Declaring

When you move your cursor on to a TypeScript error, VS Code shows a lightbulb that indicates that Quick Fixes are available. Click the lightbulb or press ⌘. (Windows, Linux Ctrl+.) to show a list of available Quick Fixes and refactorings.

Unused variables and unreachable code

Unused TypeScript code, such as the else block of an if statement that is always true or an unreferenced import, is faded out in the editor:

Unreachable source code faded out

You can quickly remove this unused code by placing the cursor on it and triggering the Quick Fix command (⌘. (Windows, Linux Ctrl+.)) or clicking on the lightbulb.

To disable fading out of unused code, set "editor.showUnused" to false. You can also disable fading of unused code only in TypeScript by setting:

"[typescript]": {
    "editor.showUnused":  false
"[typescriptreact]": {
    "editor.showUnused":  false

Organize Imports

The Organize Imports source code action sorts the imports in a TypeScript file and removes unused imports:

You can run Organize Imports from the Source Action context menu or with the ⇧⌥O (Windows, Linux Shift+Alt+O) keyboard shortcut.

Organize imports can also be done automatically when you save a TypeScript file by setting:

"editor.codeActionsOnSave": {
    "source.organizeImports": true

Code Actions on Save

The editor.codeActionsOnSave setting lets you configure a set of Code Actions that are run when a file is saved. For example, you can enable organize imports on save by setting:

// On save, run both fixAll and organizeImports source actions
"editor.codeActionsOnSave": {
    "source.fixAll": true,
    "source.organizeImports": true,

You can also set editor.codeActionsOnSave to an array of Code Actions to execute in order.

Here are some source actions:

  • "organizeImports" - Enables organize imports on save.
  • "fixAll" - Auto Fix on Save computes all possible fixes in one round (for all providers including ESLint).
  • "fixAll.eslint" - Auto Fix only for ESLint.
  • "addMissingImports" - Adds all missing imports on save.

See TypeScript for more information.

Code suggestions

VS Code automatically suggests some common code simplifications such as converting a chain of .then calls on a promise to use async and await

Set "typescript.suggestionActions.enabled" to false to disable suggestions.

Inlay hints

Inlay hints add additional inline information to source code to help you understand what the code does.

Parameter name inlay hints show the names of parameters in function calls:

Parameter name inlay hints

This can help you understand the meaning of each argument at a glance, which is especially helpful for functions that take Boolean flags or have parameters that are easy to mix up.

To enable parameter name hints, set typescript.inlayHints.parameterNames.enabled. There are three possible values:

  • none — Disable parameter inlay hints.
  • literals — Only show inlay hints for literals (string, number, Boolean).
  • all — Show inlay hints for all arguments.

Variable type inlay hints show the types of variables that don't have explicit type annotations.

Setting: typescript.inlayHints.variableTypes.enabled

Variable type inlay hints

Property type inlay hints show the type of class properties that don't have an explicit type annotation.

Setting: typescript.inlayHints.propertyDeclarationTypes.enabled

Property type inlay hints

Parameter type hints show the types of implicitly typed parameters.

Setting: typescript.inlayHints.parameterTypes.enabled

Parameter type inlay hints

Return type inlay hints show the return types of functions that don't have an explicit type annotation.

Setting: typescript.inlayHints.functionLikeReturnTypes.enabled

Return type inlay hints

References CodeLens

The TypeScript references CodeLens displays an inline count of reference for classes, interfaces, methods, properties, and exported objects:

TypeScript references CodeLens

You can enable this by setting "typescript.referencesCodeLens.enabled": true in the User Settings file.

Click on the reference count to quickly browse a list of references:

TypeScript references CodeLens peek

Implementations CodeLens

The TypeScript implementations CodeLens displays the number of implementors of an interface:

TypeScript implementations CodeLens

You can enable this by setting "typescript.implementationsCodeLens.enabled": true.

As with the references CodeLens, you can click on the implementation count to quickly browse a list of all implementations.

Update imports on file move

When you move or rename a file that is imported by other files in your TypeScript project, VS Code can automatically update all import paths that reference the moved file.

The typescript.updateImportsOnFileMove.enabled setting controls this behavior. Valid settings values are:

  • "prompt" - The default. Asks if paths should be updated for each file move.
  • "always" - Always automatically update paths.
  • "never" - Do not update paths automatically and do not prompt.


VS Code comes with great debugging support for TypeScript, including support for sourcemaps. Set breakpoints, inspect objects, navigate the call stack, and execute code in the Debug Console. See the Debugging topic to learn more.

Debug client side

You can debug your client-side code using a browser debugger such as the built-in Edge and Chrome debugger, or the Debugger for Firefox.

Debug server side

Debug Node.js in VS Code using the built-in debugger. Setup is easy and there is a Node.js debugging tutorial to help you.

debug data inspection


Linters provides warnings for suspicious looking code. While VS Code does not include a built-in TypeScript linter, TypeScript linter extensions available in the marketplace.

ESLint is a popular linter, which also supports TypeScript. The ESLint extension integrates ESLint into VS Code so you can see linting errors right in the editor and even quickly many of fix them with Quick Fixes. The ESLint plugin guide details how to configure ESLint for your TypeScript projects.

TypeScript extensions

VS Code provides many features for TypeScript out of the box. In addition to what comes built-in, you can install an extension for greater functionality.

Tip: Click on an extension tile above to read the description and reviews to decide which extension is best for you. See more in the Marketplace.

Next steps

To learn more, see:

Common questions

Can I use the version of TypeScript that ships with VS 2015?

No, the TypeScript language service that ships with Visual Studio 2015 and 2017 isn't compatible with VS Code. You will need to install a separate version of TypeScript from npm.

How can I use the latest TypeScript beta with VS Code?

The simplest way to try out the latest TypeScript features in VS Code is to install the JavaScript and TypeScript Nightly extension.

You can also configure VS Code to use a specific TypeScript version.