When using VSCode, Prettier, and TSLint together, enabling the 'formatOnSave' option can interfere with the automatic

As I develop React applications using TypeScript in VSCode, I rely on tools like prettier and TSLint to maintain clean code.

In some recent projects, I've noticed that when I save my files, prettier disrupts the automatic sorting of imports:

Before saving: https://i.sstatic.net/QA0Ny.png

After saving: https://i.sstatic.net/SZBe6.png

It seems to be a result of prettier as the issue disappears when I disable it.

My current VSCode settings include:

"editor.formatOnSave": true,
"editor.formatOnType": false,
"prettier.tslintIntegration": true,
"tslint.autoFixOnSave": false,

Furthermore, these are the settings specified in my TSLint configuration (tslint.json):

{
  "extends": [
    "tslint:recommended",
    "tslint-eslint-rules",
    "tslint-react",
    "tslint-config-prettier"
  ],
  "jsRules": {},
  "rules": {
    "interface-name": false,
    "jsx-no-lambda": false,
    "quotemark": [true, "single", "jsx-double"]
  }
}

I'm curious about the root cause of this discrepancy. These settings have been effective in past projects without any import sorting issues upon saving. Strangely, only the imports seem to be affected by prettier's behavior.

typescriptvisual-studio-codecode-formattingtslintprettier

Answer №1

To fix the formatting issue in your project, consider creating a .prettierrc file at the root level and include the following configuration:

{
  "singleQuote": true
}

I encountered a similar dilemma while working with React and JavaScript. It appears that the problem lies with the singleQuote setting in Prettier. Despite having the ability to specify quote preferences in the VS Code Prettier extension, it does not always adhere to those settings in certain scenarios.

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

How can I ensure a function only runs after all imports have been successfully loaded in Vue 3?

Encountering an issue with importing a large quantitative variable in Vue 3. Upon running onMounted, it seems that the import process is not yet complete, resulting in an error indicating that the variable tesvar is "uninitialized". The code snippet prov ...

javascripttypescriptvue.jsimportvuejs3

"An error has occurred stating that the header is not defined in

It is a coding issue related to payment methods. The headers type is undefined in this scenario, and as a newcomer to typescript, pinpointing the exact error has been challenging. An error message is indicating an issue with the headers in the if conditio ...

javascriptreactjstypescriptapipayment

Triggering two function calls upon submission and then waiting for the useEffect hook to execute

Currently, I am facing a challenge with form validation that needs to be triggered on submit. The issue arises as some of the validation logic is located in a separate child component and is triggered through a useEffect dependency from the parent componen ...

reactjstypescript

Using a tuple as a key in a Map in Typescript/Javascript can be a powerful

Encountered a strange bug in my code where I'm struggling to achieve constant time lookup from a Map when using a tuple as the key. Here is an example highlighting the issue, along with the workaround I am currently using to make it function: hello. ...

javascripttypescript

Encountering a hiccup with importing while troubleshooting youtube-dl in Visual Studio Code

Currently in the process of creating a new extractor for youtube-dl. Initially, my goal is to debug the __main__.py file to better understand the tool, but unfortunately, I'm encountering difficulties debugging it using VS Code. Below is a snippet fro ...

pythondebuggingvisual-studio-codemoduleyoutube-dl

Validate that the input is an array

Looking for a way to determine if a function parameter is an array or not, and then process it accordingly. If the parameter is not an array, convert it into an array before performing the desired function. For example: interface employee { first: st ...

javascriptarraystypescript

Draggable bar charts in Highcharts allow users to interact with the data by clicking

I'm working on creating a chart that allows for setting values by clicking and dragging. While the dragging functionality is working fine, I've run into an issue with the click event. When I click to set a new value, the draggable feature acts er ...

angulartypescripthighchartsangular5

What is the process for launching a TypeScript VS Code extension from a locally cloned Git repository?

Recently, I made a helpful change by modifying the JavaScript of a VSCode extension that was installed in .vscode/extensions. Following this, I decided to fork and clone the git repo with the intention of creating a pull request. To my surprise, I discove ...

gittypescriptvisual-studio-codevscode-extensions

What is the best approach for filtering a nested array in this scenario?

Here is the response I am getting: let m = [ { name: 'Summary', subListExpanded: false, subList: [ ] }, { name: 'Upload', subListExpanded: false, subList: [ ...

javascriptarraysjsontypescriptfiltering

Configuring rows in React datagrid

I am working on a component where I receive data from the backend and attempt to populate a DataGrid with it. Below is the code for this component: export const CompaniesHouseContainer: React.FC<Props> = () => { const classes = useStyl ...

javascriptreactjstypescriptmaterial-ui

Displaying the default value in a Material-UI v5 select component

I am looking to display the default value in case nothing has been selected yet for the mui v5 select component below, but currently it appears empty... <StyledCustomDataSelect variant='outlined' labelId='demo-simple- ...

reactjstypescriptmaterial-ui

Are the functions 'useEffect' and 'useCallback' being repetitively used in this case?

I have implemented a custom hook in my React application to manage back navigation actions (POP). The functionality is operational, but I can't help but notice that useCallback and useEffect seem to be performing similar tasks. Here is the snippet of ...

reactjstypescriptreact-hooks

Tips for managing various potential return types in TypeScript?

In my research on the topic, I came across a discussion thread about obtaining the local IP address in Node.js at Get local IP address in Node.js. In that thread, there is a code snippet that I would like to incorporate: import net from 'net'; c ...

javascriptnode.jstypescript

Angular 2 - Error: Regular expression missing forward slash syntax

Recently, I began working on an Angular 2 tutorial app using this repository. While I can successfully launch the app and display static content, I am facing challenges with rendering dynamic content from the component. I have a feeling that the error migh ...

javascripttypescriptangular

What is the reason behind not being able to pass an instance of B to an argument a of type T in Typescript generics when T extends B?

There is a problem with my code: class X<T extends B> [...] // this.p.a :: B | null methodA(a: T):void {[...]} methodB(): void { if(this.p.a){ // :: B this.methodA(this.p.a) // Error My intention was for T to be any type that exten ...

typescriptgenericsparametric-polymorphismsubtyping

Guide on importing an external JavaScript library in Node.js utilizing a TypeScript declaration file

I am working on a Node.js project using Typescript and I am facing an issue with integrating mime.js (https://github.com/broofa/node-mime). Even though I have a declaration file available (https://github.com/borisyankov/DefinitelyTyped/blob/master/mime/mim ...

javascriptnode.jstypescript

Choosing the right Python interpreter when utilizing Docker and poetry in VS Code

When I open a monorepo folder in VS Code, the top folders represent different services. One of these services is a Python service that uses Poetry to manage dependencies. To manage dependencies, I have set up poetry's in-project=true and virtualenv s ...

pythondockervisual-studio-codepython-poetry

A feature that retrieves specific attributes from a type based on user-defined criteria

I am dealing with a group of types/interfaces that share common properties, but some cases do not utilize all of these properties. I would like to develop a function where only the names of the properties are passed to it. Here are the shared properties: ...

reactjstypescript

Show the attribute of an element in a pop-up window

I have a modal from ngx-bootstrap that I want to display in there a property of my object let's say the name: public students = [ { id: 1, name: 'lorem'} In this button that is common for all entries in the table (each row has this butt ...

htmlangulartypescript

Spread operator in TypeScript does not interact properly with a specific type

Currently, I am working with a redux-style reducer in ngrx that returns a specific type. However, I have encountered an issue where the TypeScript linter fails to catch invalid properties when using the spread operator in my return object. Below is the in ...

typescriptngrx