Tooling: Linting and Code Style

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
• tsconfig.json
• vite.config.ts

The Character-Sheet-Maker project employs a modern tooling setup to enforce code quality, consistency, and catch potential errors early in the development process. The core of this system is built upon ESLint for static analysis and TypeScript for type safety and stricter compilation checks. This combination ensures that all code written in TypeScript and React (.ts, .tsx) adheres to a predefined set of rules and best practices.

The configuration is managed through a series of files, primarily package.json for dependencies and scripts, eslint.config.js for linting rules, and tsconfig.*.json files for TypeScript compiler options that double as static analysis rules. This setup is integrated into the development workflow via an NPM script, allowing developers to manually run checks across the entire codebase.

Core Technologies and Dependencies

The project's code quality tooling is defined by several key development dependencies listed in package.json. These packages work together to parse, analyze, and report on the TypeScript and React code.

Package	Version	Description
eslint	9.39.1	The core static analysis tool for identifying problematic patterns.
@eslint/js	9.39.1	Provides ESLint's recommended default rules.
typescript-eslint	8.46.4	A toolchain that enables ESLint to lint TypeScript code.
eslint-plugin-react-hooks	7.0.1	Enforces the Rules of Hooks in React components.
eslint-plugin-react-refresh	0.4.24	Enforces best practices for components using React Fast Refresh.
typescript	~5.9.3	The language compiler, which includes strict static analysis options.
globals	16.5.0	Provides global variable definitions (e.g., for browser environments).

Sources: package.json:28-42

ESLint Configuration

The project uses ESLint's flat configuration format, defined in eslint.config.js. This file exports an array of configuration objects that are layered to apply rules to different sets of files.

Sources: eslint.config.js

Configuration Layers

The ESLint setup is composed of several pre-configured rule sets that are extended and applied to all .ts and .tsx files. The dist directory is explicitly ignored from any analysis.

The following diagram illustrates how the different configuration layers are combined.

Sources: eslint.config.js:8-17

The main configuration object targets all files with .ts and .tsx extensions and applies the following extended configurations:

• js.configs.recommended: Base recommended rules from ESLint.
• tseslint.configs.recommended: Recommended rules for TypeScript from typescript-eslint.
• reactHooks.configs.flat.recommended: Rules for React Hooks.
• reactRefresh.configs.vite: Rules related to Vite's Fast Refresh feature.

Sources: eslint.config.js:11-16

Language and Environment Options

The configuration specifies the environment and language features to ensure ESLint parses the code correctly.

• ecmaVersion: Set to 2020 to support modern JavaScript syntax.
• globals: Configured for browser environments, making browser-specific global variables (like window or document) known to ESLint.

Sources: eslint.config.js:18-21

// eslint.config.js
export default defineConfig([
  globalIgnores(['dist']), // Ignores the build output directory
  {
    files: ['**/*.{ts,tsx}'], // Targets TypeScript and TSX files
    extends: [
      js.configs.recommended,
      tseslint.configs.recommended,
      reactHooks.configs.flat.recommended,
      reactRefresh.configs.vite,
    ],
    languageOptions: {
      ecmaVersion: 2020,
      globals: globals.browser,
    },
  },
])

Sources: eslint.config.js:8-23

TypeScript as a Linter

Beyond type checking, the TypeScript compiler is configured with strict rules that act as a powerful static analysis tool. These rules are defined in tsconfig.app.json for the main application source and tsconfig.node.json for Node.js-specific files like vite.config.ts.

Application Linting Rules (tsconfig.app.json)

The application's TypeScript configuration enables several strict checks to improve code quality and prevent common errors.

Rule	Setting	Description
strict	true	Enables all strict type-checking options.
noUnusedLocals	true	Reports errors on unused local variables.
noUnusedParameters	true	Reports errors on unused parameters in functions.
noFallthroughCasesInSwitch	true	Reports errors for fall-through cases in switch statements.
noUncheckedSideEffectImports	true	Ensures that imports for side effects are explicitly marked.

Sources: tsconfig.app.json:17-23

Node Environment Linting Rules (tsconfig.node.json)

The configuration for Node.js files is similarly strict, ensuring build scripts and configuration files are also held to a high standard. The rules are identical to the application's linting rules.

Rule	Setting	Description
strict	true	Enables all strict type-checking options.
noUnusedLocals	true	Reports errors on unused local variables.
noUnusedParameters	true	Reports errors on unused parameters in functions.
noFallthroughCasesInSwitch	true	Reports errors for fall-through cases in switch statements.
noUncheckedSideEffectImports	true	Ensures that imports for side effects are explicitly marked.

Sources: tsconfig.node.json:16-22

Path Aliases

To maintain clean and consistent import paths, the project uses a path alias @/* which maps to the src/ directory. This is configured consistently across the toolchain.

• TypeScript: tsconfig.json and tsconfig.app.json define the baseUrl and paths.
• Vite: vite.config.ts configures the alias for module resolution during development and bundling.

Sources: tsconfig.json:10-13, tsconfig.app.json:25-28, vite.config.ts:9-13

NPM Scripts

The primary way to interact with the linting system is through an NPM script defined in package.json.

lint script

The lint script executes ESLint on the entire project directory.

// package.json
"scripts": {
  "dev": "vite",
  "build": "tsc -b && vite build",
  "lint": "eslint .",
  "preview": "vite preview"
},

Sources: package.json:6-11

Running this script triggers the ESLint process as configured in eslint.config.js.

The following diagram shows the sequence of events when a developer runs the lint command.

Sources: package.json:8, eslint.config.js

Summary

The project's tooling for linting and code style provides a robust and automated system for maintaining high-quality code. By combining ESLint with TypeScript's strict compiler options, developers receive immediate feedback on potential issues, from style inconsistencies to critical bugs. The centralized configuration in eslint.config.js and tsconfig.*.json files, along with the simple npm run lint command, makes the system easy to use and enforce across the entire development team.