no-typos

no-typos rule

Detect common typos in React component properties and lifecycle methods. This rule is part of eslint-plugin-react-features.

Quick SummaryCopy Anchor Link

Rule DetailsCopy Anchor Link

Detects misspellings of React's class-component API in a class component (a class extending React's Component or PureComponent, by binding). React calls lifecycles and reads statics by exact name, so a misspelt one silently never runs.

Reported:

Reading a static (Card.propTypes, PropTypes.string) is never reported, and neither is any class that is not a React component.

ExamplesCopy Anchor Link

❌ IncorrectCopy Anchor Link

class MyComponent extends React.Component {
  // Typo in lifecycle
  componentDidUpate() {}  // Should be componentDidUpdate
  componentWillUnmout() {}  // Should be componentWillUnmount
  
  // Typo in static property
  static PropTypes = {};  // Should be propTypes (lowercase p)
}

✅ CorrectCopy Anchor Link

class MyComponent extends React.Component {
  static propTypes = {};
  static getDerivedStateFromProps() {
    return null;
  }
  componentDidUpdate() {}
  componentWillUnmount() {}
}

Configuration ExamplesCopy Anchor Link

Basic UsageCopy Anchor Link

{
  rules: {
    'react-features/no-typos': 'error'
  }
}

Related RulesCopy Anchor Link

• display-name - Component naming
• react-class-to-hooks - Migration to hooks

Further ReadingCopy Anchor Link

• React Component Lifecycle - React docs

Known False NegativesCopy Anchor Link

The rule reads class components only (a class extending React's Component or PureComponent, by binding). Not detected:

• statics assigned to a function component (Card.PropTypes = …): whether a function is a component is not decided here;
• misspellings other than a different letter case and the listed dropped letters (componentDidMoun);
• a class extending a Component the file never imports or declares.

Use this rule

npm install -D oxlint-plugin-react-features

{  "jsPlugins": ["oxlint-plugin-react-features"],  "rules": {    "react-features/no-typos": "error"  }}

import { defineConfig } from 'vite-plus';export default defineConfig({  lint: {    jsPlugins: ['oxlint-plugin-react-features'],    rules: {      'react-features/no-typos': 'error',    },  },});