Linting & TypeScript Tooling
Relevant source files
The following files were used as context for generating this wiki page:
The Subito project utilizes a centralized monorepo architecture to manage linting, formatting, and type-checking across multiple applications and packages. By leveraging Turborepo for task orchestration and shared configuration packages, the project ensures consistent code quality and type safety standards throughout the codebase.
System Architecture
The tooling is organized into dedicated configuration packages within the packages/ directory, which are then consumed by individual apps (e.g., api, dashboard) and libraries (e.g., ui, shared).
Configuration Flow
The following diagram illustrates how configurations are inherited and applied across the monorepo.
The monorepo uses workspace references to link these configurations, allowing local changes to propagate instantly across the project.
Sources: package.json:14-15, packages/eslint-config/package.json:5-9, packages/typescript-config/nextjs.json:3
ESLint Configuration
The project uses the ESLint Flat Config system. Configurations are modularized based on the environment (Node.js, React, or Next.js).
Shared Base Configuration
The base.js config provides the foundation for all other ESLint configurations in the repository. It includes:
- Recommended Rules: Standard JS and TypeScript recommended rules.
- Prettier Integration: Disables ESLint rules that might conflict with Prettier.
- Turbo Plugin: Specifically warns about undeclared environment variables to prevent runtime errors in the build pipeline.
- Only-Warn: A plugin that converts all errors into warnings to keep the development workflow fluid.
Sources: packages/eslint-config/base.js:10-33
Specialized Configurations
Different parts of the monorepo extend the base configuration with environment-specific plugins:
| Config Name | Targeted Environment | Key Plugins/Settings |
|---|---|---|
base | Shared/Node.js | eslint-plugin-turbo, eslint-plugin-only-warn |
react-internal | UI Components | eslint-plugin-react, eslint-plugin-react-hooks, browser globals |
next-js | Next.js Apps | @next/eslint-plugin-next, core-web-vitals rules |
Sources: packages/eslint-config/next.js:15-53, packages/eslint-config/react-internal.js:12-40
TypeScript Configuration
TypeScript settings are managed via base JSON files that specify strictness levels and compiler options.
Base Compiler Options
The base.json configuration enforces high standards for type safety:
- Strict Mode: Enabled by default (
"strict": true). - Target:
ES2022for modern JavaScript features. - Module Resolution:
NodeNextto support modern ESM/CJS interop. - Safety:
noUncheckedIndexedAccessis enabled to ensure safety when accessing array or object elements by index.
Sources: packages/typescript-config/base.json:4-18
Environment Overrides
Applications like the Dashboard or API refine these settings. For example, the Next.js configuration sets jsx: "preserve" and adds the Next.js compiler plugin.
Sources: packages/typescript-config/nextjs.json:5-12, apps/api/tsconfig.json:3-20
Task Orchestration
Turborepo is used to execute linting and type-checking tasks efficiently using caching and dependency awareness.
Execution Workflow
Tasks are defined in turbo.json and triggered via package.json scripts.
Script Definitions
| Task | Command | Description |
|---|---|---|
lint | turbo lint | Runs ESLint across all packages. |
typecheck | turbo typecheck | Runs tsc --noEmit to verify type safety. |
format | turbo format | Runs Prettier for code consistency. |
Sources: package.json:5-10, turbo.json:31-40
Code Quality Hooks
To prevent poor code from being committed, the project utilizes Husky and lint-staged.
- Husky: Manages git hooks (configured via the
preparescript). - lint-staged: Executes linting and formatting only on files modified in the current commit, significantly speeding up the pre-commit process.
Sources: package.json:11, 18-19
Conclusion
The Linting & TypeScript Tooling in Subito creates a robust developer experience by centralizing configurations and automating enforcement. Through the use of strict TypeScript settings and specialized ESLint profiles for React and Next.js, the project maintains a high bar for code quality while ensuring that the monorepo remains scalable and maintainable.