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

Question

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:

After saving:

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.

Answer 1

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.

Answer 2

Why not tell Prettier to ignore that part of the code. like this:

// prettier-ignore
import { Styleheets } from 'react-native';
import fonts from '../../config/constants/fonts/';
import { companyBlack, companyGray } from '../../config/constants/colors';

Take a read at this: https://prettier.io/docs/en/ignore.html