Visual Studio Code provides exceptional support for JavaScript and TypeScript through the built-in typescript-language-features extension. This extension powers intelligent features for both languages using the TypeScript compiler’s language service.
Language Support Architecture The JavaScript and TypeScript support consists of three main extensions:
javascript Provides syntax highlighting, grammar definitions, and snippets for JavaScript and JSX files.
typescript-basics Provides syntax highlighting and grammar definitions for TypeScript and TSX files.
typescript-language-features Powers IntelliSense, diagnostics, refactoring, and all intelligent features for both JavaScript and TypeScript.
Supported File Types The extensions recognize the following file types:
JavaScript
.js - JavaScript files.mjs - ES6 modules.cjs - CommonJS modules.jsx - React JSX files.es6 - ES6 JavaScript.pac - Proxy auto-config files
TypeScript
.ts - TypeScript files.tsx - TypeScript JSX/React files.mts - TypeScript modules.cts - TypeScript CommonJS
Files starting with #!/usr/bin/env node or similar shebang are automatically recognized as JavaScript.
IntelliSense Features The TypeScript language service provides rich IntelliSense capabilities:
Code Completion Intelligent suggestions for:
Object properties and methods
Function parameters
Import statements
JSX components and props
Type annotations (TypeScript)
// Example: IntelliSense suggests methods as you type const numbers = [ 1 , 2 , 3 ]; numbers . map // Suggests: map, filter, reduce, etc.
Parameter Hints Signature help shows parameter information:
function createUser ( name : string , age : number , role : 'admin' | 'user' ) { // ... } createUser ( // Parameter hints appear automatically
Auto Imports Automatic import suggestions and statement generation:
// Type a symbol name React // Automatically suggests adding: import React from 'react';
Control auto-import behavior:
{ "js/ts.preferences.includePackageJsonAutoImports" : "auto" , "js/ts.preferences.importModuleSpecifier" : "shortest" }
Type Checking TypeScript Files TypeScript files receive full type checking automatically:
interface User { name : string ; age : number ; } const user : User = { name: "John" , age: "30" // Error: Type 'string' is not assignable to type 'number' };
JavaScript Files Enable type checking in JavaScript using JSDoc or by enabling checkJs:
// @ts-check /** * @param {string} name * @param {number} age */ function createUser ( name , age ) { return { name , age }; } createUser ( "John" , "30" ); // Error: Argument of type 'string' is not assignable to parameter of type 'number'
Configuration options:
{ "js/ts.implicitProjectConfig.checkJs" : true , "javascript.validate.enable" : true }
Debugging Setup VS Code includes a powerful debugger for JavaScript and TypeScript:
Node.js Debugging Create a .vscode/launch.json configuration:
{ "version" : "0.2.0" , "configurations" : [ { "type" : "node" , "request" : "launch" , "name" : "Launch Program" , "program" : "${workspaceFolder}/app.js" , "outFiles" : [ "${workspaceFolder}/dist/**/*.js" ] } ] }
TypeScript Debugging For TypeScript, configure source maps:
// tsconfig.json { "compilerOptions" : { "sourceMap" : true , "outDir" : "./dist" } }
Launch configuration:
{ "type" : "node" , "request" : "launch" , "name" : "Debug TypeScript" , "preLaunchTask" : "tsc: build - tsconfig.json" , "program" : "${workspaceFolder}/src/index.ts" , "outFiles" : [ "${workspaceFolder}/dist/**/*.js" ] }
Browser Debugging Debug client-side JavaScript:
{ "type" : "chrome" , "request" : "launch" , "name" : "Launch Chrome" , "url" : "http://localhost:3000" , "webRoot" : "${workspaceFolder}" }
Auto Attach Enable auto-attach for Node.js debugging:
{ "debug.javascript.autoAttachFilter" : "smart" }
With auto-attach enabled, simply run node --inspect from the integrated terminal and VS Code will automatically attach the debugger.
Refactoring The extension provides numerous refactoring capabilities:
// Select code and use Quick Fix (Cmd+.) const total = price * quantity + shipping ; // Refactor to: function calculateTotal ( price , quantity , shipping ) { return price * quantity + shipping ; }
Rename Symbol Intelligent rename across files (F2):
function processUser ( user ) { // Rename 'user' and all references update }
Organize Imports Automatically sort and remove unused imports:
{ "editor.codeActionsOnSave" : { "source.organizeImports" : "explicit" }, "js/ts.preferences.organizeImports" : { "caseSensitivity" : "auto" , "typeOrder" : "auto" } }
Convert Between Named and Default Imports // Convert between these formats via Quick Fix: import { Component } from 'react' ; import Component from 'react' ;
Language Configuration The extension defines:
{ "comments" : { "lineComment" : "//" , "blockComment" : [ "/*" , "*/" ] } }
Bracket Matching { "brackets" : [ [ "{" , "}" ], [ "[" , "]" ], [ "(" , ")" ], [ "${" , "}" ] ] }
Auto-Closing Pairs Automatic closing for quotes, brackets, and JSDoc:
{ "autoClosingPairs" : [ { "open" : "{" , "close" : "}" }, { "open" : "[" , "close" : "]" }, { "open" : "(" , "close" : ")" }, { "open" : " \" », " close ": " \ "" , "notIn" : [ "string" ] }, { "open" : "/**" , "close" : " */" , "notIn" : [ "string" ] } ] }
Code Snippets Built-in snippets for common patterns:
Class Definition // Type: class class name { constructor ( parameters ) { } }
Import Statement // Type: import import { } from "module" ;
Console Log // Type: log console . log ();
Constructor // Type: ctor /** * */ constructor () { super (); }
Configure code formatting preferences:
{ "js/ts.format.enabled" : true , "js/ts.format.insertSpaceAfterCommaDelimiter" : true , "js/ts.format.insertSpaceAfterKeywordsInControlFlowStatements" : true , "js/ts.format.insertSpaceBeforeAndAfterBinaryOperators" : true , "js/ts.format.insertSpaceAfterFunctionKeywordForAnonymousFunctions" : true }
Quote Style { "js/ts.preferences.quoteStyle" : "single" // or "double" or "auto" }
Import Module Specifier { "js/ts.preferences.importModuleSpecifier" : "shortest" , // or "relative" or "non-relative" "js/ts.preferences.importModuleSpecifierEnding" : "auto" // or "minimal" or "index" or "js" }
TypeScript SDK Configuration Use a specific TypeScript version:
{ "js/ts.tsdk.path" : "node_modules/typescript/lib" }
Changing the TypeScript SDK affects IntelliSense and error checking. Make sure the workspace TypeScript version is compatible with your project.
JSX/React Support Full support for JSX syntax:
const Component = ({ name }) => { return ( < div className = "container" > < h1 > { name } </ h1 > </ div > ); };
Configuration:
{ "js/ts.preferences.jsxAttributeCompletionStyle" : "auto" , "js/ts.preferences.renameMatchingJsxTags" : true }
Task Integration Automatic task detection for TypeScript:
{ "js/ts.tsc.autoDetect" : "on" // Detects tsc build tasks }
Tasks appear automatically in the Tasks menu for:
Recommended Extensions Enhance JavaScript/TypeScript development:
ESLint Integrates ESLint for code quality and style checking
Prettier Code formatter with opinionated style rules
Jest Test runner integration for JavaScript testing
Debugger for Chrome Debug JavaScript code running in Google Chrome
For large projects:
{ "js/ts.maxTsServerMemory" : 4096 , "js/ts.tsserver.maxFileSize" : 8192 , "editor.maxTokenizationLineLength" : 2500 }
Troubleshooting Restart TypeScript Server Command Palette > “TypeScript: Restart TS Server”
Check TypeScript Version Command Palette > “TypeScript: Select TypeScript Version”
View Server Logs { "js/ts.tsserver.log" : "verbose" }
The TypeScript language server runs in a separate process. Check the Output panel (“TypeScript” channel) for diagnostic information.