React, Babel + Eslint Configuration

(Last Updated On: )

If you want to configure your npm package to have JavaScript static code analysis then you will need to configure some form of js linter. For the purposes of this demo I will use eslint.

Before We Begin:

Packages:

Package Installations:

npm install --save-dev babel
npm install --save-dev babel-core
npm install --save-dev babel-loader
npm install --save-dev babel-preset-es2015
npm install --save-dev babel-eslint //OPTIONAL
npm install --save-dev eslint
npm install --save-dev eslint-loader
npm install --save-dev eslint-plugin-react
npm install --save-dev uglifyjs-webpack-plugin

Webpack.config.js:

Webpack 3 Plugins

Add “NoEmitOnErrorsPlugin” to ensure that emitting doesn’t occur if errors are encountered.

Add “UglifyJsPlugin” to minimize your js

Add “AggressiveMergingPlugin” to get more aggressive chunk merging.

Don’t forget the loaders for babel and eslint.

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

#Under module.exports add
plugins: [
    	new webpack.NoEmitOnErrorsPlugin(),
    	new UglifyJsPlugin(),
    	new webpack.optimize.AggressiveMergingPlugin()
],
module: {
    	loaders: [
			{
				enforce: "pre",
				test: /\.jsx?$/,
				exclude: /(node_modules|thirdparty)/,
				loader: "eslint-loader",
			},
			{
				test: /\.jsx?$/,
				exclude: /(node_modules)/,
				loader: "babel-loader",
				query: {
					presets: ["es2015","react"],
				}
			},
    	]
}

.eslintrc

You can set anything in your .eslintrc file. Here are just some that I use. All the rules starting with “react” are from “eslint-plugin-react” package.

{
    "parser": "babel-eslint",
    "env": {
        "browser": true,
        "mocha": true,
        "es6": true
    },
    "globals": {
        "require": true
    },
    "plugins": [
        "react"
    ],
    "rules": {
        "new-cap": 0, //disabled 
        "strict": 0, //disabled 
        "semi": [2, "always"], //semi-colon required
        "no-underscore-dangle": 0, //no underscores before and after off
        "no-use-before-define": 1, //Make sure you define then use
        "eol-last": 0, //File doesn't need a newline at end
	"no-trailing-spaces": [2, { skipBlankLines: true }],
        "no-unused-vars": [1, {"vars": "all", "args": "none"}],
        "quotes": [
            2,
            "double"
        ],
        "jsx-quotes": [2, "prefer-double"], //Must use double quotes
        "react/jsx-boolean-value": 1, //warning when no value is set for boolean
        "react/jsx-no-undef": 2, //error: undeclared variables
        "react/jsx-uses-react": 1, //Warn: Prevent incorrectly unused
        "react/jsx-uses-vars": 1, //Warn: Prevent unused variables
        "react/no-did-mount-set-state": 0, //Off: Prevent setState in componentDidMount
        "react/no-did-update-set-state": 0, //Off: Prevent setState in componentDidUpdate
        "react/no-multi-comp": 1, //Warn: Prevent only one component per file
        "react/no-unknown-property": 1, //Warn: Prevent unknown DOM
        "react/react-in-jsx-scope": 1, //Warn: Prevent missing React
        "react/self-closing-comp": 1 //Warn: Prevent extra closing tags
    }
}

.eslintignore

Use this file to ignore any files or folders.

app/folder/**

.babelrc

This is the config file for babel.

{
 "presets": [ "es2015" ]
}

Package.json

If you want to run eslint from npm then you have to modify your package.json with the following line. –ext is what extension you want to test against.

If you want a third party to run reports on your eslint then add to the end “-f checkstyle > eslint.xml

"scripts": {
    "eslint": "eslint app --ext .jsx --ext .js"
}