What is the process for configuring PhpStorm to sync with TypeScript tsconfig.json in .vue files?

Vue.js (webpack + vueify) with TypeScript is my current setup. The ts configuration appears to be functioning, but only in .ts files.

For instance, in tsconfig.json:

"compilerOptions": {
    "strictNullChecks": false,

So strictNullChecks works as expected in .ts files:

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

However, it doesn't work in .vue files:

https://i.sstatic.net/8jA0u.png

Encountering the error:

Initializer type null is not assignable to variable type string

TypeScript isn't throwing compile errors; only PhpStorm seems to have issues detecting the configuration.

Is there a way for the configuration in tsconfig.json to apply to .vue files as well?

typescriptvue.jsphpstormvuejs2webstorm

Answer №1

When it comes to error reporting, WebStorm's own parser operates independently from your tsconfig.json. Changing the setting for "strictNullChecks": false will only impact the TypeScript service responsible for highlighting errors in .ts files by default (assuming Use TypeScript Service is enabled in 

Settings | Languages & Frameworks | TypeScript
)

It's worth noting that the Typescript compiler/service currently does not support .vue files (https://github.com/Microsoft/TypeScript/issues/10427), so its functionality is limited to .ts files; for TypeScript within .vue files, WebStorm relies on its own parser instead.

Additionally, there is an inconsistency in WebStorm's handling of embedded TypeScript - while it allows assigning null in .ts files, the same is not permitted in .vue files ()

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

Combining user input data using JavaScript and Vue.js

I am working on a form using Vue.js and I want to combine the data from the input fields upon submission. I have been struggling to achieve this and created a jsfiddle to showcase my attempt. In my form, I have three Vue components for each of the input f ...

javascriptvue.js

Unable to trigger click or keyup event

After successfully implementing *ngFor to display my data, I encountered an issue where nothing happens when I try to trigger an event upon a change. Below is the snippet of my HTML code: <ion-content padding class="home"> {{ searchString ...

typescriptangularionic2

The proper method for retrieving FormData using SyntheticEvent

I recently implemented a solution to submit form data using React forms with the onSubmit event handler. I passed the SyntheticBaseEvent object to a function called handleSubmit where I manually extracted its values. I have identified the specific data I n ...

javascriptreactjstypescriptnext.js

What is the correct way to include bootstrap.min.js from node modules into a Vue CLI project?

Currently, I am utilizing vue cli for my project. After installing Bootstrap with the command npm install bootstrap, I managed to successfully import @import "../node_modules/bootstrap/dist/css/bootstrap.min.css" ; in a Vue component. However, despite in ...

vue.jsvuejs2vue-component

Vue instance with non-reactive data

I am looking to store an object in Vue that will be accessible throughout the entire instance but does not need to be reactive. Typically, if I wanted it to be reactive, I would use 'data' like this: new Vue({ data: myObject }) However, since ...

javascriptvuejs2reactive-programmingvuex

Updating Angular 8 Component and invoking ngOninit

Within my main component, I have 2 nested components. Each of these components contain forms with input fields and span elements. Users can edit the form by clicking on an edit button, or cancel the editing process using a cancel button. However, I need to ...

javascriptangulartypescriptangular8

How can I incorporate a script from the node_modules directory into a VueJS project?

Whenever a node_module is installed, the corresponding folder is automatically added inside the node_module directory of my application. Now, I am looking to include a script that resides within an installed module, such as .. installed_module/dist/ How d ...

vue.jsnode-modules

What is the best way to exclude multiple properties from an object in JavaScript?

Having two methods that return Pick<T, K> and Omit<T, K> types where Omit is defined as type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>, I am facing difficulty in removing multiple properties from an object. Th ...

typescriptobject

Obtain the ViewContainerRef of the AppComponent

Currently, I am searching for a method to obtain the ViewContainerRef of the AppComponent using a service. I have come across various sources online such as this article, this blog post, and this forum thread, but they are all tailored to older versions o ...

angulartypescriptangular6

What is the best way to conceal a global component like a navbar on specific routes?

Most of the pages on my vuejs SPA feature a top navbar component, but there are certain views like the login page where I do not want it to be displayed. My current solution involves importing the navbar and adding it to each view separately when needed. ...

vue.jsvuejs2vue-router

Tips for embedding HTML/CSS snippets in backticks when using TypeScript with AngularJS

Does anyone else experience the issue of their Angular 2 templates showing up as gray text in Visual Studio Code? I'm unable to use autocomplete or see my CSS properly. Is this a settings problem or is there a plugin that can solve this? BTW, I am us ...

htmlcssangularjstypescriptbackticks

Scoped Styles rarely stand a chance against more dominant styles

I'm facing a scope issue while learning Vue. Question: I am trying to make sure that the styles in profile.vue do not override the ones in sidebar.vue. I want the sidebar to have a red background and the profile section to be blue. Shouldn't usi ...

cssvue.jssassscope

Error: The module could not be located due to the inability to resolve the path to './router'. This issue is specifically related to Vue router

Looking at the search.js file: import {createRouter, createWebHistory} from "vue-router"; import SearchIndex from './components/omdb/SearchIndex.vue' const routes = [ { path: '/', name: 'welcome&apos ...

laravelvue.jsvue-componentvue-routervuejs3

Angular textbox with dynamic concatenated name functionality

Hello, I'm currently working with some code that looks like this: <div *ngFor="let phone of phoneList; let phIndx = index;"> <div class="peoplePhoneTxtDiv"> <input [disabled]="phone.disabled" class="peoplePhoneTxtBox" type="text" ...

angularhtmltypescriptangular5

Instructions for utilizing Pinia alongside defineCustomElement in Vue 3

Has anyone tried incorporating the pinia store directly into a component as an element? I attempted to do so, but encountered the following error in the developer console: index.8ec3cfca.js:1 TypeError: Cannot read properties of undefined (reading '_ ...

vue.jsvue-componentstorecustom-elementpinia

Can you please provide an explanation on the functioning of Dependency Injection in Nestjs?

I have been delving into Nest.js and incorporating it into my project structure. Additionally, I have integrated TypeORM into the mix. The concept of Dependency Injection in Nest.js has me feeling a bit perplexed. Project Structure |-APP_MODULE |-app.co ...

typescriptexpressnestjs

Error encountered in Angular 7.2.0: Attempting to assign a value of type 'string' to a variable of type 'RunGuardsAndResolvers' is not allowed

Encountering an issue with Angular compiler-cli v.7.2.0: Error message: Types of property 'runGuardsAndResolvers' are incompatible. Type 'string' is not assignable to type 'RunGuardsAndResolvers' This error occurs when try ...

javascriptangulartypescriptangular-router

Tips for generating a new method using an existing one

Searching for the best practice to inform the ts compiler that a method will be generated at runtime. interface Todo { /* ... */ } export class TodoModel { todos: Todo[] = []; constructor() { //... } bindTodoListChanged(callback : (todos: Todo[]) ...

typescript

Using v-bind and AJAX in Vue.js

Transitioning from jQuery to Vue 2.0 has been a breeze for the most part, but I am facing challenges when it comes to handling AJAX calls and working with responses in Vue. One specific issue is related to a "Modal trigger" that opens a modal window upon ...

ajaxvue.js

What are the best methods for transferring data between child and parent components effectively?

First and foremost, here is the current setup: CHILD COMPONENT // HTML <v-select v-bind:items="selectItems" v-model="selectedItem" label="Category" item-value="text" ></v-select> <v-text-field label="Enter Value" type="number" v-mod ...

vue.jsvuejs2vue-component