Opinionated oxlint plugin for React/Preact development.
npm install --save-dev holoflash-lint oxlintAdd the following to your .oxlintrc.json file:
{
"jsPlugins": ["holoflash-lint"],
"rules": {
"holoflash-lint/prefer-function-declaration": "warn"
}
}# Check for issues
npx oxlint
# Automatically fix issues (experimental)
npx oxlint --fix--fix feature is experimental and still being refined. While it works well in most cases, it may occasionally produce unexpected formatting or miss edge cases. Always review the changes after running --fix and consider running your code formatter afterward.
Enforces the use of function declarations for JSX components instead of arrow functions.
Function declarations offer several practical benefits for component definitions:
- Better readability: Function declarations are easier to distinguish from regular variables and other code
- Hoisting flexibility: You can define functions after they're used, providing more organizational freedom
- Improved debugging: Function names appear more clearly in error stack traces and React/Preact DevTools
- Explicit exports: You can export the function on the same line (
export function MyComponent()) - Clear intent:
function MyComponent()clearly signals "this is a component" to other developers
While this is partly a matter of style preference, this plugin helps use function declarations for components and reserving arrow functions for callbacks, event handlers, and inline functions creates a more consistent and maintainable codebase.
❌ Incorrect:
const MyComponent = () => {
return <div>Hello World</div>;
};
const AnotherComponent = () => <span>Content</span>;✅ Correct:
function MyComponent() {
return <div>Hello World</div>;
}
function AnotherComponent() {
return <span>Content</span>;
}This rule has no options.
- Node.js >= 20.0.0
- oxlint >= 1.22.0
Issues and pull requests are welcome on the GitHub repository.
MIT