如何在yarn build过程中通过tslint等工具检查代码风格？

Hey there! Let's walk through how to handle code style checks and get TSLint running as part of your yarn build process.

Common Code Style Checking Methods #

• Pick the right tool: For TypeScript projects, TSLint was a go-to for years, though the official recommendation now is to use ESLint with the @typescript-eslint plugin (since TSLint is deprecated). That said, if you're sticking with TSLint, it still works reliably for existing projects. You can also pair either tool with Prettier to handle formatting rules separately from code quality checks.
• Set up configuration files:
  • For TSLint: Create a tslint.json file in your project root. Define rules directly, or extend presets like tslint:recommended or community-maintained ones (e.g., tslint-config-airbnb). Example snippet:

    {
      "extends": "tslint:recommended",
      "rules": {
        "no-unused-variable": true,
        "indent": [true, "spaces", 2],
        "semicolon": [true, "always"]
      }
    }
    

  • For ESLint+TypeScript: Use .eslintrc.js with @typescript-eslint/recommended as a base to cover TypeScript-specific rules.
• Real-time IDE feedback: Install the corresponding plugin for your editor (like TSLint for VS Code) to catch style issues as you code, before even running terminal commands.
• Manual checks: Run the tool directly via command line to scan your entire codebase:
  • TSLint: tslint --project tsconfig.json
  • ESLint: eslint . --ext .ts,.tsx

Integrating TSLint into Yarn Build #

Absolutely, you can enforce code style checks during the yarn build process—here's how to set it up:

1. Update your package.json scripts:
   Find your existing build script and prepend the TSLint command with && (this ensures the build only runs if TSLint passes without errors). For example:

   {
     "scripts": {
       "build": "tslint --project tsconfig.json && tsc",
       "lint": "tslint --project tsconfig.json"
     }
   }
   

   • The && operator acts as a gatekeeper: it runs TSLint first, and only proceeds to the TypeScript compiler (tsc) if TSLint exits without violations. If any style errors are found, the build will be aborted immediately.
2. Optimize for large projects: Add the --cache flag to TSLint to only check files that have changed since the last run, which speeds up the check significantly:

   "build": "tslint --project tsconfig.json --cache && tsc"
   

3. Handle warnings vs errors: If you want to allow warnings but block the build only on errors, tweak your TSLint rules to set severity levels (e.g., "no-unused-variable": [true, "error"]). Avoid using the --force flag unless you have a specific reason—it will ignore errors and proceed with the build, which defeats the purpose of strict style checks.

A Quick Note on TSLint Deprecation #

Since TSLint is no longer maintained, if you're starting a new project or have the bandwidth to migrate, switching to ESLint + @typescript-eslint is a better long-term choice. The integration into yarn build works almost identically—just swap the TSLint command with the ESLint one:

"build": "eslint . --ext .ts,.tsx && tsc"

Hope that helps you lock in your code style checks and integrate them seamlessly into your build workflow! If you hit any snags with configuration, feel free to ask for more details.

内容的提问来源于stack exchange，提问作者Jack Chen