ESLint is a static lint tool for JavaScript. Before running your code, the tool find obvious bug.
In addtion, it helps to unify your code styles such as how to use parentheses and spaces, etc.
In this article, I will explain the ESLint configuration for checking React.js written with ES6+.
🎳 Style Guide
Aribnb’s style guide is really great and easy to understand. ESLint also check your code based on the style guide.
- JavaScript: airbnb/javascript
- React.js: airbnb/javascript/react
🚕 Installation
Install following libraries:
npm install --save-dev eslint babel-eslint eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react |
🎉 Configuration
ESLint configuration is as follows:
// .eslint.json |
Please see moore detail Configuring ESLint.
🐰 Usage in Command Line
./node_modules/bin/eslint sample.js |
🐡 Usage in overcommit
overcommit is a git hook management tool which can execute various command before git commit, push or etc.
The following configuration is how to use ESLint with overcommit.
At first, overcommit configuration like this:
# .overcommit.yml (Add following comfigugration) |
Ater the configuration, execute bundle exec overcommit --sign
, so ESLint will be executed automatically before git push
.
😸 Usage in wercker
The configuration of free CI wercker is as follows:
eslint: |
Happy Hacking!
🍣 Special Thanks
🖥 Recommended VPS Service
VULTR provides high performance cloud compute environment for you.
Vultr has 15 data-centers strategically placed around the globe, you can use a VPS with 512 MB memory for just $ 2.5 / month ($ 0.004 / hour).
In addition, Vultr is up to 4 times faster than the competition, so please check it => Check Benchmark Results!!