Closed onichandame closed 4 years ago
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.
@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.
@JounQin
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.
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.
@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.
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.
And please provide what are the specific error outputs exactly... You comments maybe not so helpful to locate your real problems.
@JounQin Thanks but none of your suggestions worked. https://codesandbox.io/s/lingering-bush-7o3cn has been updated according to your advice.
plugin:mdx/recommended
to the end of the extends section.+
button (on the bottom right corner by default)npx eslint test.mdx --fix
Expected:
No error
Seen:
<div>hi</div>;
to <div>hi</div>;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
Not Working with Preset Styles
when initiates eslint with one of the preset styles: google, standard or airbnb, eslint-mdx seems to conflict with the preset style.
Your environment
Steps to reproduce:
choose one of
Standard
,Airbnb
,Google
style during initiation process.Now create a valid mdx file with import and jsx syntax and run eslint on the file.
Some weird errors are reported. It seems like something other than eslint-mdx is linting the mdx file.
Expected behaviour
no error is reported as the mdx is valid.
Actual behaviour
some weird errors are reported. The error reported is different for different preset style. Just to give an example, when the Airbnb style is chosen,
5:1 error JSX not allowed in files with extension '.mdx'
is reported.Note
When the style part in the config file is removed,
The problem disappeared. Therefore I guess that it's the conflict between the preset style and eslint-mdx that causes the problem.
This must be a very common scenario as all the steps follow the recommendation of eslint and eslint-mdx. But I cannot find a similar question on Google or StackOverflow. This might be helpful to others encountering the very problem in the future.