Setup `eslint-config-turbocharge` with VSCode ? about eslint-config-turbocharge

[q-nick]

Hi, Hello @bacloud22 you are probably the first user of this package ;) thanks. Could you tell me how you found this project? I didn't start to promote it yet - I'm just curious.

To answer your question.
If you want other developers to use this same config you must prepare the project for that.

Everything must be installed locally in the project AND you should create proper npm scripts to validate that new commits follow style guides enforced by prettier and eslint.

I will cover these topics in README soon, but now let me share my configs with you.

If all developers in the project use VSCode as you mention - that's perfect. The job is easy.
VSCode has a special folder for config that will override all user settings.

Here is my config for every project:

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "typescript.tsdk": "node_modules/typescript/lib",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  }
}

This file should be in your repository to share with other developers under: ./.vscode/settings.json take a look here https://github.com/q-nick/eslint-config-turbocharge/tree/master/.vscode

It forces prettier plugin to run on file save, and eslint to auto-fix issues.

All Developers should also install these VSCode extensions at least:
eslint: dbaumer.vscode-eslint
prettier: esbenp.prettier-vscode

You can enforce them by an additional file in the .vscode config folder:

extensions.json:

{
  "recommendations" :[
    "dbaumer.vscode-eslint",
    "esbenp.prettier-vscode"
  ]
}

https://stackoverflow.com/questions/50615102/vs-code-extension-recommendations-for-projects

The last thing is to define the script in package.json which will validate your code on CI.

package.json:

  {
    ...
    "scripts": {
      "lint": "prettier --ignore-path .gitignore --check . && eslint  --ignore-path .gitignore ."
    }
    ...
  }

You can also take a look at husky package, it could run the lint script when a developer is trying to commit changes.
https://www.npmjs.com/package/husky

Good luck ;)

Hello @q-nick ,
I don't remember where I found eslint-config-turbocharge but nothing special it must be GitHub directly or a direct link from Google.
Thank you so much for the extensive explanation I really appreciate this.

As for now, I read early today about about Eslint from their documentations and figured out relatively how things work. I had to remember myself some baby steps like: why use prettier in addition to Eslint and found one useful config to help them work together.

Now, I read about .vscode from you, good to know all of these rules to enforce a uniformed style of coding across forks.
I will try to make it happen although I'm working only with a friend on a small project but this seems very beneficial, especially with tedious merge conflicts (90% are about indentation).

I have another question please,
Setting fixAll onSave looks like a hard bet for me, because each time I prefer to review errors manually, except those for indentation.

[q-nick]

I think that you can just put a false value there instead of true. Eslint plugin for VSCode is recommended because it will show your issues inline in the code editor - that's very handy.

Thank you for the follow up @q-nick
I will let you if If find anything new in regard to this repo