Linter such as ESlint is a useful tool to improve productivity in the team, it will make the codebase more consistent and improve the code quality. But have you ever implemented linter in a large codebase? you will be greeted with thousands of errors in your terminal. It’s expected that the previous code is written without any linter but when you want to add new code, you need to fix the error to get your code compiled and also to remove the error from a terminal because it’s quite noisy. In this post, I want to share my experience to handle this situation.
Solution
The solution that I want to share is not perfect and probably not every team member will agree, the idea is to only lint the file that currently change, thus you only focus to fix the error on the file that you currently working with. It will take a while to lint all of your code files or even some files might never get fixed if you never touch it.
Part 1: Install the Dependencies
The main dependencies that we need are:
eslint-webpack-plugin
The eslint-webpack-plugin
has the option lintDirtyModulesOnly
to lint only changed files, and also skip lint on start. This is the key step to implementing our solution.
husky and lint-staged
Add pre-commit hook to run linter when we want to push the code
Linter
Add any linter that you wanna use, it can be ESLint, airbnb, typescript, etc
prettier
Prettier is an opinionated code formatted. It has a lot of configurations that we can use to match our liking.
Copy this to install all of the dependencies that we need:
npm install eslint-webpack-plugin husky lint-staged eslint prettier eslint-config-prettier --save-dev
OR
yarn add eslint-webpack-plugin husky lint-staged eslint prettier eslint-config-prettier --dev
Part 2: Implementation
First, I assume that you already have .eslintrc
configured, the next step is to add eslint-webpack-plugin
in your Webpack configuration file, make sure to add lintDirtyModulesOnly
in the option.
const ESLintPlugin = require('eslint-webpack-plugin')
module.exports = {
...
plugins: [
new ESLintPlugin({
extensions: ['js', 'ts'],
files: './src/**/*',
lintDirtyModulesOnly: true,
}),
]
...
}
Next, because we only need to fix the file that’s changed, we can use git diff
to automate the fixing process. Add this script below to the package.json
, the script will diff the branch against your current branch HEAD
and run ESlint
or prettier
to it.
{
...
"script": {
"lint-diff": "eslint $(git diff --diff-filter=ACMRTUXB --name-only HEAD src/**/* | grep -E \".(js|ts)$\" | xargs) --fix",
"prettier-diff": "prettier $(git diff --diff-filter=ACMRTUXB --name-only HEAD src/**/* | grep -E \".(js|ts)$\" | xargs) --write",
}
...
}
Finally, add ESlint and prettier in pre-commit hooks, in the package.json
{
...
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"src/**/*.{js,ts}": [
"prettier --write",
"eslint --fix",
],
},
...
}
Conclusion
Implementing a linter in the codebase and being greeted with thousands of errors in your terminal could be a huge task at first, but using the steps above the errors can be fixed over time and the codebase should get better as your team work on it.
Top comments (0)