TypeScript Code Quality Checks with ESLint and Prettier

In the JavaScript ecosystem, as project scale and complexity grow, while dynamic typing offers immense flexibility, it also brings issues such as frequent runtime errors, reduced code readability, and increased maintenance costs. To address these pain points, modern frontend development has introduced TypeScript as a solution. Beyond its core type system, TypeScript integrates powerful static analysis capabilities that can catch numerous potential logical and syntactic issues during the compilation phase. This article delves into how to leverage two major toolchains—ESLint and Prettier—in conjunction with TypeScript's type checking mechanisms to build an efficient, automated code quality assurance framework.
TypeScript is essentially a superset of JavaScript; by performing type inference and validation during the compilation phase, it intercepts many errors that would only be exposed in browsers later. However, relying solely on checks from the TypeScript Compiler (tsc) is not comprehensive enough. ESLint (JavaScript/TypeScript ESLint) focuses on unifying code style, detecting potential logical errors, and promoting best practices; Prettier aims to ensure consistent coding styles across all developers through formatting rules. Together, they form a "three-line defense" in modern engineering:

  • Static Type Checking: Catches compile-time errors such as undefined variables or type mismatches.
  • ESLint Deep Analysis: Identifies logical risks like missing return values (No Return), abuse of global variables, and asynchronous functions lacking the await keyword, while unifying code standards.
  • Prettier Format Standardization: Eliminates readability barriers caused by individual habit differences and reduces team communication costs.

These three components are typically integrated using configuration files such as .prettierrc, .eslintrc.js, and tsconfig.json, forming a configurable automated pipeline.

Deep Syntactic Configuration of ESLint with TypeScript

To effectively apply ESLint checks to TypeScript code in a project, the key lies in correctly installing plugins and configuring rules. The official TypeScript package provides @typescript-eslint/eslint-plugin as its core extension pack, allowing us to deeply customize TSX, generics, interfaces, etc., while maintaining original JavaScript ESLint logic.

First, necessary dependencies must be installed at the root of your project:

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

Next is the process of writing configuration files. Taking .eslintrc.js as an example, we need to explicitly specify that the parser should be @typescript-eslint/parser, so ESLint can correctly understand TypeScript syntax structures:

module.exports = {
  parser: '@typescript-eslint/parser', // Must use TS-specific parser
  extends: [
    'plugin:@typescript-eslint/recommended', 
    'prettier' // Enable Prettier formatting rules simultaneously to avoid conflicts
  ],
  plugins: ['@typescript-eslint'],
  env: {
    browser: true,
    es2021: true,
  },
  rules: {
    '@typescript-eslint/no-unused-vars': 'error', // Disallow unused variables
    '@typescript-eslint/explicit-function-return-type': 'off', // Adjust strictness based on project requirements
  }
};

Through the above configuration, ESLint will no longer ignore TypeScript-specific syntax sugar (such as type annotations and arrow functions) but can precisely analyze code logic. For instance, when a developer forgets to add await in an async function, ESLint immediately reports warnings about potential event listener unbinding issues; if a variable is declared with a type but never assigned or called, static checks will directly intercept this redundant definition.

Prettier: The Invisible Guardian of Unified Code Style

If ESLint is the judge responsible for "correcting errors," then Prettier is the beautician responsible for "cosmetic surgery." In large projects involving multiple developers, preferences regarding indentation, line breaks, and bracket usage often lead to chaotic code styles. TypeScript projects suffer from this as well; details such as whether single quotes or double quotes should be used, or whether braces are placed on the same line or the next line cause significant confusion.

Through its powerful configuration capabilities, Prettier can automatically handle these formatting issues. In TypeScript projects, we typically define rules conforming to team standards in a .prettierrc file:

{
  "singleQuote": true,      // Use single quotes
  "tabWidth": 4,            // Tab width is 4 (corresponds to indentation)
  "trailingComma": "es5",   // ES5-compatible trailing comma strategy
  "semi": false             // TypeScript usually omits semicolons at the end of statements for enhanced readability
}

Once configured, developers only need to install the prettier CLI tool and integrate it into editor plugins (such as VS Code) or Git Hooks. Every time code is saved, Prettier runs silently in the background to automatically correct formatting errors. This not only ensures that code submitted to repositories maintains a highly consistent style but also reduces meaningless arguments triggered by format issues, allowing teams to focus on business logic itself.

Building an Automated Pipeline: Quality Gates in CI/CD

Combining these toolchains with continuous integration (CI) processes is the ultimate means of improving code quality. When configuring workflow scripts on platforms like GitHub Actions, GitLab CI, or Jenkins, you can set strict execution strategies: once a developer submits a Pull Request (PR) containing TypeScript files, the system automatically triggers build tasks. This task first runs tsc --noEmit for basic type checking, followed sequentially by ESLint and Prettier checks and formatting.

If any step fails or code format does not meet preset standards, the pipeline will directly reject the merge request and notify developers to fix the issues. This "automated gate" mechanism significantly reduces risks caused by human oversight, ensuring that code entering the main branch remains in a high-quality, highly readable state. Through this method, TypeScript's static analysis capability transforms from an optional nice-to-have into a necessary prerequisite for project delivery.

In summary, reasonably configuring ESLint and Prettier alongside TypeScript's type system can build a rigorous and efficient code quality assurance framework. This not only enhances the robustness of individual files but also promotes team collaboration efficiency and long-term maintenance cost control on a macro level, making it standard practice in modern high-quality software engineering.