Skip to Content
IntroductionStyle GuideLinting

Linting

Learn how ESLint and Prettier seamlessly collaborate to lint your code!

The project uses ESLint  for linting JavaScript and TypeScript code and Prettier  for formatting code.

ESLint

EsLint configurations, rules, and plugins are defined in packages/eslint-config.

It is designed as package to share the same linting rules across multiple projects. It can be published to npm and installed as a dependency in other projects. It gives as a benefit of having a single source of truth for linting rules.

It is also designed to be extendable. The team that uses this package can add or override rules in their own project as needed.

💡

Currently we only have a single eslint configuration file for the entire project. This is a good starting point, but as the project grows, we may need to split the configuration into multiple files.

Automation

The lint-staged command checks your files for issues before each commit. It’s set up in the package.json file to look at different types of files and fix common problems.

"lint-staged": {
  "**/*.{js,jsx,ts,tsx}": "eslint --ext .js,.jsx,.ts,.tsx --fix --max-warnings=0",
  "**/*.{js,jsx,json,yml,yaml,css,less,scss,ts,tsx,md,graphql}": "prettier --write"
}
  • The eslint command will run on all JavaScript and TypeScript files, and the prettier command will run on all files that are supported by Prettier.
  • The eslint will throw an error if there are any warnings, errors which will prevent the commit from being made.
  • The prettier command will automatically fix any formatting issues with the files that are staged for commit.

Husky Integration

Husky is a tool that allows us to run commands at specific points in the Git workflow. We utilize it to run the lint-staged, typecheck and test commands before each commit.

You can find the .husky directory in the root of the project. This directory contains the configuration for Husky.

In the mentioned directory, you will see a pre-commit file. This file contains the lint-staged, typecheck and test commands that will run before each commit.

pnpm run lint-staged
pnpm run typecheck
pnpm run test

The below error message an example of what you will see in your terminal if you try to commit code that has linting errors.

 /akinon/ui-protocol/packages/app-shell/src/index.tsx
  4:7  error  'myvar' is assigned a value but never used. Allowed unused vars must match /^_/u  @typescript-eslint/no-unused-vars

It will inform you of the file name, line number, and the error message. You can then go to the file and fix the issue.

ReleasesJavascript & TypeScript