doppelmutzi / eslint-prettier-vscode-react

This is a project to demonstrate how to integrate an ESLint / Prettier workflow into VSCode
0 stars 0 forks source link

Changing indentation causes eslint error #1

Open MagnusBrzenk opened 4 years ago

MagnusBrzenk commented 4 years ago

Hi. I read your article and checked out this repo. I just want to setup vscode to format my code with .eslintrc.json as the SSOT for my linting/formatting rules.

When I tried to make a simple change to your code, such as adding:

...
  "rules": {
    "prettier/prettier": "error",
    "indent": [ "error", 4 ]              // I added this
  },
...

... and then tried saving e.g. src/App.js, I got lots of eslint errors in vscode, and odd behavior whereby hitting save would toggle back and forth between 2 and 4 space indents. Would appreciate it if you checked this out and see if you got the same behvior

doppelmutzi commented 4 years ago

hi @MagnusBrzenk, from my perspective your approach conflicts with this ESLint/Prettier Setup. You added a "ESLint formatting rule", however the whole configuration is that all formatting rules of ESLint are deactivated (by https://github.com/prettier/eslint-config-prettier) in order to not conflict with Prettier. So, the idea is to use ESLint just for static code analysis (and no formatting/prettifying) and let Prettier do the formatting work. You can read about my configuration more in an older article (Part II): https://medium.com/@doppelmutzi/eslint-prettier-vue-workflow-46a3cf54332f

The problem is that your added line is adding a ESLint formatting rule and the 4 spaces are conflicting with the 2 spaces defined by Prettier.

If you want to use this setup and want to adjust the indentation, you need to do it with the Prettier configuration. You can add a .prettierrc.json file at the root level:

{ "tabWidth": 4 }

Here you can read about the Prettier configuration options: https://prettier.io/docs/en/options.html

Let me know, if this was helpful.

MagnusBrzenk commented 4 years ago

Thanks for getting back @doppelmutzi

In the end I discovered tsdx, and managed to get everything I wanted as reported here.

doppelmutzi commented 4 years ago

No problem and thank you for the link. I will check tsdx out!

Am 20.09.2020 um 18:49 schrieb MagnusBrzenk notifications@github.com:

 Thanks for getting back @doppelmutzi

In the end I discovered tsdx, and managed to get everything I wanted as reported here.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or unsubscribe.