Error regarding eslint or prettier:Delete `·`

[sacred grove]

At first, when I created the project using @ nestjs/cli, this error did not occur, but when I saved the app. modules. ts file, my line of code: "export class AppModule {}" will automatically add a space character to this pair of curly braces, and then the following error occurs.
My .prettierrc and .eslntrc.js files are as follows. I don't know how to configure them to solve this problem (because the quick fix of VS code did not help me). I also don't want to solve this problem by turning off "format on save", which will prevent me from formatting when I save.

[desert patio]

This feels like eslint and prettier are not configured to be aware of each other

Try just doing plugins: ['prettier '] instead of prettier/recommend

https://github.com/prettier/eslint-plugin-prettier

Otherwise you might need to restart eslint's language server? Super weird as I don't usually see these two fighting like this

Actually, nevermind your config looks fine according to the docs

[sacred grove]

This helped me.It's amazing. As you said, I changed plugin: prettier/recommended in extensions to plugin: prettier. There are still spaces in empty objects, but it no longer reports errors.

[rose gulch]

I am getting the same error and while adding to plugins help I still want prettier to do its thing but when I add "prettier/prettier": "error" to eslintrc file the error returns...

[echo ether]

add this to ".eslintrc.js"

'prettier/prettier': [
    'error',
    {
      endOfLine: 'auto',
    },
  ],

[rose gulch]

I tried, it doesn't work 😦

[echo ether]

did you restart VS Code after?

[rose gulch]

Yes

[echo ether]

try to copy the entire file @rose gulch

module.exports = {
  parser: '@typescript-eslint/parser',
  parserOptions: {
    project: 'tsconfig.json',
    tsconfigRootDir: __dirname,
    sourceType: 'module',
  },
  plugins: ['@typescript-eslint/eslint-plugin'],
  extends: [
    'plugin:@typescript-eslint/recommended',
    'plugin:prettier/recommended',
  ],
  root: true,
  env: {
    node: true,
    jest: true,
  },
  ignorePatterns: ['.eslintrc.js'],
  rules: {
    '@typescript-eslint/interface-name-prefix': 'off',
    '@typescript-eslint/explicit-function-return-type': 'off',
    '@typescript-eslint/explicit-module-boundary-types': 'off',
    '@typescript-eslint/no-explicit-any': 'off',
  },
  'prettier/prettier': [
    'error',
    {
      endOfLine: 'auto',
    },
  ],
};

[shell raven]

Hi @desert patio
I setup a new project, with npm, from starting I am getting this error, I tried all the above solutions, but when we setup prettier in plugins and remove recommended from extends, VSCODE stops auto-formating the code. and also all the other error are aslo gone.

Please refer to the video.

[desert patio]

Okay, so nest new will cause this?

[shell raven]

I dont know actully what causes it, Just report it, If somebody have a fix for this.

[desert patio]

I need to know how to cause it on my side. Does a nest new project have this error for you, or do you have to make modifications?

[golden ether]

Delete or comment .eslintrc file

[desert patio]

Is that how to cause the problem or your solution to what's happening?

[shell raven]

This error is only happening when I am create new nest project,
i also create project for Nextjs and Vuejs but they are working good with eslint and prettier

[desert patio]

From nest new? What's nest --version report!

[golden ether]

This code is correct but eslint Does not allow.

[shell raven]

Any one find solution for this??

[desert patio]

You've still not told me how to reproduce this. It seems like it's an issue with how eslint and prettier are set up, but I don't know what you're doing to cause this, so I can't verify it myself

[shell raven]

@desert patio
Steps I took

1. create new nestjs project with command nest new project-name
2. change prettier file to this

{
  "semi": true,
  "tabWidth": 2,
  "singleQuote": false,
  "trailingComma": "all",
  "bracketSpacing": true
}

3. Add typeOrm, mysql and some dependencies to setup database

nest vserion while creating project - 10.2.1

This is my VS-Code settings json

[desert patio]

Operating system?

[shell raven]

MAC M1 Pro

[desert patio]

Could be that the formatter for your IDE is set to VSC's formatter, which might not match the prettier settings you've set. I'll follow the steps you've mentioned locally and see what happens. It's a unix environment, so it should be similar

[shell raven]

By Default I have none formatter

[desert patio]

By default, for Typescript, you have vscode's formatter

[shell raven]

Please,Can you suggest me which formatter will be best, and also get alligned with prettier and eslint

[desert patio]

Why not use prettier like you alrady do in the [typescriptreact] setting?

[desert patio]

Yep, looks like using

{
  "[typescript]": {
    "editor.defaultFormatter": "vscode.typescript-language-features"
  }
}

And then formatting a document will add that space to the {} changing it to { }, which causes eslint to display an error due to the plugin:prettier/recommnded integration.

To fix this, either remove the plugin:prettier/recommended extension in the .eslintrc.js or change your editor.defaultFormatter to be esbenp.prettier-vscode

[shell raven]

@desert patio Thank you, Its works after I replace my editor.defaultFormatter to esbenp.prettier-vscode