I see you.
I know you are beginning a new project and thinking, "Alright, I will be using ESLint and I hope it works."
But let's be honest, it's not that easy. And the reason is that you are just getting started. Unless you have used ESLint in a project before, it's hard to figure out the settings to employ.
In this article, I will help you solve that problem.
The steps to get started are as follows:
Discuss with your Team 🤓
You must remember that setting ESLint config is the foundation. It's like writing the constitution of a country. You need to agree on the rules that are important for your project, and ignore the ones that are not. But if just one person is deciding the rules, others may raise concern. So, it is better to discuss this with your team before setting up the project. It will hog 15 mins of your time, but will save you hours later.
If you are a lone wolf, you can skip this step.
Take inspiration (⌘+c ⌘+v) 😅
In the beginning, it's better to start with configs by well-known companies. One can always make changes to them when the project begins taking shape. Here's the list of some of the most popular ones to use:
- Airbnb 🏡 : The one everyone ends up using.
- ESLint 🛠: The one used by ESLint team themselves.
- Google 🕵🏿♂️: This one's for google fanboys.
Now, some less popular but more pratical ones:
- Problems 🐞: Config that does not regulate your code style and only catches actual problems with your code.
- Hardcore 💪🏽: The most strict (but practical) ESLint config.
- Canonical 👩🏽🎨: This one's the most comprehensive code style guide with more than 800 rules.
So, these were the configs. You can use plugins too as your projects grows.
Next up is list of plugins to use.
Plug-in Awesomeness 🔌
Since plugins enhance every platform, then why exclude ESLint.
Here's list of some super cool plugins to install in your project:
To Improve Code Quality:
- SonarJS 🐞: Free Plugin for Bug Detection 🐛 and Code Smell Detection. 🐷
- Unicorn 🦄: A variety of remarkable ESLint rules
For Better React:
- JSX - a11y ✨ : Accessibility rules on JSX elements.
- React & React Hooks ⚛️ : Linting rules for React & React Hooks.
Mics:
- Security 🔐: ESLint rules for Node Security.
- fp 🏎: ESLint rules for functional programming.
- Simple import sort 🔃 : Easy autofixable import sorting.
- Filenames 🗄: Ensures consistent filenames for your JavaScript files.
To Format Errors and Warnings:
- MO 👩🏽🎨 : Good-looking ESLint formatter.
- Git Log 🐙: ESLint Formatter featuring Git Author, Date, and Hash.
Automatting Workflow 🤖
After selecting the plugins most suitable for your project, we move to installing other packages to further improve the flow.
Setting up git Hooks
Pre commit hooks are cool as they remind developers that they are not done till the ESLint issues are fixed. The most popular plugin when it comes to hooks is Husky 🐶.
You can install this using:
npm install husky --save-dev
yarn add husky -dAnd then, add this to your package.json:
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"*.{js,jsx}": [
"eslint '*/**/*.{js,jsx}' --fix"
]
},--fix will auto-fix some problems and will save you loads of time.
Setting up Github Actions
Sometimes, by mistake or intentionally, developers may use --no-verify and force push to branch or generate PR. Here enters Lint Action ✨.
Just creat a file in .github/workflow branch, and name it anything but lint.yml.
name: Lint
on: push
jobs:
run-linters:
name: Run linters
runs-on: ubuntu-latest
steps:
- name: Check out Git repository
uses: actions/checkout@v2
- name: Set up Node.js
uses: actions/setup-node@v1
with:
node-version: 12
# ESLint and Prettier must be in `package.json`
- name: Install Node.js dependencies
run: npm install
- name: Run linters
uses: wearerequired/lint-action@v1
with:
github_token: ${{ secrets.github_token }}
# Enable linters
eslint: true
prettier: true
auto_fix: trueThat's it, you will start seeing this in action.
The errors will start showing up like this:
It also auto-fixes the errors it can, and corrects it automatically.
Magic? Agreed. ✨
tldr; 💁🏽♀️
Here's my config file, if you just want to skip all the hustle and go by my word, because this config is excellent for any React project.
module.exports = {
parserOptions: {
ecmaVersion: 2020,
sourceType: 'module',
ecmaFeatures: {
jsx: true
}
},
env: {
browser: true,
node: true,
es6: true
},
plugins: ['simple-import-sort'],
settings: {
react: {
version: 'detect'
}
},
extends: [
'eslint:recommended',
'plugin:jsx-a11y/recommended',
'plugin:react/recommended',
'plugin:prettier/recommended',
'plugin:sonarjs/recommended',
'plugin:unicorn/recommended',
'plugin:security/recommended',
'plugin:react-hooks/recommended'
],
rules: {
'no-console': 'error',
'react/react-in-jsx-scope': 'off',
'react/prop-types': 'off',
'simple-import-sort/sort': 'error',
'unicorn/filename-case': [
'error',
{
cases: {
camelCase: true
}
}
]
}
};
Lastly, don't forget to install all those packages as well, or just copy this in your package.json and run yarn install.
"devDependencies": {
"eslint": "^7.5.0",
"eslint-config-prettier": "^6.11.0",
"eslint-formatter-git-log": "^0.5.3",
"eslint-formatter-mo": "^1.0.0",
"eslint-plugin-jsx-a11y": "^6.3.1",
"eslint-plugin-prettier": "^3.1.4",
"eslint-plugin-react": "^7.20.3",
"eslint-plugin-react-hooks": "^4.2.0",
"eslint-plugin-security": "^1.4.0",
"eslint-plugin-simple-import-sort": "^5.0.3",
"eslint-plugin-sonarjs": "^0.5.0",
"eslint-plugin-unicorn": "^23.0.0",
"husky": "^4.2.5",
"lint-staged": "^10.2.11",
"prettier": "2.0.5",
},Conclusion
Well, this article is over, but the series is just starting.
In this is series, "DevOps by Dummy", we will learn how to implement DevOps to projects, or simply how to organise the workflow to be as productive as you can. We'll also upload a free video course soon.
Want to make sure you don't miss a thing?
Subscribe to the awesomeness now, and we got you! ☺️
