How to Format Code on Save in VS Code with ESlint

[AleksandrHovhannisyan]

[hellomikko]

I just want to test this part out, forgive me, wanted to see if it will show up on your blog, thats all :)

[AleksandrHovhannisyan]

Lol, all good!

[hellomikko]

Oh this is nice! What chat are you using for jekyll?

[AleksandrHovhannisyan]

@icueMike Thanks! I fetch the comments using the GitHub Issues API: https://www.aleksandrhovhannisyan.com/blog/jekyll-comment-system-github-issues/. You can also use Utterances, but I prefer to roll my own system so I have more control over the styling.

[FloodGames]

There's some useful explanation here. Unfortunately, without prettier vscode extension, my eslint alone wouldn't format on save (i checked the settings).

I got it to work on prettier extension, along with this eslintrc:

"plugins": ["@typescript-eslint", "unused-imports"],
"extends": ["prettier", "eslint:recommended", "plugin:@typescript-eslint/recommended"],

[AleksandrHovhannisyan]

@FloodGames Hmm, interesting—I double-checked locally, and you shouldn't need the Prettier extension (it doesn't do anything by itself—you can use it to format code through the command palette with Format Code > Prettier, but the ESLint extension is actually the one that reads your workspace's eslintrc and formats your code). Glad you at least got it working, though!

[VanessaCarpes]

Thank you, your post is great. As you said, every time that a new project is created, some hours were lost with this configuration. I would like to add just a note, to complete my config I had to add this into my "settings.json" to start working. "editor.formatOnSave": true,

[AleksandrHovhannisyan]

@VanessaCarpes Thanks! Glad you found it useful.

I didn't need to add that setting on my end, but I do remember having used it in the past. editor.codeActionsOnSave alone should do the trick.

Thanks for sharing that note, though, in case other people run into the same issue.

[nkhil]

In case someone finds this useful, I'd configured format on save to use the VSCode default typescript formatter.

Fixed it by setting it back to ESLint,

"[typescript]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
  },
"editor.defaultFormatter": "dbaeumer.vscode-eslint",
"editor.formatOnSave": true,

I spent way too much time figuring this out, as the on-save format was doing things the .eslintrc file did not ask for.

[geoidesic]

editor.codeActionsOnSave shows as Unknown configuration setting for me

[AleksandrHovhannisyan]

@geoidesic Did you place that under ./vscode/settings.json or in your .eslintrc.json by accident? Only other thing I can think of is maybe an outdated VS Code version.

[douglashinckel]

Thank you!

[geoidesic]

@geoidesic Did you place that under ./vscode/settings.json or in your .eslintrc.json by accident? Only other thing I can think of is maybe an outdated VS Code version.

In ./vscode/settings.json. VsCode version is Version: 1.72.2

[bradley-varol]

I always forget how to get Prettier, ESLint and Typescript working together nicely when starting a new project. This was well written and easy to follow. Cheers :)