ezhlobo/eslint-plugin-react-pug

Add supporting of pugjs with react

.builder/ $ npm install

.builder/ $ npm start

eslint-plugin-react-pug's Issues

Add URLs to documentation for each rule

https://github.com/jfmengels/eslint-rule-documentation/blob/master/contributing.md

Variables used in `if else` condition are not marked as used

In the following snippet b variable is marked as unused.

const {a, b} = variables()

pug`
  if a
	p Hello

  else if b
	p Bye
`

Prohibit/Require commas in attributes

We should either require or prohibit commas. No need to use both approaches

Handle prop types definitions

I'm starting the development of integration with prop-types in react. Here I'm going to provide updates about the progress.

Idea

When we find pug template in the code we will look up to find out where it's located. For now we are interested in functions and classes.

function Component(props) {
  return pug`= props.name`
}

const Component = props => pug`= props.name`

class Component extends React.Component {
  render() {
    return pug`= props.name`
  }
}

We will check out propTypes definitions for those functions and classes and match them with what we use inside them.

Progress

Working branch: prop-types

Items in the checklists will be updated through the time.

• Functions
  • Grab first-level prop-types definitions
  • Find out first-level props used inside functions
  • Find out first-level props used inside pug
  • Report, when there are definitions for unused props
    • Write comprehensive testing to make sure that we returned all used prop
    • Make it work when we use props in pug templates
  • Report, when there are used props without definition
  • Grab nested prop-types definitions
  • Find out all props used inside functions
• Anonymous Functions assigned to variable
  • Grab prop-types definitions
  • Find out all props used inside functions
  • Report, when there are used props without definition
  • Report, when there are definitions for unused props
• Classes
  • Grab prop-types definitions
  • Find out all props used inside functions
  • Report, when there are used props without definition
  • Report, when there are definitions for unused props

Wrong position of error on single line templates

possible to show no-undef ?

Not really sure if this is possible or if this is the right module, but it would be super helpful if eslint could show undefined variables used in the pug template.

v0.0.5: Cannot find module './lib/rules/uses-react'

Hi @ezhlobo,

Thanks for the response on my template literals issue. I updated to 0.0.5 and trying to lint a file with nested literals, but I got this error:

✖ jsLinter found some errors. Please fix them and try committing again.

Cannot find module './lib/rules/uses-react'
Error: Cannot find module './lib/rules/uses-react'
    at Function.Module._resolveFilename (module.js:438:15)
    at Function.Module._load (module.js:386:25)
    at Module.require (module.js:466:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/home/deploy/projects/node_modules/eslint-plugin-react-pug/index.js:8:17)
    at Module._compile (module.js:541:32)
    at Object.Module._extensions..js (module.js:550:10)
    at Module.load (module.js:456:32)
    at tryModuleLoad (module.js:415:12)
    at Function.Module._load (module.js:407:3)

Listing the contents of eslint-plugin-react-pug/lib shows it's empty.

Support tabs for indentation

Now babel-plugin-transform-react-pug supports tabs in indentation. But it looks like this linter does not.

pugjs/babel-plugin-transform-react-pug#36

Prohibit empty lines for indents

We can improve "empty-lines" rule.

Bad:

div

  div

Good:

div
  div

Lint JavaScript inside pug template

Since pug works within template literals, it's impossible for eslint to achieve JavaScript code used inside.

For the first version I'm going to apply basic set of "stylistic" rules to the code. In the future we might consider using the same config as the other codebase.

Possible API

Will keep it in mind when build the first implementation with own set of rules, probably this will come to in order to allow project-specific settings.

{
  rules: {
    'react-pug/js-rules': ['error', {
      // this is what can be moved directly to eslint config
      'object-curly-spacing': ['error', 'always'],
    }],
  },
}

Below are cases from the real projects

The idea is to combine a good amount of use cases in order to cover them with initial implementation.

• if this.pageNo()>1
  //-------------^^^-

• - const test = {test:true }
  //-------------^^---^^---^^-

• Cell(value=getValueFor(item,test))
  //-------------------------^^-----

• Cell(
    style={
      color:'red',
      textAlign: 'right'
    }
  )

• Button(onClick=()=>test( ))
  //--------------^^^^---^^^-

• Cell The value is #{getValueFor(item,test)}
  //----------------------------------^^-----

Moving to pug-lint

I'm considering to use pug-lint under the hood. It can give us following advantages:

• Add/improve rules right for all pug projects
• Keep this project smaller like a bridge between javascript and pug

Some concerns:

• Will require several ASTs for one check
• pug-lint is not maintained actively

Not detect string interpolation - babel-plugin-transform-react-pug

*string interpolation
Error : react-pug/no-broken-template
Code that got error: https://paste.ofcode.org/8SRSabwhEnQBwYeTNdEXDG
Transpilier use: https://github.com/pugjs/babel-plugin-transform-react-pug
Code that cause error:
div(className=${portfolioSection.projects > 0 ? '.mb-4' : ''})

I'm not using propTypes i don't want liniting for props

'title' is missing in props validation react-pug/prop-types
'items' is missing in props validation react-pug/prop-types

i'm getting error in this file collectionpreview jsx

const CollectionPreview = ({ title, items }) => (
  <div className="collection-preview">
    <h1 className="title">{title.toUpperCase()}</h1>
    <div className="preview">
      {items
        .filter((item, idx) => idx < 4)
        .map(({ id, ...OtherItemProps }) => (
          <CollectionItem key={id} {...OtherItemProps} />
        ))}
    </div>
  </div>

in shop component jsx

class ShopPage extends React.Component {
  state = {
    collections: SHOP_DATA
  };
  render() {
    const { collections } = this.state;
    return (
      <div className="shop-page">
        {collections.map(({ id, ...CollectionProps }) => (
          <CollectionPreview key={id} {...CollectionProps} />
        ))}
      </div>
    );
  }
}

Increase react-pug/empty-lines

Add an option to increase the children line

Fails to compile with [email protected]

Throws compiling error: utils.getReturnPropertyAndNode is not a function occurred while linting

getReturnPropertyAndNode was removed from eslint-plugin-react/lib/util/Components.js in v7.25
Forcing [email protected] fixes this.

It requires double quotes in code

Make sure that closing braces are on the same column as tag

Bad:

  div(
    attribute
)

Good:

  div(
    attribute
  )

Avoid interpolation when it's possible to output with `=`

Basically:

div= variable

Instead of:

div #{variable}

It requires to have empty lines between siblings

I got the next messages on the following code (below the first button and above the second one):

Button(href="#" color="dark" size="sm") Sign In
|  
Button(href="#" color="primary" size="sm") Join now

error  Need empty line for more than two siblings  react-pug/empty-lines
error  Need empty line for more than two siblings  react-pug/empty-lines

Turn on all rules under 'recommended' flag, not 'all'

It's a common practice over all plugins. Not sure why did I miss that in the beginning.

Need to turn recommended settings via plugin:react-pug/recommended.

Requires double-quotes in code within attributes

Lint that the ending ` is on the right column

Good:

function Component() {
  return pug`
    span Text
  `
}

Bad:

function Component() {
  return pug`
    span Text
`
}

Manage Indentation

It will be great to check the indentation inside template

It does not handle the power of template literals

const WillBeSidebar = () => pug`span SIDEBAR`

const Component = () => pug`
  Header(aside=${pug`WillBeSidebar`})
`

It works perfectly in browser but this plugin breaks eslint

Does not parse code in attributes

import { routes } from '~/Router'

pug`
  BrowserRouter: Component(to=Object.keys(routes)[0]) Text
`

Returns:

'routes' is defined but never used. (no-unused-vars)

Does not support object spread operator

export const Field = props => pug`
  Item(...props)
`

It returns this:

'props' is defined but never used. (no-unused-vars)

An in-range update of babel7 is breaking the build 🚨

Version 7.0.1 of the babel7 packages was just published.

Branch	Build failing 🚨
Monorepo release group	babel7
Current Version	7.0.0
Type	dependency

This version is covered by your current version range and after updating it in your project the build failed.

This monorepo update includes releases of one or more dependencies which all belong to the babel7 group definition.

babel7 is a direct dependency of this project, and it is very likely causing it to break. If other packages depend on yours, this update is probably also breaking those in turn.

Status Details

• ❌ ci/circleci: Your tests failed on CircleCI (Details).

---

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

---

Your Greenkeeper Bot 🌴

Get prop reference in anonymous functions

This is an POC about how we can get real parameter for both anonymous and named functions.

const isParameter = variable => variable.defs.some(def => def.type === 'Parameter')
const propsRefDeclarationIndex = declaredVariables.findIndex(isParameter)

const propsRefDeclaration = declaredVariables[propsRefDeclarationIndex]

push(propsRefDeclaration.name)
goThroughReferences(context, propsRefDeclaration.references, push)

Need to apply a fix.

Destructuring of nested object doesn't work properly

PortfolioOverview(...props.values)
//- doesn't work

PortfolioOverview(...props)
//- works

Stops eslint if pug template is not valid

It stops working when we define variable within template

For example this code will break eslint:

pug`
  - const test = 'test'
`

The error message is not useful, but stacktrace reveals that babel doesn't like it and doesn't want to parse:

Unexpected token (1:1)
SyntaxError: Unexpected token (1:1)
  at Parser.raise (~/node_modules/@babel/parser/lib/index.js:4028:15)
  at Parser.unexpected (~/node_modules/@babel/parser/lib/index.js:5343:16)
  at Parser.parseExprAtom (~/node_modules/@babel/parser/lib/index.js:6432:20)
  at Parser.parseExprSubscripts (~/node_modules/@babel/parser/lib/index.js:6019:21)
  at Parser.parseMaybeUnary (~/node_modules/@babel/parser/lib/index.js:5998:21)
  at Parser.parseExprOps (~/node_modules/@babel/parser/lib/index.js:5907:21)
  at Parser.parseMaybeConditional (~/node_modules/@babel/parser/lib/index.js:5879:21)
  at Parser.parseMaybeAssign (~/node_modules/@babel/parser/lib/index.js:5826:21)
  at Parser.parseParenAndDistinguishExpression (~/node_modules/@babel/parser/lib/index.js:6588:28)
  at Parser.parseExprAtom (~/node_modules/@babel/parser/lib/index.js:6388:21)

Don't use code for literals

Sometimes I see that people use this way to render strings:

div= 'Hello World'

It will be great to have a rule that forces people to use Pug syntax instead:

div Hello World

Manage empty lines

There are some patterns which we can ask to follow:

• Empty line in the beginning

  // Bad
  pug`div`
  
  // Good
  pug`
    div`

• Empty line in the end

  // Bad
  pug`div`
  
  // Good
  pug`div
  `

• No more than 1 empty line

  // Bad
  pug`
    div
  
  
    div
  `

• Add empty line when we go out from nesting

  // Bad
  pug`
    div
      div
    div
  `
  
  // Good
  pug`
    div
      div
  
    div
  `

• Add empty line in case we write more than two siblings

  // Bad
  pug`
    div
    div
    div
  `
  
  // Good
  pug`
    div
    div
  `
  
  pug`
    div
  
    div
  
    div
  `

Wrong requirement for indentation when only attributes on multi lines

Check amount of spaces

We need to control amount of spaces when we start code, loops, attributes, use js.

eslint error no-undef for looping variable

Original issue can be found here.

Prohibit code interpolation

Everything should be handled by pug, so we can avoid using interpolation in template. This is the most misused feature.

Using of state and props should be handled by eslint-plugin-react

Now we have to turn off all validations for used fields in state and props. Need to fix that.

repost : pug is undefined no-undef (already tried existing issues related to this)

Sorry that I had to post an issue which has already been posted several times here.I have seen the other issues related to this, and i tried almost all the solutions provided to those issues. This is what I have done so far :

1. Created a new react app using "create-react-app"

2. eject the app using "npm run eject"

3. install https://github.com/pugjs/babel-plugin-transform-react-pug. Added a .babelrc file in root director and added the following to .babelrc file :

{
    "plugins": [
      "transform-react-pug",
      "transform-react-jsx"
    ]
}

4. installed https://github.com/ezhlobo/eslint-plugin-react-pug from the github documentation and created a .eslintrc file and added the following to the .eslintrc file

{
    "plugins": [
        "react-pug"
    ],
    "extends": [
        "plugin:react-pug/all"
    ],
    "globals": {
        "pug": "readonly"

    }
}

5. In App.js I added the following simple pug code

import React from 'react';
class App extends React.Component {
  render() {
    return pug`
      div
        h1 My Component
        p This is my component using pug.
    `;
  }
}
export default App;

6. After that I've uninstalled the node-modules and re-installed it. And then run npm-start. But no matter what I am getting "pug is undefined no-undef" error message in the compiler.

What went wrong here ?

It is not compatible with react/no-unused-prop-types

When I use props in my template it is not determined by as used.

Indentation does not work for attributes

When we use multiline attributes this plugin does not check indentation correctly

Check that we have one space between attributes

Bad

div(attr   after)

Good

div(attr after)

no-unused-var with function variable

This plugin is an answer to our prayers!

Having one issue with calling functions declared outside of the template returning the no-unused-var error.
For instance, the following stateless component:

`
export default function SampleFile(){
const scopeFunction= link => e => {
e.preventDefault();
window.location.href = link;
};

return pugbutton( onClick='scopeFunction('/')' ) | Scope Function;
}
Returns:
2:9 error 'scopeFunction' is assigned a value but never used no-unused-vars
`