How Insomnia Handles Code Linting and Formatting in Its Monorepo Workspace

Insomnia enforces consistent code quality across its entire monorepo by combining ESLint for static analysis and Prettier for formatting, with all commands orchestrated through npm workspace scripts defined in package.json files.

The Kong/insomnia repository manages code quality across multiple packages using a centralized configuration that delegates to individual workspaces. By leveraging npm workspaces and shared configuration files, the project ensures that every JavaScript, TypeScript, and TSX file follows the same standards regardless of which package it belongs to.

ESLint Configuration Across Workspaces

Root Package Orchestration

The root package.json serves as the command center for linting operations. According to the source code, line 30 defines the global lint script:

"lint": "npm run lint --workspaces --if-present"

This command propagates to every workspace in the monorepo, allowing developers to lint the entire codebase from the repository root.

The root file also declares the comprehensive ESLint toolchain in its devDependencies (lines 50-66). This includes ESLint core, eslint-plugin-react and eslint-plugin-react-hooks for React-specific rules, eslint-plugin-simple-import-sort for import organization, eslint-plugin-unicorn for additional JavaScript best practices, and eslint-config-prettier to disable conflicting formatting rules.

Per-Workspace Implementation

Each workspace maintains its own package.json with a lint script that targets its specific source files. For example, in packages/insomnia/package.json at line 26, the script reads:

"lint": "eslint . --ext .js,.ts,.tsx --cache"

This pattern repeats across workspaces like packages/insomnia-testing (line 16), ensuring modular execution while maintaining consistency. The --cache flag accelerates subsequent runs by caching results, making the linting process efficient even across the entire monorepo.

Prettier Formatting Configuration

Shared .prettierrc Settings

Formatting rules are centralized in the repository's .prettierrc file, which all workspaces share. The configuration specifies a printWidth of 120 characters, singleQuote usage, trailingComma set to "all", and arrowParens set to "avoid". These settings ensure uniform formatting across all contributors.

Tailwind CSS Plugin Integration

The Prettier setup includes special handling for the Insomnia UI package. The .prettierrc applies prettier-plugin-tailwindcss specifically to files matching packages/insomnia/**/*, ensuring consistent class ordering in Tailwind CSS usage while leaving other packages unaffected.

{
  "trailingComma": "all",
  "printWidth": 120,
  "arrowParens": "avoid",
  "singleQuote": true,
  "quoteProps": "consistent",
  "overrides": [
    {
      "files": "packages/insomnia/**/*",
      "options": {
        "plugins": ["prettier-plugin-tailwindcss"]
      }
    }
  ]
}

Running the Linting Pipeline

Repository-Wide Execution

To lint the entire codebase, developers run:

npm run lint

This executes the root script, which fans out to all workspaces via the --workspaces --if-present flags.

Targeted Workspace Linting

For faster feedback during development, lint a specific workspace using:

npm run lint -w insomnia-api

Replace insomnia-api with any workspace name to limit the scope to that package's source files.

Summary

• Root package.json orchestrates monorepo-wide linting via "npm run lint --workspaces --if-present" and hosts shared ESLint dependencies in lines 50-66
• Workspace package.json files contain individual lint scripts using eslint . --ext .js,.ts,.tsx --cache for targeted execution (e.g., packages/insomnia/package.json line 26)
• ESLint plugins include React hooks, import sorting, Unicorn rules, and Prettier compatibility configured in root devDependencies
• Prettier formatting is centralized in .prettierrc with Tailwind CSS plugin integration for the Insomnia UI package
• Caching is enabled via the --cache flag to optimize performance across large codebases

Frequently Asked Questions

How do I run linting for only one workspace in Insomnia?

Use the npm workspaces filter flag: npm run lint -w insomnia-api. This executes the lint script defined in that specific workspace's package.json without processing other packages, significantly speeding up feedback during development.

What ESLint plugins does Insomnia use for React development?

The repository uses eslint-plugin-react and eslint-plugin-react-hooks to enforce React best practices, alongside eslint-plugin-playwright for testing utilities. These are declared in the root package.json devDependencies (lines 55-65) and apply across all workspaces.

Where is Prettier configured in the Insomnia repository?

Prettier configuration lives in the .prettierrc file at the repository root. This file defines formatting rules like 120-character line width and single quotes, and conditionally applies the Tailwind CSS plugin only to files within packages/insomnia/**/*.

Does Insomnia use ESLint for code formatting?

No, Insomnia separates concerns: ESLint handles static analysis and code quality rules, while Prettier handles formatting. The eslint-config-prettier plugin disables ESLint rules that would conflict with Prettier, ensuring the tools work together without contradictions.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}