visual-studio-codeprettierprettier-vscode

Differences between Prettier CLI and VSCode extension


I tried to align VSCode extension and my local version of Prettier CLI in my project in order to get same results from both tools.

With the following settings

// .vscode/settings.json
{
  "prettier.documentSelectors": ["**/*.svg"],
  "prettier.resolveGlobalModules": false,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "prettier.requireConfig": true,
  "prettier.prettierPath": "./node_modules/prettier",
}
// .prettierrc
{
  "printWidth": 80,
  "semi": true,
  "singleQuote": true,
  "trailingComma": "es5",
  "arrowParens": "always",
  "bracketSameLine": false,
  "overrides": [
    {
      "files": ["*.tsx"],
      "options": {
        "parser": "typescript"
      }
    }
  ]
}

And here is my test file

import * as React from 'react';

function Test() {
  const [indicatorStyle, setIndicatorStyle] = React.useState<React.CSSProperties>({});
}

The "Format Document" option from VSCode gives this result

import * as React from 'react';

function Test() {
  const [indicatorStyle, setIndicatorStyle] = React.useState<
    React.CSSProperties
  >({});
}

And the result from Prettier 2.8.0 CLI

import * as React from 'react';

function Test() {
  const [indicatorStyle, setIndicatorStyle] =
    React.useState<React.CSSProperties>({});
}

What should I do to get the same result instead (the result from Prettier CLI looks better in this case) ?

Thank you.


Solution

  • It seems to be related to a cache problem. After restarting VSCode I get the same results on both tools now!