search

mdx-js / eslint-mdx

ESLint Parser/Plugin for MDX
https://npmjs.org/eslint-plugin-mdx
MIT License
267 stars 32 forks source link

`mdx/no-unescaped-entities` usage issue #217

Closed JounQin closed 4 years ago

JounQin commented 4 years ago 
// 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 &rarr;
</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 &rarr;
</a>
</div>
JounQin commented 4 years ago

Because there is no empty line in AST, so after combined into single jsx node, the jsx code actually used by ESLint parser is like following:

<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 &rarr;
</a></div>

What makes the ESLint AST different with the actual code.

cc @wooorm

wooorm commented 4 years ago

Yeah, MDX@1 doesn’t like blank lines. That’s the issue, right?. This is something MDX@2 will do very differently, and I believe much better, though?

JounQin commented 4 years ago

I found a way to skip using node.value instead.

https://github.com/mdx-js/eslint-mdx/pull/218/files#diff-d1b4b2537d369552aca7acbfd12a8d70R29