Mastering ESLint, Prettier, and TypeScript Configuration

In the world of modern JavaScript and TypeScript development, maintaining a consistent and high - quality codebase is crucial. ESLint, Prettier, and TypeScript are three powerful tools that, when used together, can significantly enhance the development experience and code quality. ESLint is a popular linting utility that analyzes your code for potential errors, bad practices, and enforces a set of coding rules. Prettier, on the other hand, is a code formatter that automatically formats your code to a consistent style. TypeScript adds static typing to JavaScript, making the code more robust and easier to understand and maintain. In this blog, we’ll explore how to configure and use these tools in harmony to create a productive development environment.

Table of Contents

  1. Fundamental Concepts
    • ESLint
    • Prettier
    • TypeScript
  2. Installation and Basic Setup
  3. Configuration of ESLint with TypeScript
  4. Integrating Prettier with ESLint
  5. Common Practices
  6. Best Practices
  7. Conclusion
  8. References

Fundamental Concepts

ESLint

ESLint is a pluggable and configurable linting tool for JavaScript and TypeScript. It allows developers to define a set of rules that their code should follow. Rules can range from simple things like enforcing consistent indentation to more complex checks for potential logical errors. ESLint can be customized to fit the specific needs of a project, and it can be integrated into various development tools such as editors and build systems.

Prettier

Prettier is an opinionated code formatter. It takes your code and formats it according to a predefined set of rules, eliminating the need for developers to argue about code style. Prettier supports a wide range of languages, including JavaScript, TypeScript, CSS, and more. It can be integrated into your development workflow to automatically format your code whenever you save a file or as part of a build process.

TypeScript

TypeScript is a superset of JavaScript that adds static typing to the language. It allows developers to define types for variables, functions, and objects, which helps catch type - related errors at compile - time rather than at runtime. TypeScript compiles down to plain JavaScript, making it compatible with any JavaScript runtime. It also provides better code intelligence in editors, making it easier to write and refactor code.

Installation and Basic Setup

Prerequisites

Make sure you have Node.js and npm (or yarn) installed on your machine.

Installation

First, create a new project directory and initialize a new npm project:

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

Install ESLint, Prettier, and TypeScript:

npm install eslint prettier typescript --save - dev

Configuration of ESLint with TypeScript

Install ESLint Plugins for TypeScript

Install the necessary ESLint plugins and parsers for TypeScript:

npm install @typescript-eslint/parser @typescript-eslint/eslint-plugin --save - dev

Create an ESLint Configuration File

Create a .eslintrc.js file in the root of your project with the following content:

module.exports = {
    parser: '@typescript-eslint/parser',
    plugins: ['@typescript-eslint'],
    extends: [
        'eslint:recommended',
        'plugin:@typescript-eslint/recommended'
    ],
    root: true,
    env: {
        node: true,
        es6: true
    },
    parserOptions: {
        ecmaVersion: 2020,
        sourceType: 'module',
        project: './tsconfig.json'
    }
};

Create a TypeScript Configuration File

Create a tsconfig.json file in the root of your project:

{
    "compilerOptions": {
        "target": "ES6",
        "module": "commonjs",
        "strict": true,
        "esModuleInterop": true,
        "skipLibCheck": true,
        "forceConsistentCasingInFileNames": true
    }
}

Run ESLint

You can now run ESLint on your TypeScript files:

npx eslint src/**/*.ts

Integrating Prettier with ESLint

Install eslint-config-prettier

To avoid conflicts between ESLint and Prettier, install eslint-config-prettier:

npm install eslint-config-prettier --save - dev

Update the ESLint Configuration

Update your .eslintrc.js file to include eslint-config-prettier:

module.exports = {
    parser: '@typescript-eslint/parser',
    plugins: ['@typescript-eslint'],
    extends: [
        'eslint:recommended',
        'plugin:@typescript-eslint/recommended',
        'eslint-config-prettier'
    ],
    root: true,
    env: {
        node: true,
        es6: true
    },
    parserOptions: {
        ecmaVersion: 2020,
        sourceType: 'module',
        project: './tsconfig.json'
    }
};

Create a Prettier Configuration File

Create a .prettierrc.js file in the root of your project:

module.exports = {
    semi: true,
    trailingComma: 'es5',
    singleQuote: true,
    printWidth: 80,
    tabWidth: 4
};

Run Prettier

You can run Prettier to format your files:

npx prettier --write src/**/*.ts

Common Practices

Automatic Formatting on Save

Most code editors support plugins for ESLint and Prettier. You can configure your editor to automatically run ESLint and Prettier when you save a file. For example, in Visual Studio Code, you can install the ESLint and Prettier extensions and add the following settings to your settings.json:

{
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
}

Integrating with CI/CD

Include ESLint and Prettier checks in your CI/CD pipeline. For example, in a GitHub Actions workflow, you can add the following steps:

name: CI

on:
  push:
    branches: [main]

jobs:
  build:
    runs - on: ubuntu - latest

    steps:
      - 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: npx eslint src/**/*.ts
      - name: Run Prettier
        run: npx prettier --check src/**/*.ts

Best Practices

Customize Rules Wisely

Both ESLint and Prettier allow you to customize rules. Only enable rules that are relevant to your project. For example, if your project has a specific naming convention for variables, you can configure ESLint to enforce it.

Keep the Configuration Simple

Avoid over - configuring ESLint and Prettier. A simple configuration is easier to understand and maintain. Use well - established presets as a starting point and make small adjustments as needed.

Educate the Team

Make sure all team members understand the purpose and usage of ESLint, Prettier, and TypeScript. Provide training if necessary to ensure consistent adoption across the team.

Conclusion

ESLint, Prettier, and TypeScript are powerful tools that can greatly improve the quality and maintainability of your JavaScript and TypeScript projects. By understanding their fundamental concepts, configuring them correctly, and following common and best practices, you can create a more productive and error - free development environment. Remember to keep your configuration simple and educate your team to ensure a smooth development process.

References