ESlint configuration on Meteor-React project

The following are simple instructions / recommendation on setting up ESlint rules for a Meteor/React project.

It is based on the recommendations of Meteor Guide with additional modifications that found out working for my cases.

The lint configuration is based on Airbnb lint configuration and React-plugin.

Install ESLint

You can install ESLint for your project by issuing the command:

1
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 @meteorjs/eslint-config-meteor

Configure ESLint

I prefer the usage of .eslintrc.json file in the root folder of my project, in order to create/override my own rules. So the basic contents of the file are:

.eslintrc.json

1
2
3
4
5
6
{
"extends": "@meteorjs/eslint-config-meteor",
"env": {
"meteor": true
}
}

It extends the rules/configuration installed by the npm packages, plus enables global variables recognition of Meteor environment.

Additional rules

You can override specific rules globally by modifying the .eslintrc.json file.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
"rules": {
"indent": [
"error",
4
],
"linebreak-style": [
"error",
"unix"
],
"quotes": [
"error",
"single"
],
"semi": [
"error",
"always"
]
}

The above example sets indentation to 4 spaces (not tabs), uses single quotes '' and requires a semicolon ; at the end of each javascript statement.

Check via command line

You can check your code via command line. It can help even better if you setup a script in your package.json file:

package.json

1
2
3
scipts: {
"lint": "node_modules/.bin/eslint . --ext .js,.jsx"
}

So now invoking the following command, will scan all your .js and .jsx files.

1
npm run lint .

Disabling rules

ESLint rules have specific names, and you can disable them on various levels… from files to specific lines. You can disable/enable them by adding special comments inside your code files.

Disabling ESLint for entire file

1
2
3
/* eslint-disable */

alert('foo');

Disabling ESLint for block of code

1
2
3
4
5
/* eslint-disable */

alert('foo');

/* eslint-enable */

Disabling Specific rules

1
2
3
4
5
6
/* eslint-disable no-alert, no-console */

alert('foo');
console.log('bar');

/* eslint-enable no-alert, no-console */

Disabling for specific lines

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
alert('foo'); // eslint-disable-line

// eslint-disable-next-line
alert('foo');

/* eslint-disable-next-line */
alert('foo');

alert('foo'); /* eslint-disable-line */

alert('foo'); // eslint-disable-line no-alert

// eslint-disable-next-line no-alert
alert('foo');

alert('foo'); /* eslint-disable-line no-alert */

/* eslint-disable-next-line no-alert */
alert('foo');

Find more information at: ESlint website

Editor plugins

You can also use plugins to help you directly when you are writing your code with editors.

My personal favorite is VSCode and the ESLint plugin.

Find more instructions for other popular editos in Meteor Guide.