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:

  1. npm install --save-dev babel
  2. npm install --save-dev babel-core
  3. npm install --save-dev babel-loader
  4. npm install --save-dev babel-preset-es2015
  5. npm install --save-dev babel-eslint //OPTIONAL
  6. npm install --save-dev eslint
  7. npm install --save-dev eslint-loader
  8. npm install --save-dev eslint-plugin-react
  9. 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.

  1. const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
  2.  
  3. #Under module.exports add
  4. plugins: [
  5.     	new webpack.NoEmitOnErrorsPlugin(),
  6.     	new UglifyJsPlugin(),
  7.     	new webpack.optimize.AggressiveMergingPlugin()
  8. ],
  9. module: {
  10.     	loaders: [
  11. 			{
  12. 				enforce: "pre",
  13. 				test: /\.jsx?$/,
  14. 				exclude: /(node_modules|thirdparty)/,
  15. 				loader: "eslint-loader",
  16. 			},
  17. 			{
  18. 				test: /\.jsx?$/,
  19. 				exclude: /(node_modules)/,
  20. 				loader: "babel-loader",
  21. 				query: {
  22. 					presets: ["es2015","react"],
  23. 				}
  24. 			},
  25.     	]
  26. }
  27.  
  28.  

.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.

  1. {
  2.     "parser": "babel-eslint",
  3.     "env": {
  4.         "browser": true,
  5.         "mocha": true,
  6.         "es6": true
  7.     },
  8.     "globals": {
  9.         "require": true
  10.     },
  11.     "plugins": [
  12.         "react"
  13.     ],
  14.     "rules": {
  15.         "new-cap": 0, //disabled 
  16.         "strict": 0, //disabled 
  17.         "semi": [2, "always"], //semi-colon required
  18.         "no-underscore-dangle": 0, //no underscores before and after off
  19.         "no-use-before-define": 1, //Make sure you define then use
  20.         "eol-last": 0, //File doesn't need a newline at end
  21. 	"no-trailing-spaces": [2, { skipBlankLines: true }],
  22.         "no-unused-vars": [1, {"vars": "all", "args": "none"}],
  23.         "quotes": [
  24.             2,
  25.             "double"
  26.         ],
  27.         "jsx-quotes": [2, "prefer-double"], //Must use double quotes
  28.         "react/jsx-boolean-value": 1, //warning when no value is set for boolean
  29.         "react/jsx-no-undef": 2, //error: undeclared variables
  30.         "react/jsx-uses-react": 1, //Warn: Prevent incorrectly unused
  31.         "react/jsx-uses-vars": 1, //Warn: Prevent unused variables
  32.         "react/no-did-mount-set-state": 0, //Off: Prevent setState in componentDidMount
  33.         "react/no-did-update-set-state": 0, //Off: Prevent setState in componentDidUpdate
  34.         "react/no-multi-comp": 1, //Warn: Prevent only one component per file
  35.         "react/no-unknown-property": 1, //Warn: Prevent unknown DOM
  36.         "react/react-in-jsx-scope": 1, //Warn: Prevent missing React
  37.         "react/self-closing-comp": 1 //Warn: Prevent extra closing tags
  38.     }
  39. }

.eslintignore

Use this file to ignore any files or folders.

  1. app/folder/**

.babelrc

This is the config file for babel.

  1. {
  2.  "presets": [ "es2015" ]
  3. }

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

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