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.
You can install it either globally or locally. I installed it globally:
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
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)
- Make sure SublimeLinter3 is installed first.
- Install SublimeLinter-eslint
- 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:
This config tells SublimeLinter to:
- disable jshint
- tell eslint to ignore your
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.