Code linting with pre-commit
Vaibhav Rathore
April 15, 2021

Code linting, though a very small & basic thing, often gets ignored by many people in many projects. Probably because it’s small.

There’s a problem that I’ve been facing consistently during code reviews. I, personally, can’t ignore incorrect indentations, and often when I found one, I keep looking for them. Hence, my focus shifts from finding potential logical bugs to linting errors. There goes the code quality👇 !

From an old project

While setting up the foundation of Plio’s enhanced platform, we knew this small thing (along with some other practices) had to be taken seriously from the beginning. In my quest to find what’s the best way to do this without troubling programmers to configure their code editors, I came across Pre-commit.

Plio’s to-do open source checklist on Github

As the name suggests, it uses git hooks to perform certain actions right before a commit happens.

Here’s how the pre-commit-config.yaml file for Plio backend (Django) app looks like:

repos:
-   repo: https://github.com/pre-commit/pre-commit-hooks
    rev: v3.2.0
    hooks:
    -   id: trailing-whitespace
    -   id: end-of-file-fixer
    -   id: check-json
    -   id: check-yaml
    -   id: check-merge-conflict
    -   id: check-added-large-files
-   repo: https://github.com/psf/black
    rev: 20.8b1
    hooks:
    -   id: black
-   repo: https://github.com/pycqa/flake8
    rev: '3.9.0'
    hooks:
    -   id: flake8
        args:
        # these are errors that will be ignored by flake8
        # check out their meaning here
        # https://flake8.pycqa.org/en/latest/user/error-codes.html
        - "--ignore=E501,E203"

The best thing is pre-commit is multi-lingual, so we’re following the same practice for the frontend app as well!

Here’s how the pre-commit-config.yaml file for Plio frontend (VueJS) app looks like:

repos:
-   repo: https://github.com/pre-commit/pre-commit-hooks
    rev: v3.2.0
    hooks:
    -   id: trailing-whitespace
    -   id: end-of-file-fixer
    -   id: check-json
    -   id: check-yaml
    -   id: check-merge-conflict
    -   id: check-added-large-files
-   repo: https://github.com/pre-commit/mirrors-prettier
    rev: v2.2.1
    hooks:
    -   id: prettier
        types: [javascript]

With just a file and a couple of commands, whenever changes are committed, the hook warns and fixes the linting errors in the files that are going into the commit. This is an easy and persistent way to get the formatted code checked in and improve code review quality!

Pre-commit checking and fixing linting issues

More at Pre-commit official website.