ESLint TypeScript Best Practices

Table of Contents

1. Fundamental Concepts
2. Usage Methods
3. Common Practices
4. Best Practices
5. Conclusion
6. Reference

Fundamental Concepts

ESLint

ESLint is a pluggable and configurable linting utility for JavaScript and TypeScript. It allows developers to define a set of rules to analyze code and report potential issues such as syntax errors, unused variables, and non - standard coding styles.

TypeScript

TypeScript is a superset of JavaScript that adds static typing to the language. It helps catch errors at compile - time rather than runtime, which leads to more robust and maintainable code.

ESLint for TypeScript

When using ESLint with TypeScript, we need to use specific plugins and parsers to handle TypeScript code. The @typescript-eslint/parser is used to parse TypeScript code, and @typescript-eslint/eslint-plugin provides a set of rules specifically designed for TypeScript.

Usage Methods

Installation

First, create a new TypeScript project or navigate to an existing one. Then, install the necessary packages:

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

Configuration

Create an ESLint configuration file, typically named .eslintrc.js in the root of your project. Here is a basic configuration example:

module.exports = {
    parser: '@typescript-eslint/parser',
    parserOptions: {
        project: './tsconfig.json',
        tsconfigRootDir: __dirname,
        ecmaVersion: 2020,
        sourceType: 'module'
    },
    plugins: ['@typescript-eslint'],
    rules: {
        // Add your custom rules here
        '@typescript-eslint/no-unused-vars': 'error'
    }
};

Running ESLint

After configuration, you can run ESLint on your TypeScript files. For example, to lint all TypeScript files in the src directory:

npx eslint src/**/*.ts

Common Practices

Enforcing Type Definitions

One of the key benefits of TypeScript is its strong typing system. We should enforce the use of explicit type definitions in our code. For example, instead of:

let num;
num = 10;

We should write:

let num: number = 10;

In ESLint, we can use the @typescript-eslint/explicit-function-return-type rule to enforce explicit return types for functions:

module.exports = {
    parser: '@typescript-eslint/parser',
    parserOptions: {
        project: './tsconfig.json',
        tsconfigRootDir: __dirname,
        ecmaVersion: 2020,
        sourceType: 'module'
    },
    plugins: ['@typescript-eslint'],
    rules: {
        '@typescript-eslint/explicit-function-return-type': 'error'
    }
};

Avoiding Magic Numbers

Magic numbers are hard - coded numerical values in the code. They can make the code less readable and maintainable. Consider the following bad example:

function calculateArea() {
    return 3.14 * 5 * 5;
}

A better approach is to define constants:

const PI = 3.14;
const RADIUS = 5;

function calculateArea() {
    return PI * RADIUS * RADIUS;
}

In ESLint, we can write custom rules or use existing plugins to catch magic numbers.

Handling Null and Undefined

TypeScript’s type system can help us handle null and undefined more gracefully. For example, we can use optional chaining and nullish coalescing operators:

const user = {
    address: {
        street: '123 Main St'
    }
};

const street = user?.address?.street?? 'Unknown street';

Best Practices

Use Consistent Naming Conventions

Adopt a consistent naming convention for variables, functions, classes, etc. For example, use camelCase for variables and functions, and PascalCase for classes.

// Good variable naming
const userProfile: UserProfile = {
    name: 'John',
    age: 30
};

// Good class naming
class UserProfile {
    name: string;
    age: number;

    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }
}

Enable Strict Mode

In the tsconfig.json file, enable strict mode. This makes TypeScript perform more comprehensive type checking, which helps catch more errors early.

{
    "compilerOptions": {
        "strict": true
    }
}

Use ESLint’s Auto - Fix Feature

ESLint has an auto - fix feature that can automatically correct many common issues. You can use the --fix flag when running ESLint:

npx eslint src/**/*.ts --fix

Conclusion

Using ESLint with TypeScript is a powerful combination that can significantly improve the quality and maintainability of your code. By understanding the fundamental concepts, following the usage methods, and implementing common and best practices, you can write cleaner, more robust, and error - free TypeScript code. Remember to enforce type definitions, avoid magic numbers, handle null and undefined properly, and adopt consistent naming conventions. Leveraging ESLint’s auto - fix feature can also save you a lot of time in code cleanup.

Reference

• ESLint official documentation
• TypeScript official documentation
• @typescript-eslint official repository

By following these practices, you can take full advantage of the capabilities of ESLint and TypeScript to enhance your development experience and produce high - quality code.

• ←Previous
• Next→