VSC won't format code although eslint file exists and settings are set to fix on save

Question

I'm using VSC for backend and frontend development with Express, Nest, Angular, React and Vue (JS and TS).

I removed my prettier extension because for Vue projects I'm using the Airbnb code style and it didn't work with the prettier extension.

Currently my VSC settings are

https://gist.github.com/matthiashermsen/425609b71c7f6d1907fced3eaf2a6021

VSC does not format the code on save. When I'm using double quotes in a.ts file I would expect it to format it based on the linter file so it would replace the double quotes with single quotes. Or it would break the line if there are too many characters per line.

So for example this line

import { ApiOkResponse, ApiCreatedResponse, ApiConflictResponse, ApiNotFoundResponse, ApiBadRequestResponse, ApiBody, ApiParam, ApiQuery, ApiTags, ApiOperation } from '@nestjs/swagger';

should be formatted on save because it's too long.

Would someone mind telling me how to configure VSC that it's able to deal with every code style and every linter file and formats on save?

The editor is able to format HTML code in Vue files on save but it's not able to format.ts files in my NestJs backend.

Answer 1

Try "eslint.autoFixOnSave": true

And possibly "editor.defaultFormatter": "dbaeumer.vscode-eslint" You can also make this language specific, if you don't want ESLint to be your default formatter for all languages.

Finally, if the above don't work, try commenting out all of your other settings except for these, and then re-enable one by one to see if something is getting in the way.

Note of course that you have to have ESLint extension installed