Implementing Linter in a Large Codebase
Tags: javascript, webdev, tutorial, productivity
Published: 2021-12-24 07:50:28

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:

```bash
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.

```jsx

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.

```json
{
 ...
 "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`

```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.