othree / eslint-plugin-pep8-blank-lines

An ESLint blank line rule supports rule for different level. Inspired by PEP8.
https://www.npmjs.com/package/eslint-plugin-pep8-blank-lines
MIT License
2 stars 0 forks source link

Errors on valid code in jsx files #5

Closed deb0ch closed 5 years ago

deb0ch commented 5 years ago

Hi,

Firstly thank you very much for sharing this rule, I love this particular rule of pep8, it has made all of my projects since then so much more readable and your plugin is a great way to getting my team to adopt it in my project 😀

Though I cannot use it for now as it has buggy behavior on tsx files (Typescript file with jsx in it), see minimal reproduction example:

test.tsx:


import React from 'react';

const App: React.FC = () => (
  <div>
    <p>
      Yolo
    </p>
  </div>
);

export default App;

Output:

/Users/deb0ch/src/test.tsx
   6:8  error  Expected max two blank lines here  pep8-blank-lines/pep8-blank-lines
  10:3  error  Expected max two blank lines here  pep8-blank-lines/pep8-blank-lines

I don't think that it is coming from the Typescript as all my other non-jsx files get linted properly, so I suspect that it is entirely related to jsx syntax. The bug doesn't happen anymore if I remove the <div> or <p> pairs, only when at least two sets of tags are nested.

I started looking into the code, but never worked with an eslint plugin so I don't really know where to look for now, plus I have many other aspects of the project to manage, draining all my time.

If you had any pointers of where to look for what it would be awesome ! 😺

othree commented 5 years ago

What is your eslint parser. I use babel-eslint and don't see this error.

deb0ch commented 5 years ago

.eslintrc.json:

{
  "env": {
    "browser": true,
    "es6": true
  },
  "extends": ["airbnb"],
  "globals": {
    "Atomics": "readonly",
    "SharedArrayBuffer": "readonly"
  },
  "parser": "babel-eslint",
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 2018,
    "sourceType": "module"
  },
  "plugins": ["react", "pep8-blank-lines"],
  "rules": {
    "pep8-blank-lines/pep8-blank-lines": 2,
    "react/jsx-filename-extension": [1, { "extensions": [".js", ".tsx", ".ts", ".jsx"] }]
  },
  "settings": {
    "import/resolver": {
      "node": {
        "extensions": [".js", ".jsx", ".ts", ".tsx"]
      }
    }
  }
}

Is that enough information ? Don't hesitate if you need more

deb0ch commented 5 years ago

I would like to investigate this on my free time, do you have any clues or pointers you can give me to get me started ? 😺

deb0ch commented 5 years ago

Actually - awesome.

I just tried this morning to make a minimal repro out of a freshly created yarn create react-app --typescript and it just worked. Then I noticed the recent release and after updating it just worked in my project as well.

Thanks for your reactivity and everything !

Cheers 💯