How to get ESLint to work React + Babel in Sublime Text 3 editor?

Question

I am using ReactJS and Babel.

Here is what I have in my .eslintrc.json:

{
"parser":"babel-eslint",
"env": {
    "browser": true,
    "commonjs": true,
    "es6": true,
    "node": true
},
"extends": "eslint:recommended",
"parserOptions": {
    "ecmaFeatures": {
        "experimentalObjectRestSpread": true,
        "jsx": true
    },
    "sourceType": "module"
},
"plugins": [
    "react"
],
"rules": {

    "indent": [
        "error",
        "tab"
    ],
    "linebreak-style": [
        "error",
        "unix"
    ],
    "quotes": [
        "error",
        "double"
    ],
    "semi": [
        "error",
        "always"
    ]
}

}

and in my package.json

{
  "name": "testing-site",
  "version": "1.0.0",
  "description": "to test",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
"type": "git",
"url": "git+https://github.com/test/testing-site.git"
  },
  "author": "Joe Shmo",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/test/testing-site/issues"
  },
  "homepage": "https://github.com/test/testing-site#readme",
  "dependencies": {
    "express": "^4.13.4",
    "react": "^15.1.0",
    "react-dom": "^15.1.0",
    "react-redux": "^4.4.5",
    "redux": "^3.5.2"
  },
  "devDependencies": {
"babel-core": "^6.9.0",
"babel-eslint": "^6.0.4",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.9.0",
"babel-preset-react": "^6.5.0",
"babel-preset-react-hmre": "^1.1.1",
"eslint": "^2.11.0",
"eslint-plugin-react": "^5.1.1",
"react-hot-loader": "^1.3.0",
"redux-logger": "^2.6.1",
"redux-thunk": "^2.1.0",
"webpack": "^1.13.1",
"webpack-dev-middleware": "^1.6.1",
"webpack-hot-middleware": "^2.10.0"
  }
}

I followed until 'Plug Installation' on https://github.com/roadhump/SublimeLinter-eslint But can't seem to get it operate still on Sublime Text 3. Also, did globally and save-dev for babel-eslint as well.

Also followed with the following site: http://jonathancreamer.com/setup-eslint-with-es6-in-sublime-text/

But it is deprecated as 'Sublime Text>Preferences>Package Settings' does not show downloaded Packages anymore.

I am attempting to get the Sublime Text pick up on mainly syntax errors with the red dot showing whenever in such cases on Sublime Text, but still can't seem to figure it out even after many hours. Any suggestions or guidance will be greatly appreciated. Thank you in advance.

I'm pretty sure the file name should be .eslintrc, not .eslintrc.json. — Saad
@saadq ESLint supports multiple file formats so that should be fine, see eslint.org/docs/user-guide/… — Nick Bartlett
>But it is deprecated as 'Sublime Text>Preferences>Package Settings' does not show downloaded Packages anymore. I'm not sure what this means, are you saying you can't find those settings through the menu? Also, is eslint on your system PATH? sublimelinter.readthedocs.io/en/latest/… — Nick Bartlett

Jlearner Jlearner · Accepted Answer · 2016-10-28T17:31:09

If you have installed both jslint and eslint in that case jslint is overriding eslint features.

Press Command +Shift +P (mac)

Type 'disable' and select disable lint and enter

You will get all jslint, eslint, json etc lists Click on jslint

Now it's configured to catch eslint syntax errors.

In case you want to enable jslint again you need to follow same process by typing 'enable'

How to get ESLint to work React + Babel in Sublime Text 3 editor?

2 Answers