My ESLint Setup

I am using yarn as my package manager.

I have a personal preference to use standard as my code style.

yarn add -D eslint prettier babel-eslint eslint-plugin-prettier eslint-plugin-node eslint-config-standard eslint-plugin-standard eslint-plugin-promise eslint-plugin-import eslint-config-prettier

Here is my .eslintrc

{
  "parser": "babel-eslint",
  "env": {
    "node": true
  },
  "rules": {
    "strict": 0,
    "semi": [2, "never"],
    "quotes": ["error", "single"],
    "comma-dangle": ["error", "never"],
    "no-unused-vars": "error",
    "no-var": "error",
    "space-before-function-paren": 0,
    "prettier/prettier": "error"
  },
  "extends": [
    "eslint:recommended",
    "plugin:node/recommended",
    "standard",
    "plugin:prettier/recommended"
  ],
  "settings": {
    "node": {
      "version": "detect"
    }
  }
}

Here is the same file modified for react.

{
  "parser": "babel-eslint",
  "env": {
    "browser": true,
    "es6": true
  },
  "rules": {
    "strict": 0,
    "semi": [2, "never"],
    "quotes": ["error", "single"],
    "comma-dangle": ["error", "never"],
    "no-unused-vars": "error",
    "no-var": "error",
    "space-before-function-paren": 0,
    "prettier/prettier": "error"
  },
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "standard",
    "plugin:prettier/recommended"
  ],
  "settings": {
    "react": {
      "version": "detect"
    }
  }
}

Additionally here is my .prettierrc

{
  "endOfLine": "lf",
  "semi": false,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "none",
  "quoteProps": "consistent",
  "bracketSpacing": true,
  "jsxBracketSameLine": false
}

If you are using vscode then add these to your settings.json Accessible by CMD/CTRL + SHIFT + P - Preferences: Open Settings (JSON)

"eslint.validate": [
  "javascript"
]

You can further add "javascriptreact" for frontend usage.