Implementing Linter in a Large Codebase

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.