Setting ESLint on Meteor for React Development

There have been countless debates among developers when to use Single or Double quotes, whether end each statement with semicolon, and what about the block styling? To avoid ego clashes, ESLint is a great tool to mediate the this trivial task.

So here is my attempt to document what I did to enable `ESLint` on a Meteor Development with React.

As recommended by Meteor we’re going to Airbnb ESLint Config, these are predefined rules from their style guide.

First we need to install the necessary packages for this to work:

meteor npm install --save-dev babel-eslint eslint-config-airbnb eslint-plugin-import eslint-plugin-meteor eslint-plugin-react eslint-plugin-jsx-a11y eslint-import-resolver-meteor eslint

I’m going to discuss what each package will do:

babel-eslint — this will be used as our parser.
eslint-config-airbnb – this package will mostly specify our styling guide.
eslint-plugin-import — which allows our ESLint to add plugins
eslint-plugin-meteor – The plugin that we’ll use for Meteor specific validations.
eslint-plugin-react — This plugin is required by AirBnb’s style guide.
eslint-plugin-jsx-a11y — This is also required by the AirBnb package, we won’t be touching this in this session.
eslint-import-resolver-meteor — for import specific rules.
eslint — last but not the list the package that will encapsulate all of the above.

Now you can setup your ESLint configuration inside your `package.json` file or use the separate `.eslintrc.json`. I like using the latter because it’s reusable and can be shared among other projects.

Here’s a minimal sample for your .eslintrc.json

Now let’s try creating a simple React component and test our ESLint config against.

Now in your terminal run the ESLint command:

./node_modules/.bin/eslint --quiet MyComponent.js

You should see an error like this:

  3:1  error  Component should be written as a pure function  react/prefer-stateless-function
  6:7  error  JSX not allowed in files with extension '.js'   react/jsx-filename-extension
✖ 2 problems (2 errors, 0 warnings)

Now if you are like me and doesn’t like to use .jsx extensions you can add this option in your ESLint config:

"rules": {
  "react/jsx-filename-extension": [1, { "extensions": [".js"] }]
}

Rerun the ESLint command again, now there should only be one error left and that is because our Component is stateless. We have an option to add state or use the Pure Function syntax, example:

Voila! We have successfully configured our ESLint for Meteor. As your app grows you will notice problems along the way and you might have to configure your linter further, so I’m going to add in here some of common cases that I usually encounter developing for Meteor with React.

{
    "env": {
        "browser": true,
        "es6": true
    },
    "parser": "babel-eslint",
    "extends": [
      "airbnb",
      "plugin:meteor/recommended"
    ],
    "parserOptions": {
        "allowImportExportEverywhere": true
    },
    "plugins": [
        "meteor"
    ],
    "settings": {
      "import/resolver": "meteor"
    },
    "rules": {
        "indent": [
            "error",
            2
        ],
        "quotes": [
            "error",
            "single",
            // To allow Template Literals inside Component props.
            // ex. <Component width={`50%`}/>
            //
            { "allowTemplateLiterals": true }
        ],
        "react/jsx-filename-extension": ["error", { "extensions": [".js"] }],
        // To allow absolute path imports in Meteor
        "import/no-absolute-path": [
          "off"
        ],
        // To resolve https://github.com/clayne11/eslint-import-resolver-meteor/issues/17
        "import/extensions": [
          "off",
          "never"
        ],
        // Work around until  https://github.com/benmosher/eslint-plugin-import/issues/479 is resolved
        "import/no-extraneous-dependencies": [
          "off"
        ],
        // To allow `_id` access when retrieving Mongo documents
        "no-underscore-dangle": [
          "off"
        ]
    }
}