ESLint React Fixes

Some React snags you might hit after installing with create-react-app I’ll help ch’ya out real quick. I’m assuming or hoping you are using.

We can solve a lot of problems by installing Babel ESLint, but don’t add this is .eslintrc just yet! We’ll go over that: yarn add -D babel-eslint. ESLint Does not support Spread. A quick reminder, spread looks like this: const a = [...data, b c]; and according to the Git Issues here you can see it’s not supported thus giving us an error.

Solution One (Not Recommended)

First, the long un-fun way.

yarn add -D babel-plugin-transform-object-rest-spread \ babel-eslint @babel/preset-react @babel/preset-env

Babel ESLint is crucial as it utilizes settings therein to adjust ESLint. So after you add the above packages you must append or adjust your .babelrc file with the following:

{
  presets: [ react, env ],
  plugins: [ transform-object-rest-spread ]
}

Lastly, you need to ensure your .eslintrc has the experimental set to true (we are opting-in), like this. In your .eslintrc file (or .eslintrc.js, etc):

parserOptions: {
  sourceType: module,
  ecmaFeatures: {
    jsx: true,
    experimentalObjectRestSpread: true,
  },
// ...

Solution Two (Recommended)

This is by far much easier, simply change the ecmaVersionin your .eslintrc file to 2018. It should resolve that and potentially a few other linting problems. It looks like this:

parserOptions: {
  ecmaVersion: 2018,
  // ...

Add-ons are not needed for the second fix, score! You can also remove the experimental from .eslintrc— if you added it above.

ESLint Class Functions as Properties

If you attempt to do the following you may find an ESLint snaggletooth:

class Article extends React.Component {
  onSubmit = (evt) = {

   }
}

You’ll get a red line on the first occurrance of a method = assignment. To work around this you can do the following:

yarn add -D babel-eslint

Then edit .eslintrc and change the parser:

  parser: babel-eslint,
  parserOptions: {
  // ...

Fixing “this” inside of Classes

First, add our proposal babel script as well as his other sidekicks:

yarn add -D @babel/plugin-proposal-class-properties \
  @babel/preset-react @babel/preset-env

And add this to .babelrc (Create it if you need):

{ presets: [ [ @babel/preset-env, { modules: commonjs, targets: { node: current } }, ], @babel/preset-react,],plugins: [ [ @babel/plugin-proposal-class-properties, { loose: true } ] ]};

ESLint Binding This, Optional! We never want to use: .bind(this) because it will cause unnecessary re-rendering. We should also get plenty of ESLint errors in React 16.x and above versions.Indeed, one method is to use a library such as class-autobind which beats binding manually. However, we will have to duplicate code this within every constructor of a component, eg:

class Article extends React.Component {
  constructor(props) {
    super(props);
    autobind(this);
  }// ...

If you aren’t fully aware, the arrow function automatically uses: this from the parent class no matter how many levels deep you dig. This is not like jQuery where we alias: this as self per nested function. So you should use arrow methods like so:

class Article extends React.Component {
  didComponentMount = () = { } render = () = {
    return(div /)
    }
  }

Double-Edged Sword?

We can get this to work perfectly fine with: .eslint when we use espree as the parser. However, this stops babel-eslint from fixing one of our issues and we now lose what set above (See Heading: ESLint Class Functions as Properties ). We can be free to not use this, but we can no longer use the class assignments with: method = () = {}.

The tradeoff is interesting, we’ll save a bit of code by using the ladder — you may find it strange to not use this at all inside a class! To be this free, do the following:

yarn add -D @babel/plugin-proposal-class-properties \
  @babel/preset-react @babel/preset-env

Your .babelrc will be the same as above. And below, here is the main portion of .eslintrc to include (I am using .eslintrc.js, but close enough)

module.exports = {
  parser: espree,
  parserOptions: {
    ecmaVersion: 2018,
    sourceType: module,
    ecmaFeatures: { jsx: true },
  }, extends: [ airbnb, ],
  plugins: [ import, jsx-a11y, react, ],
  rules: { arrow-body-style: [
    2, as-needed,
    { requireReturnForObjectLiteral: true, },
    ],
  },
} // Hopefully I counted those closing symbols in here :)

Now you should be able to be: this free and not define it in your Components.

Closing

If I come to figure out how I can get the syntax to be both: this-free while using arrow method assignments — I’ll update this article.

If you know, please drop it like it’s hot!Lastly, sorry if I made any errors in the snippets or typo’s, I go through writing fairly fast. Any corrections are appreciated.

Thanks, Jesse JREAM / CodeZeus