Linting & Code Quality

Relevant source files

The following files were used as context for generating this wiki page:

• eslint.config.js
• package.json
• tsconfig.app.json
• tsconfig.node.json
• AGENTS.md
• README.md

Linting and code quality in the Wasalny landing page project are enforced through a combination of ESLint for static code analysis, TypeScript for type safety, and standardized project guidelines. This system ensures consistency across the codebase, particularly for React 19 and Vite-based development, by identifying problematic patterns and enforcing stylistic rules.

The architecture relies on industry-standard plugins to handle modern JavaScript features, React hooks, and TypeScript-specific syntax. It is integrated directly into the development workflow via NPM scripts and IDE integrations.

ESLint Configuration

The project utilizes ESLint 9.x with a flat configuration file (eslint.config.js). It is designed to target TypeScript and React files while ignoring build artifacts.

Core Configuration

The configuration applies to all .ts and .tsx files. It extends several recommended sets to ensure broad coverage of common errors and best practices.

The diagram shows the hierarchical structure of the ESLint configuration, including file targeting and the inheritance of recommended rule sets.

Sources: eslint.config.js:1-21, package.json:28-31

Key Linting Dependencies

The quality stack is composed of several specialized packages:

Package	Purpose
eslint	Core linter engine.
@eslint/js	Standard JavaScript rules.
typescript-eslint	Tooling to enable ESLint to support TypeScript.
eslint-plugin-react-hooks	Enforces the "Rules of Hooks" for React.
eslint-plugin-react-refresh	Validates components for Vite Fast Refresh.

Sources: package.json:28-36, eslint.config.js:1-6

TypeScript Architecture

TypeScript provides the primary layer of code quality through static typing. The project uses a multi-config approach to separate application code from build-tooling configurations.

TypeScript Configuration Files

The project uses tsconfig.json as a solution-style entry point that references two specific configurations:

1. tsconfig.app.json: Manages the source code in src/. It enables strict mode and ensures modern ES2022 compatibility.
2. tsconfig.node.json: Manages Vite configuration files (e.g., vite.config.ts) with Node.js environment settings.

Strictness and Linting Rules

The tsconfig.app.json file defines several compiler-level linting options to prevent common pitfalls:

• strict: true: Enables all strict type-checking options.
• noUnusedLocals: true: Reports errors on unused local variables.
• noUnusedParameters: true: Reports errors on unused function parameters.
• noFallthroughCasesInSwitch: true: Prevents bugs caused by missing break or return in switch statements.

Sources: tsconfig.app.json:1-32, tsconfig.node.json:1-24, tsconfig.json:1-8

Code Style & Standards

Beyond automated tools, the project defines specific manual standards for component structure and animation implementation.

Standards Summary

• Component Structure: Components must use function declarations with named exports and explicit props interfaces.
• Animation Guidelines: GSAP animations must be managed within the useGSAP hook or custom hooks found in src/hooks/useAnimations.ts. Cleanup is mandatory in animation callbacks.
• Utility Usage: The cn() utility (combining clsx and tailwind-merge) is required for conditional Tailwind classes.

The diagram outlines the naming and structural conventions defined in the project's agent guidelines.

Sources: AGENTS.md:38-120

Automation & Execution

Code quality checks are integrated into the project's lifecycle via NPM scripts.

Script	Command	Description
npm run lint	eslint .	Runs ESLint across the entire project.
npm run build	tsc -b && vite build	Performs a TypeScript type check before the production build.

Sources: package.json:7-9, AGENTS.md:15-25

Summary

Linting and code quality in the Wasalny landing page project are managed through a robust configuration of ESLint 9 and strict TypeScript 5.9. By leveraging specialized plugins for React Hooks and Vite, and enforcing a structured configuration for different execution environments (App vs. Node), the project ensures that code remains performant, type-safe, and consistent across development teams.