More strict ESLint for better code quality

I set up ESLint for react and node.js development at arkulpa. This config improved our code style quality and reduced simple stupid errors. First there was some work to update the existing code but now we really enjoy the output. It is my first post on Medium and I hope it is helpful for your ESLint setup.

Installing Lint for node js.

npm install --save-dev eslint

I use node.js with

--harmony

The ESLint rules explained. → http://eslint.org/docs/rules/

the config in yml style

#.eslintrc for node.js
env:
  node: true
  es6: true

rules:
  # Possible Errors
  # http://eslint.org/docs/rules/#possible-errors
  comma-dangle: [2, only-multiline]
  no-control-regex: 2
  no-debugger: 2
  no-dupe-args: 2
  no-dupe-keys: 2
  no-duplicate-case: 2
  no-empty-character-class: 2
  no-ex-assign: 2
  no-extra-boolean-cast: 2
  no-extra-parens: [2, functions]
  no-extra-semi: 2
  no-func-assign: 2
  no-invalid-regexp: 2
  no-irregular-whitespace: 2
  no-obj-calls: 2
  no-proto: 2
  no-template-curly-in-string: 2
  no-unexpected-multiline: 2
  no-unreachable: 2
  no-unsafe-negation: 2
  use-isnan: 2
  valid-typeof: 2
  no-fallthrough: 2
  no-global-assign: 2
  no-multi-spaces: 2
  no-octal: 2
  no-redeclare: 2
  no-self-assign: 2
  no-unused-labels: 2
  strict: [2, global]
  no-delete-var: 2
  no-undef: 2
  no-unused-vars: [2, {args: none}]
  no-mixed-requires: 2
  no-new-require: 2
  no-path-concat: 2
  no-restricted-modules: [2, sys, _linklist]

  # Stylistic Issues
  # http://eslint.org/docs/rules/#stylistic-issues
  brace-style: [2, 1tbs, {allowSingleLine: true}]
  comma-spacing: 2
  eol-last: 2
  func-call-spacing: 2
  indent: [2, 4, {SwitchCase: 1, MemberExpression: 1}]
  key-spacing: [2, {mode: minimum}]
  keyword-spacing: 2
  linebreak-style: [2, unix]
  max-len: [1, 120, 2]
  new-parens: 2
  no-mixed-spaces-and-tabs: 2
  no-multiple-empty-lines: [2, {max: 2}]
  no-trailing-spaces: 2
  quotes: [2, single, avoid-escape]
  semi: 2
  space-before-blocks: [2, always]
  space-before-function-paren: [2, never]
  space-in-parens: [2, never]
  space-infix-ops: 2
  space-unary-ops: 2

  # ECMAScript 6
  # http://eslint.org/docs/rules/#ecmascript-6
  arrow-parens: [2, always]
  arrow-spacing: [2, {before: true, after: true}]
  constructor-super: 2
  no-class-assign: 2
  no-confusing-arrow: 2
  no-const-assign: 2
  no-dupe-class-members: 2
  no-new-symbol: 2
  no-this-before-super: 2
  prefer-const: 2
  rest-spread-spacing: 2
  template-curly-spacing: 2


# Global scoped method and vars
globals:
  COUNTER_HTTP_CLIENT_REQUEST: false
  COUNTER_HTTP_CLIENT_RESPONSE: false
  COUNTER_HTTP_SERVER_REQUEST: false
  COUNTER_HTTP_SERVER_RESPONSE: false
  COUNTER_NET_SERVER_CONNECTION: false
  COUNTER_NET_SERVER_CONNECTION_CLOSE: false
  DTRACE_HTTP_CLIENT_REQUEST: false
  DTRACE_HTTP_CLIENT_RESPONSE: false
  DTRACE_HTTP_SERVER_REQUEST: false
  DTRACE_HTTP_SERVER_RESPONSE: false
  DTRACE_NET_SERVER_CONNECTION: false
  DTRACE_NET_STREAM_END: false
  LTTNG_HTTP_CLIENT_REQUEST: false
  LTTNG_HTTP_CLIENT_RESPONSE: false
  LTTNG_HTTP_SERVER_REQUEST: false
  LTTNG_HTTP_SERVER_RESPONSE: false
  LTTNG_NET_SERVER_CONNECTION: false
  LTTNG_NET_STREAM_END: false

For react + babel and webpack

there are more steps to do

Install ESLint, react and the Babel plugin

npm install --save-dev eslint
npm install --save-dev eslint-plugin-react
npm install --save-dev babel-eslint

the config in JSON style:

The ESLint rules explained. → http://eslint.org/docs/rules/

{
  "parser": "babel-eslint",
  "plugins": [
    "react",
    "babel"
  ],
  "ecmaFeatures": {
    "jsx": true,
    "arrowFunctions": true,
    "modules": true,
    "class": true
  },
  "env": {
    "browser": true,
    "amd": true,
    "es6": true,
    "node": true
  },
  "rules": {
    "comma-dangle": 1,
    "no-undef": 1,
    "strict": 2,
    "no-extra-semi": 1,
    "no-underscore-dangle": 0,
    "no-console": 1,
    "no-unused-vars": 1,
    "no-unreachable": 1,
    "no-alert": 0,
    "react/jsx-uses-react": 1,
    "brace-style": [2, 1tbs, {allowSingleLine: true}],
    "comma-spacing": 2,
    "eol-last": 2,
    "indent": [2, 4, { "SwitchCase": 1 }],
    "key-spacing": [2, {mode: minimum}],
    "linebreak-style": [2, unix],
    "max-len": [1, 120, 2],
    "new-parens": 2,
    "no-mixed-spaces-and-tabs": 2,
    "no-multiple-empty-lines": [2, {max: 2}],
    "no-trailing-spaces": 2,
    "quotes": [2, single, avoid-escape],
    "semi": 2,
    "space-before-blocks": [2, always],
    "space-before-function-paren": [2, never],
    "space-in-parens": [2, never],
    "space-infix-ops": 2,
    "space-unary-ops": 2
  }
}

Setup Webpack to lint your JS code

npm --save-dev install eslint-loader

And in your Webpack config you have to add this

preLoaders: [
    {
        test: /\.(js|jsx)$/,
        include: srcPath,
        loader: 'eslint-loader',
        query: {
            presets: ['es2015']
        }
    }
],