mdx-js / eslint-mdx Goto Github PK
View Code? Open in Web Editor NEWESLint Parser/Plugin for MDX
Home Page: https://npmjs.org/eslint-plugin-mdx
License: MIT License
ESLint Parser/Plugin for MDX
Home Page: https://npmjs.org/eslint-plugin-mdx
License: MIT License
When creating lint configs, many people will already install eslint-plugin-react
. By listing the package as a devDependency and peerDependency, the consumer controls the version of the package.
The conflicting versions yield warnings during install and cause confusion as to which version of plugin is being adhered to during linting.
What should happen? Please describe the desired behavior.
Always install the latest version and let people use resolutions
if they need to pin it lower.
<div>hi</div>;
is a valid jsx node, but eslint-mdx
parses it incorrectly like <div>hi</div>
what means ;
in jsx node are ignored.
I am receiving this error with a file as simple as this:
`
Let's define a story for our TableRowMenu
component:
error:
#####/stories/TableRowMenu.stories.mdx
1:0 error Parsing error: #####/TableRowMenu.stories.mdx: Unexpected token (1:0)
1 | # Menu List
| ^
2 |
3 | Let's define a story for ourTableRowMenu
component:
4 |
`
Additionaly, I cannot manage to set VSCode to read the mdx files
Version of the plugin: v0.2.2
Settings:
"eslint.options": {
"lintFiles": ["./src/", "./stories/"],
"extenstions": [".js", ".jsx", ".md", ".mdx", ".ts", ".tsx"]
},
"eslint.probe": [
"javascript",
"javascriptreact",
"typescript",
"typescriptreact",
"html",
"vue",
"markdown",
"mdx"
]
I launch this command: eslint --config .eslintrc.yml --ext .js,.jsx,.mdx "src/" "stories/"
The .eslintrc.yml:
extends:
settings:
react:
version: latest
parser: '@babel/eslint-parser'
parserOptions:
ecmaVersion: 6
sourceType: 'module'
ecmaFeatures:
jsx: true
experimentalDecorators: true
globals:
DEV: true
SERVER: true
plugins:
I think it should not through an error
The error happens
Should be very easy.
It will enable rules for filename.
// not work
<div style={{ color: 'white', backgroundColor: 'black', padding: '24px 32px' }}>
<a
style={{
color: 'white',
textDecoration: 'none',
fontWeight: 'bold',
fontSize: 32
}}
href="https://blacklivesmatters.carrd.co/"
>
#BlackLivesMatter →
</a>
</div>
// work
<div style={{ color: 'white', backgroundColor: 'black', padding: '24px 32px' }}>
<a
style={{
color: 'white',
textDecoration: 'none',
fontWeight: 'bold',
fontSize: 32
}}
href="https://blacklivesmatters.carrd.co/"
>
#BlackLivesMatter →
</a>
</div>
Two lines with self-closing JSX tags seem to have issues:
error Parsing error: unknown jsx node: "<Hero />\n<Featured />"
"@typescript-eslint/eslint-plugin": "^2.17.0",
"@typescript-eslint/parser": "^2.17.0",
"eslint": "^6.8.0",
"eslint-config-prettier": "^6.9.0",
"eslint-config-react-app": "^5.1.0",
"eslint-plugin-flowtype": "^4.6.0",
"eslint-plugin-graphql": "^3.1.1",
"eslint-plugin-import": "^2.20.0",
"eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-mdx": "^1.6.5",
"eslint-plugin-prettier": "^3.1.2",
"eslint-plugin-react": "^7.18.0",
"eslint-plugin-react-hooks": "^2.3.0",
import Hero from '../components/hero';
import Featured from '../components/favorites';
<Hero />
<Featured />
The parser should be able to handle two separate self-closing JSX tags on subsequent lines.
The parser throws an error.
Due to mdx-js/mdx#195, we can't use multi-line template strings in MDX (for use with styled-components
for example). Therefore, I think we should disable no-multi-str
in the overrides
config.
Split package to eslint-mdx
as the parser and @rxts/eslint-plugin-mdx
as the plain plugin by using monorepos, rename the repository name to be eslint-mdx
.
I'm trying to lint *.mdx file in Next.js typescript project but getting below error.
eslint ./pages/** --ext .mdx -c ./.eslintrc.json
0:0 error Parsing error: "parserOptions.project" has been set for @typescript-eslint/parser.
The file does not match your project config: pages\blog\setup-vscode\index.mdx.
The extension for the file (.mdx) is non-standard. You should add "parserOptions.extraFileExtensions" to your config
{
"root": true,
"env": {
"browser": true,
"es2020": true,
"node": true
},
"parser": "@typescript-eslint/parser",
"plugins": [
"react",
"@typescript-eslint",
"react-hooks",
"promise",
"jsx-a11y"
],
"extends": [
"plugin:@typescript-eslint/recommended",
"plugin:@typescript-eslint/recommended-requiring-type-checking",
"airbnb-typescript",
"airbnb/hooks",
"plugin:mdx/recommended",
"plugin:promise/recommended",
"plugin:react/recommended",
"plugin:import/warnings",
"plugin:import/errors",
"plugin:jsx-a11y/recommended",
"prettier",
"prettier/@typescript-eslint",
"prettier/react"
],
"settings": {
"react": {
"version": "detect"
}
},
"parserOptions": {
"project": "./tsconfig.json",
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 12,
"sourceType": "module",
"extraFileExtensions:": [".mdx"],
"extensions:": [".mdx"]
}
}
{
"compilerOptions": {
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": true, // can set to false
"forceConsistentCasingInFileNames": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
// additional flags
"noImplicitAny": true, //disable use of 'any'
"suppressImplicitAnyIndexErrors": true,
"pretty": true,
"noImplicitReturns": true,
"strictNullChecks": false,
"noUnusedLocals": false,
"noUnusedParameters": false
},
"include": [
"next-env.d.ts",
"**/*.ts",
"**/*.tsx",
"**/*.config.js" /* .config.js files */
],
"exclude": ["node_modules"]
}
"@typescript-eslint/eslint-plugin": "^4.9.1",
"@typescript-eslint/parser": "^4.9.1",
"eslint": "^7.15.0",
"eslint-config-airbnb": "^18.2.1",
"eslint-config-airbnb-typescript": "^12.0.0",
"eslint-config-prettier": "^7.0.0",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-mdx": "^1.8.2",
"eslint-plugin-promise": "^4.2.1",
"eslint-plugin-react": "^7.21.5",
"eslint-plugin-react-hooks": "^4.2.0",
Do let me know if you need further details.
I have eslint-plugin-markdown
enabled in this project with processor
option enabled:
{
files: ['**/*.mdx'],
processor: 'markdown/markdown',
},
Now when I enable eslint-plugin-mdx
:
{
files: ['**/*.mdx'],
processor: 'markdown/markdown',
extends: ['plugin:mdx/recommended'],
},
eslint
won't report any errors.
Only when I remove processor
will `eslint report the lint problems:
https://github.com/webpack/webpack.js.org/pull/4326
yarn
yarn lint:js
eslint-plugin-mdx
should work fine along with eslint-plugin-markdown
.
eslint-mdx
uses .processSync instead of .process, causing async plugins to fail.
Error: `processSync` finished async. Use `process` instead
Occurred while linting /Users/tilde/Code/oss/mdx/packages/remark-mdx/readme.md:1
at assertDone (/Users/tilde/Code/oss/mdx/node_modules/unified/index.js:469:11)
at Function.processSync (/Users/tilde/Code/oss/mdx/node_modules/unified/index.js:401:5)
at Program (/Users/tilde/Code/oss/mdx/node_modules/eslint-plugin-mdx/lib/cjs.js:361:44)
at /Users/tilde/Code/oss/mdx/node_modules/eslint/lib/linter/safe-emitter.js:45:58
at Array.forEach (<anonymous>)
at Object.emit (/Users/tilde/Code/oss/mdx/node_modules/eslint/lib/linter/safe-emitter.js:45:38)
at NodeEventGenerator.applySelector (/Users/tilde/Code/oss/mdx/node_modules/eslint/lib/linter/node-event-generator.js:254:26)
at NodeEventGenerator.applySelectors (/Users/tilde/Code/oss/mdx/node_modules/eslint/lib/linter/node-event-generator.js:283:22)
at NodeEventGenerator.enterNode (/Users/tilde/Code/oss/mdx/node_modules/eslint/lib/linter/node-event-generator.js:297:14)
at CodePathAnalyzer.enterNode (/Users/tilde/Code/oss/mdx/node_modules/eslint/lib/linter/code-path-analysis/code-path-analyzer.js:634:23)
yarn format
in mdx-js/mdx
(with changes on a branch)
Support async plugins:
Crash.
P.S. aside: you may be interested in vfile-to-eslint
when initiates eslint with one of the preset styles: google, standard or airbnb, eslint-mdx seems to conflict with the preset style.
yarn create react-app app
cd app
npx eslint --init
yarn add -D eslint-plugin-mdx
choose one of Standard
, Airbnb
, Google
style during initiation process.
4. add mdx to config
{
"extends": [
"plugin:mdx/recommended"
]
}
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.
no error is reported as the mdx is valid.
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.
When the style part in the config file is removed,
{
"extends": [
"airbnb"
]
}
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.
There is an error with this repository's Renovate configuration that needs to be fixed. As a precaution, Renovate will stop PRs until it is resolved.
Location: package.json
Error type: The renovate configuration file contains some invalid settings
Message: Invalid configuration option: author, Invalid configuration option: commitlint, Invalid configuration option: eslintIgnore, Invalid configuration option: jest, Invalid configuration option: license, Invalid configuration option: name, Invalid configuration option: packageRules[0].@1stg/lib-config, Invalid configuration option: packageRules[0].@1stg/tslint-config, Invalid configuration option: packageRules[0].@types/eslint, Invalid configuration option: packageRules[0].@types/eslint-plugin-markdown, Invalid configuration option: packageRules[0].@types/jest, Invalid configuration option: packageRules[0].@types/node, Invalid configuration option: packageRules[0].@types/react, Invalid configuration option: packageRules[0].@types/unist, Invalid configuration option: packageRules[0].lerna, Invalid configuration option: packageRules[0].npm-run-all, Invalid configuration option: packageRules[0].react, Invalid configuration option: packageRules[0].remark-validate-links, Invalid configuration option: packageRules[0].ts-jest, Invalid configuration option: packageRules[0].ts-node, Invalid configuration option: packageRules[0].tslint, Invalid configuration option: packageRules[0].type-coverage, Invalid configuration option: packageRules[0].typescript, Invalid configuration option: packageRules[0].yarn-deduplicate, Invalid configuration option: prettier, Invalid configuration option: private, Invalid configuration option: remarkConfig, Invalid configuration option: renovate, Invalid configuration option: resolutions, Invalid configuration option: scripts, Invalid configuration option: typeCoverage, Invalid configuration option: version, Invalid configuration option: workspaces
I don't know how much can be done about this, but using remark plugins that use external processes (like remark-lint-no-dead-urls
or remark-preset-github
) throws the following error:
$ npx eslint README.md
Error: `processSync` finished async. Use `process` instead
Occurred while linting /home/cdfa/Projects/react-turn-reveal/README.md:1
at assertDone (/home/cdfa/Projects/react-turn-reveal/node_modules/.registry.npmjs.org/unified/8.4.0/node_modules/unified/index.js:459:11)
at Function.processSync (/home/cdfa/Projects/react-turn-reveal/node_modules/.registry.npmjs.org/unified/8.4.0/node_modules/unified/index.js:391:5)
at Program (/home/cdfa/Projects/react-turn-reveal/node_modules/.registry.npmjs.org/eslint-plugin-mdx/[email protected][email protected]/node_modules/eslint-plugin-mdx/lib/es/rules/remark.js:35:44)
at listeners.(anonymous function).forEach.listener (/home/cdfa/Projects/react-turn-reveal/node_modules/.registry.npmjs.org/eslint/6.4.0/node_modules/eslint/lib/linter/safe-emitter.js:45:58)
at Array.forEach (<anonymous>)
at Object.emit (/home/cdfa/Projects/react-turn-reveal/node_modules/.registry.npmjs.org/eslint/6.4.0/node_modules/eslint/lib/linter/safe-emitter.js:45:38)
at NodeEventGenerator.applySelector (/home/cdfa/Projects/react-turn-reveal/node_modules/.registry.npmjs.org/eslint/6.4.0/node_modules/eslint/lib/linter/node-event-generator.js:253:26)
at NodeEventGenerator.applySelectors (/home/cdfa/Projects/react-turn-reveal/node_modules/.registry.npmjs.org/eslint/6.4.0/node_modules/eslint/lib/linter/node-event-generator.js:282:22)
at NodeEventGenerator.enterNode (/home/cdfa/Projects/react-turn-reveal/node_modules/.registry.npmjs.org/eslint/6.4.0/node_modules/eslint/lib/linter/node-event-generator.js:296:14)
at CodePathAnalyzer.enterNode (/home/cdfa/Projects/react-turn-reveal/node_modules/.registry.npmjs.org/eslint/6.4.0/node_modules/eslint/lib/linter/code-path-analysis/code-path-analyzer.js:646:23)
100% coverage
One thing I noticed is that rebass
is an optionalDependencies
, so yarn is going to install it whenever possible as per https://classic.yarnpkg.com/en/docs/dependency-types/, and it installs quite a lot of packages https://github.com/webpack/webpack.js.org/pull/4326/files#diff-51e4f558fae534656963876761c95b83b6ef5da5103c4adef6768219ed76c2de.
But I don't use rebass
at all, hence it just doesn't make sense.
Just install eslint-plugin-mdx
and check yarn.lock
for rebass
.
rebass
should not be installed just because I have eslint-plugin-mdx
installed.
rebass
is installed along with eslint-plugin-mdx
.
Describe your issue here.
eslint-plugin-mdx uses dependency cosmiconfig that uses for async
, not supported until node 10: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for-await...of
/var/lib/jenkins/workspace/#####/node_modules/eslint-plugin-mdx/node_modules/cosmiconfig/dist/Explorer.js:54
for await (const place of this.config.searchPlaces) {
^^^^^
SyntaxError: Unexpected reserved word
at NativeCompileCache._moduleCompile (/var/lib/jenkins/workspace/#####/node_modules/v8-compile-cache/v8-compile-cache.js:242:18)
at Module._compile (/var/lib/jenkins/workspace/#####/node_modules/v8-compile-cache/v8-compile-cache.js:186:36)
at Object.Module._extensions..js (module.js:663:10)
at Module.load (module.js:565:32)
at tryModuleLoad (module.js:505:12)
at Function.Module._load (module.js:497:3)
at Module.require (module.js:596:17)
at require (/var/lib/jenkins/workspace/#####/node_modules/v8-compile-cache/v8-compile-cache.js:161:20)
at Object.<anonymous> (/var/lib/jenkins/workspace/#####/node_modules/eslint-plugin-mdx/node_modules/cosmiconfig/dist/index.js:12:17)
at Module._compile (/var/lib/jenkins/workspace/#####/node_modules/v8-compile-cache/v8-compile-cache.js:194:30)
Fails on linting mdx files: (npm run lint)
Doesn't fail
The package.json for eslint-plugin-mdx is:
´´´
"engines": {
"node": ">=7.0.0"
},
´´´
Because of this, it may needed to, either upgrade to >10 or resolve the dependency node requirements for cosmiconfig
Hi, the usage instructions in the README say to add an override for the extends
config for MDX files, but this is not supported by eslint
: eslint/eslint#8813. Just adding it to the main extends
list should be fine I think.
When newlines exist between 2 nested jsx nodes, linting of the file fails with Parsing error: unknown jsx node
.
[email protected]
, (10.23.0 in CodeSandbox)[email protected]
Error
<div>
<p>test</p>
<p>test</p>
</div>
No Error
<div>
<p>test</p>
<p>test</p>
</div>
This should pass lint without error
Lint fails with error
Adding style={{}}
seems to break parsing of closing tags.
error Parsing error: Unexpected closing tag "Button". It may happen when the tag has already been closed by another tag. For more info see https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags
"@typescript-eslint/eslint-plugin": "^2.17.0",
"@typescript-eslint/parser": "^2.17.0",
"eslint": "^6.8.0",
"eslint-config-prettier": "^6.9.0",
"eslint-config-react-app": "^5.1.0",
"eslint-plugin-flowtype": "^4.6.0",
"eslint-plugin-graphql": "^3.1.1",
"eslint-plugin-import": "^2.20.0",
"eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-mdx": "^1.6.5",
"eslint-plugin-prettier": "^3.1.2",
"eslint-plugin-react": "^7.18.0",
"eslint-plugin-react-hooks": "^2.3.0",
---
title: Contact
---
import { Button } from '@rmwc/button';
# Contact
<Button
raised
style={{ margin: '8px' }}
>
Message Me
</Button>
The parser should be able to style on a JSX tag.
The parser throws an error.
Can't disable remake-lint rules while using it with mdx-js/eslint-mdx (on a .md file). Tried:
<!--lint disable no-duplicate-headings-->
// eslint-disable-next-line mdx/remark
/ eslint-disable mdx/remark /
I can disable mdx rules in .mdx files just fine, but it doesn't work for .md ones.
Also, seems pretty bad to have to reload my vscode to update disabled rules from .remarkrc file. Is there any better way to use these rules with eslint?
package.json
"eslint": "v7.0.0",
"eslint-plugin-mdx": "^1.6.9",
"remark-preset-lint-consistent": "^3.0.0",
"remark-preset-lint-markdown-style-guide": "^3.0.0",
"remark-preset-lint-recommended": "^4.0.0",
"remark-preset-prettier": "^0.4.0",
.eslintrc
"overrides": [
{
"files": "**/*.+(md|mdx)",
"extends": ["plugin:mdx/recommended"]
}
]
.remarkrc
module.exports = {
plugins: [
'preset-lint-consistent',
'preset-lint-markdown-style-guide',
'preset-lint-recommended',
'preset-prettier'
]
}
Linting Markdown and MDX files with eslint-mdx results in Parsing error: Invalid left-hand side in prefix operation
error
yarn install
yarn run lint
Frontmatter in sample Markdown and MDX files should parse without error
Eslint outputs Parsing error: Invalid left-hand side in prefix operation
remark-lint seems better than markdownlint.
We can already get code blocks in eslint-mdx
, so it should be possible to lint them by eslint-plugin-mdx
itself.
A setting named lintCodeBlocks: boolean
should be required.
Additional, we can reference eslint-plugin-markdown
's codes.
#####Getting an eslint error when using safe optional operator in my typescript files.
I use eslint-mdx to lint my mdx stories. In my typescript project i use safe optional operator and i get Expected an assignment or function call and instead saw an expression. (mdx/no-unused-expressions)
error from the eslint mdx plugin. Only workaround i have found is to disable the rule for all ts/tsx files.
It should not show an error
In mdx file I have a mix of HTML and markdown. eslint-plugin-mdx is not recognizing md syntax.
After remove markdown code works
eslint: 7.7.0
- eslint-plugin-mdx: 1.8.2
- typescript: 4.0.2
.eslintrc
{
"env": {
"browser": true,
"jest/globals": true
},
"settings": {
"react": {
"version": "detect"
}
},
"parser": "@typescript-eslint/parser",
"extends": [
"standard",
"eslint:recommended",
"plugin:jest/recommended",
"plugin:react-hooks/recommended",
"plugin:@typescript-eslint/recommended",
"plugin:react/recommended",
"prettier",
"prettier/react",
"prettier/@typescript-eslint",
"prettier/standard",
"plugin:mdx/recommended"
],
"plugins": ["@typescript-eslint", "react", "react-hooks", "standard", "jest"]
}
I'm currently creating a new eslint setup in my project and everything seems fine but when I lint .mdx
files I'm getting the below warning. I couldn't find anything in the docs or if it is even already supported but frontmatter support is necessary.
.../src/pages/about.mdx
1:3 error Parsing error: Invalid left-hand side in prefix operation
> 1 | ---
| ^
2 | title: 'About Me'
3 | ---
4 |
No frontmatter support
Should ignore the frontmatter section or lint it if it is possible (indention etc.)
What are the alternative solutions? Please describe what else you have considered?
My eslint config:
{
"parser": "babel-eslint",
"plugins": [
"import"
],
"extends": [
"eslint:recommended",
"plugin:import/errors",
"plugin:import/warnings",
"plugin:react/recommended",
"plugin:mdx/recommended",
"plugin:jsx-a11y/strict",
"plugin:prettier/recommended"
],
"env": {
"es6": true,
"browser": true,
"commonjs": true,
"serviceworker": true
},
"parserOptions": {
"sourceType": "module",
"ecmaVersion": 2020
},
"settings": {
"react": {
"version": "detect"
},
"import/resolver": {
"node": {
"extensions": [
".js",
".jsx"
]
}
}
},
"rules": {
"react/display-name": "off",
"react/prop-types": "off",
"import/order": [
"error",
{
"groups": [
[
"builtin",
"external",
"internal"
]
]
}
],
"default-case": "off"
}
In VSCode, when using a details element I get the following error: "Parsing Errors: Unterminated JSX contents".
I am pretty sure this is because of this plugin since it goes away if I remove the plugin from my ESLint config (bug then I have other errors ;)).
Here's my ESLint config:
module.exports = {
overrides: [
{
globals: {
"props": true
},
files: ["*.mdx"],
extends: ["plugin:mdx/recommended"],
rules: {
"semi": "off",
"react/jsx-tag-spacing": "off",
"max-len": "off",
"react-hooks/rules-of-hooks": "off"
}
}
]
};
All the tags are closed. I try to paste the code but it doesn't format well becaise it contains markdown.
The file is available here: https://github.com/gsoft-inc/sg-orbit/blob/master/packages/react-components/src/button/stories/custom-color-hover.mdx
Thank you for your help,
Patrick
Tell us how to reproduce this issue. Please provide a working and simplified example.
🎉 BONUS POINTS for creating a minimal reproduction and uploading it to GitHub. This will get you the fastest support. 🎉
No error when using <details><summary>
What happens instead?
A Parsing Error
// input
Inline <Test>{/* it's a comment */}</Test>
// fixed output
Inline <Test><!-- it's a comment --></Test>
Which is an opposite of #13.
The following code:
- <LinkTo kind="docs-packages-vuetify-preset" story="page">
Vuetify preset
</LinkTo>
: some extra text describing the preset
Trigger an error on line 3:
</LinkTo>
^^^^^^
Parsing error: '>' expected.
Adding an empty line between the last two lines fixes the issue, but the rendered output is not the same. Also putting it all in a single line works, but it’s not "Prettier compliant" and gets reformatted on multiple lines. If the same code is placed at the root (not within a markdown list), it works as well.
It does pretty much the same with a regular element instead of a component, but the error is different:
Parsing error: Identifier expected
Note that the code compiles properly, the problem is only at EsLint level.
Linting of minimal mdx:
<!-- * foo -->
<!-- * bar -->
No any errors
Results in error:
Parsing error: Cannot read property '2' of null
The root of the problem is that the COMMENT_CONTENT_REGEX
regexp is global and is used twice in different parts of the code with .exec
method, that mutates it's lastIndex
property.
I'm preparing a pull request to fix it.
Here's the content of a mdx file:
Webpack 5 has been officially released. Read our <a href="/blog/2020-10-10-webpack-5-release/">announcement</a>. Not ready yet? Read <a href="https://v4.webpack.js.org/">webpack 4 documentation here</a>.
And the eslint configuration:
module.exports = {
root: true,
extends: ['eslint:recommended', 'plugin:react/recommended', 'prettier'],
parser: '@babel/eslint-parser',
env: {
browser: true,
es6: true,
node: true,
jest: true,
'cypress/globals': true,
},
plugins: ['markdown', 'cypress', 'react-hooks'],
globals: {
__DEV__: true,
},
rules: {
'no-console': 'off',
semi: ['error', 'always'],
quotes: ['error', 'single'],
'react/jsx-uses-react': 'off', // no longer needed with new jsx transform
'react/react-in-jsx-scope': 'off', // ditto
'react-hooks/rules-of-hooks': 'error',
'react-hooks/exhaustive-deps': 'warn',
},
settings: {
react: {
version: 'detect',
},
},
overrides: [
{ files: ['src/**/*.jsx'] }, // eslint would lint .js only by default
{
files: ['**/*.mdx'],
extends: ['plugin:mdx/recommended'],
globals: {
Badge: true,
},
rules: {
semi: ['off'],
},
settings: {
'mdx/code-blocks': true,
},
},
{
files: ['**/*.md'],
processor: 'markdown/markdown',
},
{
files: ['**/*.{md,mdx}/*.{js,javascript}'], // we don't lint ts at the moment
rules: {
indent: ['error', 2],
quotes: ['error', 'single'],
'no-undef': 'off',
'no-unused-vars': 'off',
'no-constant-condition': 'off',
'no-useless-escape': 'off',
'no-dupe-keys': 'off',
},
},
],
};
And here's the lint result:
1:94 warning `"` can be escaped with `"`, `“`, `"`, `”` mdx/no-unescaped-entities
1:95 warning `>` can be escaped with `>` mdx/no-unescaped-entities
1:111 warning `>` can be escaped with `>` mdx/no-unescaped-entities
Here's the pull request webpack/webpack.js.org#4326 you can use to reproduce:
yarn
to installyarn lint:js
No warning showed.
Warnings.
After enabling "plugin:mdx/recommended"
extension in .eslintrc.js
, .vue
files of a Vue project suddenly start incorrectly reporting syntax error during eslint --ext .js,.ts,.vue,.mdx --ignore-path .gitignore .
, even though this extension shouldn't affect .vue
files at all (at least I wasn't able to find anything similar in provided documentations after hours of searching).
/sandbox/components/IconLink.vue
22:8 error Parsing error: '}' expected
/sandbox/components/Logo.vue
3:4 error Parsing error: Identifier expected
/sandbox/layouts/default.vue
9:13 error Parsing error: '}' expected
/sandbox/pages/about.vue
15:14 error Parsing error: '}' expected
/sandbox/pages/index.vue
4:12 error Parsing error: Identifier expected
✖ 5 problems (5 errors, 0 warnings)
"devDependencies": {
"@nuxt/typescript-build": "^2.0.3",
"@nuxtjs/eslint-config-typescript": "^5.0.0",
"@nuxtjs/eslint-module": "^3.0.1",
"eslint": "^7.14.0",
"eslint-config-prettier": "^6.15.0",
"eslint-plugin-mdx": "^1.8.2",
"eslint-plugin-nuxt": "^2.0.0",
"eslint-plugin-prettier": "^3.1.4",
"prettier": "^2.2.1"
}
yarn --version
is 1.22.4
yarn lint
in a new terminalDocumentation of this library claims that it only affects .mdx
files, so there should be no new sudden errors.
The valid .vue
files fail on lint. If you remove "plugin:mdx/recommended"
from .eslintrc.js
and try again, this time there's no error.
Saw the
Need help?
Please ask on Spectrum
and
This is not a place to ask questions. For that, go to [Spectrum]> >
(https://spectrum.chat/mdx)
So asked there first.
eslint-plugin-mdx triggering mdx/no-unescaped-entities inside JSX
Clone and run yarn
: https://github.com/NickyMeuleman/gatsby-theme-nicky-blog.git
Look at any React component in .mdx
that passes a prop with a string value.
Example <YouTube youTubeId="dQw4w9WgXcQ" />
https://github.com/NickyMeuleman/gatsby-theme-nicky-blog/blob/master/demo/data/posts/i-want-it-all/index.mdx#L27
No mdx/no-unescaped-entities error for the quotes in <YouTube youTubeId="dQw4w9WgXcQ" />
mdx/no-unescaped-entities error
This project has the MDX defaults for support, contributing, issue/pr templates, etc, but some project-specific ways to contribute (e.g., how to publish) are unclear to me.
I’m unsure what the procedure is to publish a release.
Documentation on which scripts to run, what to do, etc.
body
and comments
are not parsed into ast
for now.
If you need help, support, or have a question that is not a bug report or
feature request, please post it on Spectrum: https://spectrum.chat/mdx.
Questions asked here will be closed.
Hi,
Hi,
I got airbnb to work correctly on jsx files, but my project also contains mdx files.
I installed eslint-mdx and I can't figure it out how to make it work with airbnb plugin.
In eslintrc file, I added mdx lint to extends:
"extends": [
"airbnb",
"plugin:mdx/recommended"
],
When I run the eslint, I get jsx errors from MDX files, instead of MDX errors.
Are these two compatible? Is it possible to run them both?
// input
<Test>
<!-- it's a comment -->
</Test>
// fixed output
<Test>
{/* it's a comment */}
</Test>
Sentence Start <button>This is a <a>
Link</a>button
</button> Sentence
End here...
We need combine inline jsx
nodes.
Current implementation in eslint-plugin-mdx can actually be used for all remark related plugins.
Focus on markdown for now.
Maybe rename repository to eslint-remark
.
Hey,
first of all thanks for building this. I really appreciate the work you put into this project.
I'm running into a problem with linting MDX files alongside react and typescript. I have a working setup for all of the react parts, but whatever i try, i am not able to get .mdx linting to work.
The linter shows 'Parsing error: Unterminated regular expression literal.' on jsx in MDX files.
<div>Lorem</div>
-----------^----
I made a small test case here:
https://github.com/tizzle/mdx-lint-bug
Do you have any idea what could be going on and can point me towards a solution? That would be great.
Best
When we use the config @typescript-eslint/recommended-requiring-type-checking
from typescript-eslint we have to set parserOptions.project
.
It seems that eslint-mdx
overwrites the parserOptions.project
config because when we run eslint
we get this error:
Error: Error while loading rule '@typescript-eslint/no-misused-promises': You have used a rule which requires parserServices to be generated. You must therefore provide a value for the "parserOptions.project" property for @typescript-eslint/parser.
Hi, I want to use this plugin for linting my Docz documentation written in MDX, but the plugin seems unable to parse the YAML headers used for configuration.
Example:
---
name: FollowReveal
route: /follow-reveal
---
# FollowReveal
...
Error:
1:3 error Parsing error: Invalid left-hand side in prefix operation
> 1 | ---
| ^
2 | name: FollowReveal
3 | route: /follow-reveal
4 | ---
Judging by this part of the README I assume that eslint-plugin-mdx
should work with the @typescript-eslint/parser
.
I use the following versions of the libraries:
@typescript-eslint/parser
– 4.15.2.eslint
– 7.21.0.eslint-plugin-mdx
– 1.9.0.eslint-plugin-react
– 7.22.0. (Without this plugin I'm getting error Definition for rule 'react/jsx-no-undef' was not found
).With this config:
module.exports = {
parser: "@typescript-eslint/parser",
extends: ["plugin:react/recommended", "plugin:mdx/recommended"],
settings: {
react: {
version: "detect",
},
},
};
Then I run console command for one file:
yarn eslint 'path-to-file.mdx'
I'm getting this error in the CLI:
1:2 error Parsing error: Expression expected
But then I remove parser: "@typescript-eslint/parser",
from the config it works as expected.
Thanks for the amazing package @JounQin!
For v2 it looks like we'll need to change a few things with this package, it's currently silently failing when run in the next
branch of mdx-js/mdx. Will you have any time in the next month or so to ensure compatibility?
~/c/mdx next ⇡
❯ yarn lint
yarn run v1.17.3
$ eslint . --cache --ext js,jsx,md,mdx -f friendly
Oops! Something went wrong! :(
ESLint: 7.0.0
error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
~/c/mdx next 6s
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.