Question&Bug: Does not work well with preset styles about eslint-mdx HOT 8 CLOSED

Please provide a runnable online reproduction, I don't use CRA personally.

And the report should reference a specific eslint rule, which I think is actually not part of eslint-mdx at all.

from eslint-mdx.

@onichandame this is coming from from the airbnb preset
https://github.com/airbnb/javascript/blob/0375265cbd43635f8062615995a6a86f22fd0fc2/packages/eslint-config-airbnb/rules/react.js#L318-L320
To support mdx, override the "jsx-filename-extension" rule with

'react/jsx-filename-extension': ['error', { extensions: ['.jsx', '.mdx'] }]

in your eslint config.

from eslint-mdx.

@JounQin

Google

Please see https://codesandbox.io/s/lingering-bush-7o3cn.

Basically I ran npx eslint --init and selected Google style during setup. The the linebreak-style is changed to CRLF as the server seems to use CRLF on default.

Now if you run npx eslint test.mdx --fix and reload test.mdx by simply clicking it in the Files list, some extra semicolons are added to the end of line 7, which is definitely wrong.

Standard

https://codesandbox.io/s/holy-fast-734lf
This example is created with the Standard style. if you run npx eslint test.mdx in the terminal you will see the error Expected an assignment or function call and instead saw an expression

The problem when Airbnb style is chosen is described in my initial post, a re-production can be easily made. If you need a reproduction for this please give me a shout.

from eslint-mdx.

@ChristianMurphy Thanks! One problem solved. Sadly others remain.

https://codesandbox.io/s/vigilant-elion-urmpf
If you run npx eslint test.mdx in the terminal, same problem which is mentioned in the Google style part persists.

from eslint-mdx.

I didn't run codebox actually, but the key problem is .mdx files require eslint-mdx as parser while other configs may overrie it.

So you can try to locate plugin:mdx/recommended to last position of configs so that it will handle all files correctly.

Or, you can use overrides feature of ESLint according to README.

from eslint-mdx.

And please provide what are the specific error outputs exactly... You comments maybe not so helpful to locate your real problems.

from eslint-mdx.

@JounQin Thanks but none of your suggestions worked. https://codesandbox.io/s/lingering-bush-7o3cn has been updated according to your advice.

1. moved plugin:mdx/recommended to the end of the extends section.
2. added overrides rules according to the README.

Steps to Reproduce

1. go to https://codesandbox.io/s/lingering-bush-7o3cn
2. fork so you can access the terminal with your own account
3. open a new terminal by clicking + button (on the bottom right corner by default)
4. run npx eslint test.mdx --fix

Output

Expected:

No error

Seen:

1. the terminal prints 7:14 error Missing semicolon semi
2. the line 3 of test.mdx has been changed from <div>hi</div>; to <div>hi</div>;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;

from eslint-mdx.

@onichandame OK, I just open an issue and track it at #183.

There is no workaround for this issue temporarily, you can disable ESLint rule semi for .mdx files for now.

{
  "overrides": [
    {
      "files": ".mdx",
      "rules": {
        "semi": 0
      }
    }
  ]
}

from eslint-mdx.