Enforcing consistent patterns and syntax is an important part of maintaining a component library. Code linting tools help enforce consistent code formatting and ensure that important code-quality rules are being followed.

In this lesson we will be adding Prettier and ESLint to our codebase.

Prettier#

Prettier is a code formatter with support for most types of files. It focuses on ensuring that our codebase follows consistent formatting rules, like max line length and consistent comma usage. Let's install it with the following command:

npm install --save-dev prettier@^2.2.1

Prettier comes with an opinionated set of default style rules. For our library we will override the singleQuote configuration by creating a .prettierrc file at the root of the repository.

// File: .prettierrc

{

  "singleQuote": true

}

Next, let's add a new NPM script to format our files. Modify our package.json to include a new format script:

// File: package.json

{

  "scripts": {

    "format": "prettier --write \"src/**/*\"",

    "lint:format": "prettier --check \"src/**/*\"",

  }

}

Run the new script to format our codebase.

npm run format

ESLint#

ESLint is a static analysis tool that allows us to ensure that our code follows specific code-quality rules. By including additional ESLint plugins we are able to reduce potential React and TypeScript bugs.

We will be using the following plugins in our library: