CodeStyle

!npm version
!npm downloads
!GitHub
!build status

Comprehensive ESLint configuration for TypeScript and React projects with strict code quality rules.

Features

- ✅ ESLint 9+ with flat config format
- ✅ TypeScript support with strict rules
- ✅ React 19+ and React Hooks best practices
- ✅ Accessibility checks (jsx-a11y)
- ✅ Code style enforcement (@stylistic)
- ✅ Modern JavaScript standards

Included Plugins

This configuration includes and configures the following ESLint plugins:

- @eslint/js - Core ESLint JavaScript rules
- typescript-eslint - TypeScript-specific linting rules
- @stylistic/eslint-plugin - Code formatting and style rules
- eslint-plugin-react - React-specific linting rules
- eslint-plugin-react-hooks - Rules for React Hooks
- eslint-plugin-jsx-a11y - Accessibility rules for JSX (commented out, see config)

Installation

Install the package as a dev dependency:

``bash
npm install -D @labeg/code-style
`

Usage

$3

Create or update your eslint.config.js:

`javascript
import codeStyle from "@labeg/code-style";

export default [
...codeStyle,
{
// Your custom overrides
rules: {
// Override specific rules here
}
}
];
`

$3

`javascript
import nextVitals from "eslint-config-next/core-web-vitals";
import codeStyle from "@labeg/code-style";

export default [
...nextVitals,
...codeStyle,
{
rules: {
// Next.js specific overrides
"react/react-in-jsx-scope": "off"
}
}
];
`

$3

The configuration automatically works with TypeScript files (.ts, .tsx). Make sure you have typescript installed:

`bash
npm install -D typescript
`

Code Style Philosophy

$3

Lines should always end with an operator or semicolon to make it clear whether the statement continues. This saves reading time and prevents execution errors.

`typescript
// Bad - unclear if statement continues
let sample = sample.sample.sample
+ sample.sample.sample;

// Good - operator at end shows continuation
let sample = sample.sample.sample +
sample.sample.sample;
`

$3

Even for single-line statements, always use braces. This prevents bugs during refactoring and improves code clarity.

`typescript
// Bad
if (n > 10) alert("Bad");

// Good
if (n > 10) {
alert("Good");
}
`

$3

Use double quotes for consistency with other languages, and template literals for string interpolation.

`typescript
const message = "rolls";
const count = 5;

// Bad
const data = 'Sending "grandma" ' + count * 5 + ' ' + message + '.';

// Good
const data = Sending "grandma" ${count * 5} ${message}.;
``

$3

Optimal line length is 120 characters for readability across different monitors. Use 4-space indentation for clear nesting levels.

Security

For security concerns, please see our Security Policy.

Contributing

Contributions are welcome! Please see CONTRIBUTING.md for guidelines.

License

MIT © Eugene Labutin

Links

- npm package
- GitHub repository
- Issue tracker
- Changelog