Insert `··` prettier/prettier

Question

I have a project that has both prettier and eslint installed. The problem is that when I save a file eslint automatically changes the format of the file and it seems some rules conflict with prettier. What is the solution?

This is prettier formatting:

When saved, the file changes to:

Also this is eslintrc file

{
  "parser": "@typescript-eslint/parser",
  "extends": [
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:prettier/recommended",
    "prettier/@typescript-eslint"
  ],
  "rules": {
    "@typescript-eslint/explicit-function-return-type": "off",
    "@typescript-eslint/no-explicit-any": "off",
    "@typescript-eslint/ban-ts-ignore": "off",
    "@typescript-eslint/interface-name-prefix": "off",
    "@typescript-eslint/no-unused-vars": ["warn", { "argsIgnorePattern": "^_" }]
  },
  "overrides": [
    {
      "files": ["**/*.tsx"],
      "rules": {
        "react/prop-types": "off"
      }
    }
  ],
  "settings": {
    "react": {
      "version": "detect"
    }
  },
  "ignorePatterns": ["coverage/", "node_modules/", "src/serviceWorker.ts"]
}

Saber · Accepted Answer · 2020-08-01T19:00:16.297

21

Not fully configuring ESlint and Prettier can cause a myriad of issues. To avoid all of them follow the steps mentioned in How to use Prettier with ESLint and TypeScript in VSCode , also remove any extra setting in config files for ESlint, Prettier and setting.json for VScod that might override other rules.

Important: Based on the answer here: Uninstall prettier-eslint extension.

edited Aug 01 '20 at 19:00

answered Aug 01 '20 at 02:44

Saber

5,150
4
31
43

2

You saved my 45 minutes at least:) Thanks. – Nostromo Apr 20 '21 at 10:32

score 1 · Answer 2 · answered Aug 02 '23 at 09:21

Try change VSCode default formatter to ESLint:

1. By VSCode command line

Open go to file command line
Input and search:

> format Document With

Change your default formatter to tool which report error:

2. By go to setting, search for `formatter`, change it to `ESLint` or other tool which report error.

score 0 · Answer 3 · answered Feb 12 '22 at 18:11

0

.prettierrc

{
  "printWidth": 160
}

answered Feb 12 '22 at 18:11

weiya ou

2,730
1
16
24

score 0 · Answer 4 · answered Jul 17 '23 at 19:50

0

I uploaded locally the latest version of prettier

npm install --save-dev --save-exact prettier

then checked if all is fine as expected :

npm view prettier version

then accepted the quick fix proposed by VS Code, it was fine.

answered Jul 17 '23 at 19:50

marcdahan

2,654
25
25

score -1 · Answer 5 · answered Jul 31 '20 at 18:36

One workaround could be to concatenate strings with the addition operator (+) instead of using template strings:

try {
  const response = await api.get(
    API_BOARDS +
      boardSearchParam.boardId +
      `?assignees=${boardSearchParam.assigneeIds.toString()}/`
  );
} catch (err) {
  // ...
}

Depending on your ESLint rules, you might get an error saying that you should use template strings instead of the addition operator. In that case, you can create a variable and use the addition assignment operator (+=):

try {
  let url = API_BOARDS + boardSearchParam.boardId;
  url += `?assignees=${boardSearchParam.assigneeIds.toString()}/`

  const response = await api.get(url);
} catch (err) {
  // ...
}

It's a matter of taste, but I think this is even a bit nicer to read.

Why the downvote? The question is "What is the solution?" One solution is to use the addition operator and/or addition assignment operator instead of template strings. — Matias Kinnunen, Jul 31 '20 at 19:27

Insert `··` prettier/prettier

5 Answers5

1. By VSCode command line

2. By go to setting, search for formatter, change it to ESLint or other tool which report error.

2. By go to setting, search for `formatter`, change it to `ESLint` or other tool which report error.