What is the default method for utilizing the TypeScript version specified in settings.json within VSCode?

Requirement: Ensure that when TypeScript files are opened in VSCode, the version of TypeScript used should be from node_modules rather than the default one provided by VSCode.

To achieve this, I updated the settings in the .vscode/settings.json file with the following code snippet as per the instructions outlined in the official documentation:

{
    "typescript.tsdk": "./node_modules/typescript/lib"
}

Despite making this change, VSCode continues to use its default TypeScript version. The problem has been replicated and documented in the vscode-typescript-default-version repository.

What steps should be taken to ensure that the TypeScript version from node_modules is used automatically when TypeScript files are opened in VSCode?

Trivikram

typescriptvisual-studio-code

Answer №1

To access the TypeScript version in Visual Studio Code, simply open a TypeScript file and then click on the TypeScript version located in the bottom right corner of the editor. From there, select the option that says Use Workspace Version.

https://i.sstatic.net/qWERF.png

If you want this configuration to be applied as default for all TypeScript files in VS Code, you can add the following line to your "User Settings" by pressing ctrl+comma:

"typescript.tsdk": "node_modules/typescript/lib"

In my situation, I found this file located in ~/.config/Code/User. If you happen to open a file in a directory that does not have node_modules/typesript/lib, you will see a warning message appear:

The path /home/user/example/node_modules/typescript/lib is invalid for tsserver install. Using bundled TypeScript version instead.

Answer №2

I encountered an issue with VSCode displaying numerous typescript errors despite the fact that typescript was compiling my code correctly. The root of the problem was traced back to VSCode updating their typescript SDK to version 5, whereas my project specifically required typescript 4.

In response to the query about forcing VSCode to default to the workspace typescript: Unfortunately, it is not possible.

A request for this functionality was submitted on the VSCode github repository but ultimately rejected. Even though I am utilizing VSCode 1.77.1, this feature remains unimplemented.

The only "workaround" available is to follow the steps outlined in this stackoverflow answer:

Currently, your options are limited to:

"typescript.tsdk": "./node_modules/typescript/lib",
"typescript.enablePromptUseWorkspaceTsdk": true,

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilizing electron and Systemjs to import node modules

Is it feasible for systemjs to utilize require("remote").require("nodemodule") when the module cannot be located in its registry? A similar mechanism seems to be functioning when utilizing electron with typescript and commonjs modules... Has anyone succe ...

javascriptnode.jstypescriptelectronsystemjs

Exploring the synergies between Typescript unions and primitive data types in

Given the scenario presented interface fooInterface { bar: any; } function(value: fooInterface | string) { value.bar } An issue arises with the message: Property 'bar' does not exist on type '(fooInterface | string)' I seem ...

typescriptinterfacetypescript-typings

Design an array specifically for runtime using a union type

Imagine I have the following union type: type Browser = 'Chrome' | 'Firefox' I am looking to convert this into an array: const browsers = /* code to change Browser type into ['Chrome', 'Firefox'] The goal is to u ...

typescriptunion-types

Define the interface for a GraphQL resolver argument in code-first implementation

This specific GraphQL schema example from the Constructing Types page showcases how to define the Query type. // Creating the Query type var queryType = new graphql.GraphQLObjectType({ name: 'Query', fields: { user: { type: userType ...

typescriptgraphql

Dealing with a void method in a React unit test by treating it as an object's property

How can I pass a value to a function in an interface to trigger a click event on an element? I have a React component that I want to write unit tests for: const VariantItem = (props: VariantItem): ReactElement => { return ( <div key={props.produc ...

reactjstypescriptjestjs

Instructions for excluding readonly properties from a type in typescript

Class getters are readonly properties, so it's logical that the code below would throw a type error. class Car { engine: number; get hp() { return this.engine / 2; } get kw() { return this.engine * 2; } } function ...

typescripttypesgettertypescript2.0

Issues with the messaging functionality of socket.io

Utilizing socket.io and socket.io-client, I have set up a chat system for users and operators. The connections are established successfully, but I am encountering strange behavior when it comes to sending messages. For instance, when I send a message from ...

node.jsreactjstypescriptsockets

tsconfig.json: No input files were detected in the configuration file

I am encountering an issue with my tsconfig.ts file where it says "No inputs were found in config file 'd:/self-study/Web/Learning/Express/tsconfig.json'. Specified 'include' paths were '["**/*"]' and 'exclude&a ...

javascriptnode.jstypescript

Why does the query builder keep sending inaccurately parameters in my query?

I am using the query builder to run the following query. However, when I print the query, it seems like the 2nd parameter is being passed instead of the 1st parameter. Can someone explain what I might be doing wrong here? const queryRunner: QueryRunner = ...

sqltypescriptpostgresqltypeorm

What methods can be utilized to effectively showcase and modify exclusively the keys within a nested JSON structure?

I am working with a JSON structure that looks like the image linked below. I want to extract and rename only the yellow highlighted keys, then store them in a new array. Here are the key renaming requirements: act = Actual prognosis = Prog plan = Plann ...

javascriptjsonangulartypescriptnested-json

Employing a dual IDE approach for a single project

Currently, I am developing an ASP.NET WebAPI with VUE.js Frontend (including a desktop Client). I enjoy using VSCode for Frontend work as it is optimized for Vue.js and tailored to my personal preferences. Similarly, I find that .NET and C# are well-suited ...

asp.netgitvue.jsvisual-studio-codevisual-studio-2019

Having trouble running yarn build in Docker due to a TypeScript error

Recently, I have encountered an issue where my project runs smoothly when built using yarn build, but throws a typescript error when I attempt to build it within a docker container. This problem only started occurring a week ago, as everything was function ...

reactjstypescriptdockeryarnpkg

Using a SharedModule in Angular2: A Guide

I have a single Angular2 component that I need to utilize across multiple modules. To achieve this, I created a SharedModule as shown below: import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-bro ...

angulartypescriptangular2-modulesng-modules

How can hover effects be incorporated within an inline style?

I utilized the Button component from ant design and adjusted its color using style. Now, I am looking to add a hover color effect to this Button. How can I achieve this? export default class NavBar extends React.Component{ render(){ return( ...

reactjstypescriptstylesantd

The art of blending different inheritance (Styled Elements)

Can components be based on other styled components? Take a look at the code snippets below. I am interested in creating a component like this: const HeaderDropDownLi = styled(DropDownLi, HeaderItem) Both DropDownLi and HeaderItem are derived from a style ...

javascriptcssreactjstypescriptstyled-components

Access SCSS variable values in Angular HTML or TypeScript files

So, I've been looking into whether it's feasible to utilize the SCSS variable value within HTML or TS in Angular. For instance: Let's say I have a variable called $mdBreakpoint: 992px; stored inside the _variable.scss file. In my HTML cod ...

javascriptcssangulartypescriptsass

What are some key indicators in the source code that differentiate TypeScript from JavaScript?

Reviewing some code on Github, I am looking for ways to quickly determine whether the script is written in JavaScript or TypeScript. Are there any simple tips or hints that can help with this? For instance, when examining an array declaration like the on ...

javascripttypescript

What is the correct regex expression for validating decimal numbers between 1.0 and 4.5?

I'm having trouble creating an expression to validate numbers between 1.0 to 4.5 accurately. The current expression I'm using is not working as intended: /^[1-4]{0,1}(?:[.]\d{1,2})?$/ The requirement is to only allow values between 1.0 to ...

javascriptangularregextypescriptvalidation

The axios GET request failed to return a defined value

My current issue involves making a get request using the following code snippet: router.get('/marketUpdates',((request, response) => { console.log("market updates"); var data: Order[] axios.get('http://localhost:8082/marketUpdates& ...

javascripthttptypescriptasynchronous

Encountering problem with React Typescript fetching data from Spring Data REST API: the error message "Property '_embedded' does not exist" is being displayed

I am currently working on a React application that utilizes Typescript to fetch data from a Spring Data REST API (JPA repositories). When I make a specific request like "GET http://localhost:8080/notifications/1" with an ID, my JSON response does not pose ...

jsonreactjstypescriptrestspring-data-jpa