Mastering Code Quality with ESLint, Airbnb Config, TypeScript, and Prettier

Table of Contents

1. Fundamental Concepts
   • ESLint
   • Airbnb ESLint Configuration
   • TypeScript
   • Prettier
2. Installation and Setup
3. Usage Methods
   • Running ESLint
   • Using Prettier
4. Common Practices
   • Ignoring Files
   • Integrating with IDEs
5. Best Practices
   • Customizing Rules
   • Automating Checks
6. Conclusion
7. References

Fundamental Concepts

ESLint

ESLint is a pluggable linting utility for JavaScript and TypeScript. It allows developers to define a set of rules that the code must adhere to. These rules can range from simple syntax checks to more complex code - quality and style checks. ESLint can be customized to fit the specific needs of a project by enabling or disabling rules, or by creating custom rules.

Airbnb ESLint Configuration

Airbnb is well - known for its high - quality JavaScript code standards. Their ESLint configuration provides a comprehensive set of rules that follow these standards. By using the Airbnb configuration, developers can ensure that their code adheres to a widely - accepted and battle - tested set of best practices.

TypeScript

TypeScript is a superset of JavaScript that adds static typing. It helps catch errors early in the development process by allowing developers to define types for variables, functions, and objects. This makes the code more self - documenting and easier to understand, especially in larger projects.

Prettier

Prettier is a code formatter that enforces a consistent code style. It automatically formats the code according to a set of predefined rules, eliminating debates over code style within a team. Prettier supports multiple programming languages, including JavaScript and TypeScript.

Installation and Setup

First, create a new project directory and initialize a package.json file:

mkdir my - project
cd my - project
npm init -y

Install the necessary packages:

npm install eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-config-airbnb-typescript prettier eslint-config-prettier eslint-plugin-prettier typescript --save-dev

Create a tsconfig.json file:

npx tsc --init

Create an .eslintrc.json file with the following content:

{
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "project": "./tsconfig.json"
    },
    "extends": [
        "airbnb-typescript",
        "plugin:prettier/recommended"
    ],
    "rules": {
        // You can override rules here if needed
    }
}

Create a .prettierrc.json file to configure Prettier:

{
    "singleQuote": true,
    "trailingComma": "es5",
    "printWidth": 80
}

Usage Methods

Running ESLint

To run ESLint on your TypeScript files, add the following script to your package.json:

{
    "scripts": {
        "lint": "eslint src --ext .ts,.tsx"
    }
}

Then you can run the linting process:

npm run lint

Using Prettier

To format your code with Prettier, add the following script to your package.json:

{
    "scripts": {
        "format": "prettier --write src"
    }
}

Run the formatting process:

npm run format

Common Practices

Ignoring Files

Create an .eslintignore file to specify files and directories that ESLint should ignore:

node_modules
dist

Create a .prettierignore file to specify files and directories that Prettier should ignore:

node_modules
dist

Integrating with IDEs

Most popular IDEs, such as Visual Studio Code, support ESLint and Prettier integration. You can install the ESLint and Prettier extensions in Visual Studio Code. After installation, the IDE will automatically highlight linting errors and format the code as you save the files.

Best Practices

Customizing Rules

While the Airbnb configuration provides a great starting point, you may need to customize the rules to fit your project’s specific needs. You can override rules in the .eslintrc.json file. For example, if you want to allow more lenient rules for function length:

{
    "rules": {
        "max - len": ["error", { "code": 120 }],
        "max - lines - per - function": ["error", { "max": 200 }]
    }
}

Automating Checks

To ensure that the code always adheres to the defined rules, you can integrate ESLint and Prettier checks into your CI/CD pipeline. For example, in a GitHub Actions workflow:

name: Code Quality Checks

on:
  push:
    branches:
      - main

jobs:
  lint - and - format:
    runs - on: ubuntu - latest

    steps:
      - name: Checkout code
        uses: actions/checkout@v2

      - name: Set up Node.js
        uses: actions/setup - node@v2
        with:
          node - version: 14

      - name: Install dependencies
        run: npm install

      - name: Run ESLint
        run: npm run lint

      - name: Run Prettier
        run: npm run format

Conclusion

Combining ESLint, Airbnb’s ESLint configuration, TypeScript, and Prettier is a powerful way to ensure high - quality code in your JavaScript and TypeScript projects. ESLint helps catch errors and enforce coding standards, the Airbnb configuration provides a solid foundation of best practices, TypeScript adds static typing for better code clarity, and Prettier ensures a consistent code style. By following the installation, usage, and best - practice guidelines outlined in this blog, you can streamline your development process and produce more reliable code.

References

• ESLint official documentation: https://eslint.org/
• Airbnb ESLint configuration: https://github.com/iamturns/eslint-config-airbnb-typescript
• TypeScript official documentation: https://www.typescriptlang.org/docs/
• Prettier official documentation: https://prettier.io/docs/en/index.html
• GitHub Actions documentation: https://docs.github.com/en/actions

• ←Previous
• Next→