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