Linting

We use various tools together for our linting process. They all work together to ensure we write high quality code that matches our standards.

ESLint

ESLint is a JavaScript / TypeScript code linter that can be used to statically analyze code to find problems in the code. It's primarily helpful for detecting code smell, potential bugs, and bad patterns.

Our ESLint config is based on the AirBnb style guide, with a few exceptions made in the config to be less restrictive.

The two packages we have in the repo for ESLint are:

• packages/eslint-config: Configuration based on AirBnb with additional plugins and overrides
• packages/eslint-plugin: Custom plugin for defining custom rules.

Prettier

Prettier is an opinionated code formatter that allows us to format our code and remove the overhead of worrying about a shared code style.

Stylelint

Stylelint is a CSS / SCSS linter that is similar to ESLint, allowing us to statically analyze our CSS modules and find problems in the code.

TypeScript Type Checker

The TypeScript compiler allows us to check if the types for our code are correct via the tsc -P command.

pre-commit

The pre-commit tool is a framework for managing pre-commit hooks at the root level for our repo. Since our repo contains both the python client and frontend, we use pre-commit to unify the linting process for both ecosystems.

Running locally

Each linter can be run separately or altogether using npm scripts or the pre-commit tool directly.

To run the frontend linters:

cd frontend/packages/data-portal

# Run linter
pnpm lint:eslint
pnpm lint:prettier
pnpm lint:stylelint

# Fix auto-fixable lint errors
pnpm lint:eslint:fix
pnpm lint:prettier:fix
pnpm lint:stylelint:fix

# Run all linters
pnpm lint
pnpm lint:fix

# Run type checker
pnpm type-check

To run all linters via pre-commit:

python3 -m venv .venv

# bash / zsh
source .venv/bin/activate

# fish
source .venv/bin/activate.fish

# install python linter deps
pip install -r py-dev-requirements.txt

# run all linters
pre-commit run --show-diff-on-failure --color=always --all-files

PR linting

When opening a PR, a couple of jobs will kickoff to run the frontend linters for the PR. This is to ensure that when we merge code, it follows our code quality standards:

This is configured via the formatting.yml and frontend-tests.yml workflows.