My eslint quote rules seem to be disregarded by Visual Studio Code

I am facing an issue with Visual Studio Code not following my eslint rules for my typescript project, particularly with quoting. More information about the configurations of my project can be found here: Typescript: Why doesn't Visual Studio Code report the same errors that the command line tsc does?

The problem lies in how Visual Studio Code handles certain strings. For example, when I have a string like "<<link \" \">>', it changes it to '<<link " ">>'. Similarly, a string like 'a\'s' is formatted as "a's"

Despite its intentions to assist, this behavior leads to eslint flagging errors due to mismatched quote rules as soon as the document is formatted.

While investigating, I noticed that Visual Studio Code may be conflicting with eslint in certain settings:

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

Based on the described issue, it is evident that Visual Studio Code is not adhering to the specified settings. How can I make Visual Studio Code respect my eslint quote rules? I have tried restarting the TS Server and the editor but to no avail.

typescriptvisual-studio-codeeslinttypescript-eslint

Answer №1

Upon further investigation, I've determined that the source of this issue lies with my Prettier extension.

When it comes to choosing between double or single quotes, Prettier opts for the one that requires the fewest escapes. For example, it will prefer "It's gettin' better!" over 'It\'s gettin\' better!'. If there is a tie, Prettier defaults to double quotes (though this can be changed using the --single-quote option).

Unfortunately, it seems that there is no way to align this behavior with eslint's preferences, leading to a perpetual conflict between the two tools. In response, I have disabled the quotes rule in my eslint configuration.

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

Encountering a Typescript error with Next-Auth providers

I've been struggling to integrate Next-Auth with Typescript and an OAuth provider like Auth0. Despite following the documentation, I encountered a problem that persists even after watching numerous tutorials and mimicking their steps verbatim. Below i ...

reactjstypescripttypesnext.jsnext-auth

Transform a base64 image into a blob format for transmission to the backend via a form

Is there a way to convert a base64 string image to a blob image in order to send it to the backend using a form? I've tried some solutions like this one, but they didn't work for me. function b64toBlob(b64Data, contentType='', sliceSiz ...

javascripttypescriptimagebase64blob

Having difficulties incorporating a separate library into an Angular project

My typescript library contains the following code, inspired by this singleton example code export class CodeLib { private static _instance: CodeLib; constructor() { } static get instance(): CodeLib { if(!this._instance){ ...

angulartypescriptwebpack

Unlocking rotation on a single screen in a react native application can be achieved by altering

I attempted to use react-native-orientation within a webview in order to make it the only view that would rotate. import React, {useEffect} from 'react'; import { WebView } from 'react-native-webview'; import Orientation from "react-na ...

typescriptreact-nativerotationscreen-rotation

Can you reach a screen prior to the stack navigator being established?

I'm diving into the world of React and decided to use Expo for building an app. I went with the TypeScript setup that comes with pre-implemented tabs and navigator by running "expo init newApp". Now, I just need a transition screen to display briefly ...

typescriptreact-nativeexpo

When trying to integrate Angular.ts with Electron, an error message occurs: "SyntaxError: Cannot use import statement

Upon installing Electron on a new Angular app, I encountered an error when running electron. The app is written in TypeScript. The error message displayed was: import { enableProdMode } from '@angular/core'; ^^^^^^ SyntaxError: Cannot use impor ...

javascriptangulartypescriptelectron

TypeScript error message: "The 'new' keyword cannot be used with an expression that does not have a call or construct signature."

Encountered a problem with intersection types in TypeScript... There are three type aliases: Prototype<T> - representing an object or class with a prototype property. DefaultCtor<T> - representing an object or class with a default construct ...

typescript

Can you explain the significance of this particular method signature in the TypeScript code snippet shown above?

Referencing the ngrx example, we encounter the code snippet for the method store.select, which has a complex signature with two arrows. What is the significance of this method signature? The interface definition in the type file presents the following sig ...

typescriptintellisensengrx

The validation for the email field in Bootstrap, specifically in Angular 5, is not functioning properly for the "Email is Required

As a newcomer to Angular, I am seeking assistance with validation in my Angular 5 application. Specifically, I need to validate user emails and only allow navigation to a new component when a valid email is entered upon clicking a button. While pattern va ...

angulartypescript

Looking for the location of the traceResolution output?

When I enable traceResolution in my tsconfig.json file, where can I expect to see the resulting output? { "compilerOptions": { "traceResolution": true, ... The --traceResolution flag enables reporting of module resolution log messages. You ...

typescript

Issue with reading the current length of an array object in a while loop in Angular 6

After successfully splitting an array into parts, I decided to add some filters to only include the items in the list that have an action status of (4). However, I encountered a problem where the while loop couldn't read the length of the array. This ...

angulartypescript

Dealing with an unspecified parameter can be tricky - here's how you

Currently, I am in the process of developing an angular application. In this project, there is a specific scenario that needs to be handled where a parameter is undefined. Here's a snippet of my code: myImage() { console.log('test') ...

javascriptangulartypescriptundefined

NativeScript: TypeScript for Formatting Numbers

Being a beginner in NativeScript, I'm finding it difficult to find basic information through Google search. But now, I have a specific question: I have the number 1234567.89 stored in a variable, and I want to display it in a label with the format ...

typescriptnativescript

Issue with exporting Typescript React component

Despite searching for answers, none of the related questions have been helpful... My goal is to export React components from a TypeScript library that I plan to publish on npm. For testing purposes before publishing, I am utilizing npm link. The structu ...

javascriptreactjstypescriptnpmwebpack

React.js TypeScript Error: Property 'toLowerCase' cannot be used on type 'never'

In my ReactJS project with TSX, I encountered an issue while trying to filter data using multiple key values. The main component Cards.tsx is the parent, and the child component is ShipmentCard.tsx. The error message I'm receiving is 'Property &a ...

javascriptreactjstypescripttypesreact-tsx

Tips for efficiently utilizing mapActions in vue with Typescript class components!

Can someone please provide guidance on the correct way to use ...mapActions([]) within a Typescript vue class component? This is my current approach: <script lang="ts"> import { Component, Prop, Vue } from "vue-property-decorator"; import { mapActi ...

typescriptvue.jsvuejs2vue-componentvuex

What is the best way to update the value of a Material Angular select to match its label in TypeScript?

Is there a way to reset the value of this select element back to <mat-label>Select Member</mat-label> in TypeScript when a specific event occurs? I am currently unable to find a solution on the TypeScript side. Any advice would be appreciated ...

angulartypescriptangular-material

The situation I find myself in frequently is that the Angular component Input

There seems to be an issue with a specific part of my application where the inputs are not binding correctly. The component in question is: @Component({ selector : 'default-actions', templateUrl : './default.actions.template.html&a ...

angulartypescript

Why does HttpClient in Angular 4 automatically assume that the request I am sending is in JSON format?

Currently, I am working with Angular 4's http client to communicate with a server that provides text data. To achieve this, I have implemented the following code snippet: this.http.get('assets/a.txt').map((res:Response) => res.text()).s ...

jsonangulartypescriptangular-httpclient

Guide on merging non-modular JavaScript files into a single file with webpack

I am trying to bundle a non-modular JS file that uses jQuery and registers a method on $.fn. This JS must be placed behind jQuery after bundling. Here is an example of the structure of this JS file: (function($){ $.fn.splitPane = ... }(JQuery) If y ...

javascripttypescriptwebpackfrontend