VSCode, Prettier and TSLint: formatOnSafe messes up auto sort of imports

user_8331756 0
Viewed 4084

I'm building React apps with TypeScript. My editor is VSCode. I use prettier and TSLint to keep my code clean.

Since a couple of projects when I hit safe prettier messes up the auto sort of imports:

Before saving: Before save

After saving: After save

I don't know why that currently happens, but it is definitely caused by prettier (tested it without prettier it doesn't happen).

My VSCode settings are:

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

And here are my TSLint settings (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"]
  }
}

What could be the reason for this? I've used these settings with other projects before and they don't get messed up (even if I revisit them and safe now). Also it's only imports that get messed up, other than that, prettier works well.

tslint prettier visual-studio-code typescript code-formatting
1 Answers

Try adding a .prettierrc file to the root of your project and add the following to it: 

{
  "singleQuote": true
}

I had a similar problem with Angular+Typescript, and it seems to be caused by the singleQuote option in Prettier. The VS Code Prettier extension has an option to set the preferred quote style, but it doesn't seem to respect that in this case.

user_26822340
Related