Cheng's Blog

A few weeks ago, I wrote a blog on how to setup ST3 for React dev. Since then, I learned more about react development, I started to use eslint. Jslint is great but it does not support JSX. We need a linter that can be integrated with ST3 and show live linting result while coding. This is where eslint comes in.

Install eslint

You can install it either globally or locally. I installed it globally:

npm install -g eslint eslint-plugin-react

The only hiccup to start using eslint is its stunning numbers of configurable options available. I have included a .eslintrc file to get your started(Just copy and paste this code your your .eslintrc file). The majority of this file is based on this example and this project. I added/modified the following:

• Enable JSX linting via eslint-plugin-react
• Enable ES6 syntax
• Enable ES6 module import and export
• Use single quote instead of double quote around strings (you can always change this by replacing "quotes": [1, "single"] with "quotes": [1, "double"]. Just search for the quotes keyword.

A note about eslint's syntax, eslint use 0, 1 and 2 to represent:

• 0 - disable the rule
• 1 - display warning when a rule is violated
• 2 - display error when a rule is violated

You can always look up a eslint setting here.

Enable eslint in Sublime Text 3 (ST3)

1. Make sure SublimeLinter3 is installed first.
2. Install SublimeLinter-eslint
3. Make sure you have a .eslintrc file in your current project's root folder. Open up the project folder in sublime and wait for a few seconds for eslinter to kick in.

[Optional] Disable jshint in ST3

If you also have sublime-jshint installed, you want to disable it otherwise both jshint and eslint will lint your project. To do this, inside ST3, save your project by (Project -> Save project as ...). This will create a .sublime-project file, inside this file, put the following config inside:

{

    "SublimeLinter":{
        "linters":{
            "eslint":{
                "excludes":[
                    "dist/*",
                    "node_modules/*"
                ]
            },
            "jshint":{
                "@disable":true
            }
        }
    }
}

This config tells SublimeLinter to:

1. disable jshint
2. tell eslint to ignore your dist and node_modules folder

Note

Whenever you modify the .eslintrc file, it will NOT take effect unless your restart ST3. Also, when ST3 is opened, it will not respond to any user input for a few seconds because eslint is working in the background linting your files.