ESLint

Requires objects to have explicit TypeScript type annotations instead of relying on implicit inference. This is meant for stricter definitions of objects so the type can be reused. Note that `as const` is allowed here because it gives the object a constant shape.

1export const defaultConfig = {
2maxUsers: 10,
3name: "app"
4};

This rule encourages keeping component logic and data as close to where they're used as possible. If a variable is only used as a prop for a single component, it should be defined inside that component rather than being passed down as a prop.

1const x = 5;
2
3<MyComponent value={x} />;

This is the exact same rule as max-depth from ESLint except it allows you to break the max-depth if you exit early via a return or throw statement.

1if (a) {
2    if (b) {
3        doThing();
4    }
5}

Limits JSX nesting depth to improve readability and maintainability. Deeply nested markup should be broken into smaller components.

1const MyComponent = () => (
2	<div>
3		<section>
4			<article>
5				<div>
6					<span>
7						<strong>Deep text</strong>
8					</span>
9				</div>
10			</article>
11		</section>
12	</div>
13);

Enforces a minimum variable name length, like default: 3. Improves readability and discourages overly short variable names.

1const x = fetchData();

This rule prevents using button clicks, or other UI event handlers, to directly manipulate the browser's navigator object. In other words, you shouldn't perform navigation actions like window.location, navigator.pushState, or similar operations inside button event handlers.

1<button onClick={() => (window.location.href = '/home')}>
2    Go Home
3</button>

This rule disallows adding explicit return type annotations to functions when TypeScript can already infer the type automatically. TypeScript's type inference system is highly accurate and adapts as your code changes — meaning that explicitly declaring return types in these cases can make your code more rigid and harder to maintain.

1const getUserName = (user: User): string => {
2    return user.name;
3}

Enforces the use of named or predefined types for component props, preventing the use of inline type definitions when passing props.

1type Props = {
2  style: { marginTop: number };
3};
4
5const MyComp = ({ style }: Props) => <div style={style} />;

Ensures style objects are centralized and reused rather than scattered across the component. Improves maintainability and performance.

1const styles = {
2  redBox: { color: 'red', padding: 4 },
3  blueBox: { color: 'blue', margin: 8 },
4  greenBox: { color: 'green', border: '1px solid' },
5};
6
7<div style={styles.redBox} />
8<div style={styles.blueBox} />
9<div style={styles.greenBox} />

Prevents nested JSX return statements, which can make code less readable and harder to maintain.

1const items = ['apple', 'banana', 'cherry'];
2
3const List = () => (
4  <div>
5    {items.map((item) => (
6      <div>
7        <h3>{item}</h3>
8        <p>Delicious fruit</p>
9      </div>
10    ))}
11  </div>
12);

Prevents components that inconsistently return different types, like a component or null. Encourages conditional rendering instead of “Maybe” component patterns.

1const MaybeButton({ enabled }) {
2	if (enabled) return <Button />;
3	return null;
4}

This rule prevents using the transition CSS property completely. Using CSS transitions can interfere with React Spring's animation system, causing unexpected or broken animations. All animations and transitions should be handled through React Spring instead of native CSS transitions.

1<div style={{ transition: 'all 0.3s ease' }} />

This rule removes unnecessary wrapper <div> elements that don't provide meaningful structure or purpose. If a wrapper is only used for styling, that styling should be moved into the child component instead.

1<div>
2    <span>Text</span>
3</div>

Disallows keys where not needed or inappropriate, like static elements. Encourages correct key usage in dynamic lists.

1<div key="static">Hello</div>

Prevents trivial wrapper functions that simply call another function without adding logic. Encourages using direct references instead.

1function callFoo(...args) {
2    return foo(...args);
3}

Requires that style definitions be located in separate files, like .styles.ts or .css. This keeps component logic and styling concerns separated.

1// Comp.tsx
2const styles = {
3  big: { fontSize: 20 },
4};
5
6export default function Comp() {
7  return <div style={styles.big}>x</div>;
8}

Enforces alphabetical sorting of exports. Variables are listed before functions for clarity and consistency.

1export function b() {}
2export const a = 1;

This is just the same as the sort-keys ESLint rule with an addition. While it does enforce consistent key ordering within objects it also provides automatic fixing to sort keys alphabetically, the built in function for --fix rather than manual order changes.

1const obj = { zebra: 1, apple: 2, Beta: 3 };