react-render-types-setup

Configure eslint-plugin-react-render-types with flat ESLint configs in TypeScript React projects.

110|3|Updated Jan 26, 2026
One-click install
npx skills add https://github.com/HorusGoul/eslint-plugin-react-render-types --skill react-render-types-setup
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: react-render-types-setup
Source: https://github.com/HorusGoul/eslint-plugin-react-render-types/tree/main/skills/react-render-types-setup
Command: npx skills add https://github.com/HorusGoul/eslint-plugin-react-render-types --skill react-render-types-setup

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This guide helps developers install and configure eslint-plugin-react-render-types in a TypeScript React project to enforce component render constraints at lint time and enable IDE assistance without requiring extensive boilerplate.

Core Features & Use Cases

  • Typed linting with cross-file render type validation using TypeScript's type checker.
  • Flat config / recommended setup for ESLint to support @renders and ensure typed linting is enforced.
  • IDE integration guidance for language service features such as go-to-definition, hover, and diagnostics, plus unused import suppression.
  • Setup prerequisites and common pitfalls, including tsconfig/projectService configuration and example rule configurations.

Quick Start

Install the plugin and enable typed linting in your ESLint flat config to start using @renders.

Frequently Asked Questions about react-render-types-setup

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I configure eslint-plugin-react-render-types in a TypeScript React project?

You configure eslint-plugin-react-render-types by installing the plugin and enabling typed linting in your ESLint flat config. This setup enforces component render constraints using TypeScript's type checker for cross-file validation.

What are the prerequisites for React render-types linting with TypeScript?

React render-types linting requires a working tsconfig.json configured for TypeScript. You also need to enable typed linting in your ESLint flat config and configure projectService options to support cross-file type resolution.

Can I get IDE integration for go-to-definition with React render-types?

Yes, React render-types supports IDE integration for language service features. By configuring the recommended IDE plugins, you enable go-to-definition, hover diagnostics, and unused import suppression directly in your editor.

How does cross-file type resolution work for React render-types linting?

Cross-file type resolution for React render-types linting works by leveraging TypeScript's type checker within ESLint. This allows the linter to validate @renders annotations and component render constraints across multiple project files.

Does React render-types linting work with flat ESLint configs?

Yes, React render-types linting works with flat ESLint configs by applying the recommended setup. This ensures typed linting is properly enforced and @renders support is active without requiring extensive boilerplate configuration.

What common pitfalls should I avoid when setting up React render-types linting?

Common pitfalls in React render-types linting setup include misconfiguring tsconfig.json and projectService options. Ensuring these prerequisites are correctly set prevents issues with cross-file type resolution and unused import suppression.