ESLint config for React + Redux projects
In my ongoing love affair with static code analysis tools, I wanted to find a good code linter for JavaScript, to use with Sublime. More specifically, a ReactJS project, with Mocha for tests, and of course using the awesome ES6 syntax (with Babel).
With a background in Ruby and Go, I’m used to some great tooling like Rubocop/BeautifyRuby/govet/gofmt/golint. There is a tight feedback loop when running a linter (automatically on saving a file). A team discussing+agreeing+following+evolving the same coding style on a project is a good thing, and fun process to be a part of.
Also, if you’re relatively new to a language, code linters can be a great source of learning to avoid common mistakes.
In terms of JavaScript, there are some decent JS linter tools out there, for example;
In the context of my problem, Sublime+ES6+Babel, it came down to JSHint vs ESLint. JSHint was okay, and had decent support via SublimeLinter-jshint. However I was able to get up and running much faster with ESLint, with some help from Mr Redux himself, Dan A.
My current .eslintrc looks like this;
Main style points include;
- 2-space indentation
- dangling comma’s OK
- Standard ESLint React Plugin rules.