quicklint-react
v1.0.2
Published
Unified code quality orchestrator for React — ESLint, Prettier, Husky, Commitlint & SonarQube analysis in one package with zero configuration.
Maintainers
Readme
⚡ quicklint
Unified code quality orchestrator for React — ESLint, Prettier, Husky, Commitlint & SonarQube analysis in one package with zero configuration.
Why quicklint?
Managing code quality across React projects is painful:
- Multiple packages to install (
eslint,prettier,husky,@commitlint/cli, etc.) - Multiple config files (
eslint.config.js,.prettierrc,.commitlintrc, etc.) - Version mismatches across projects
- SonarQube requires a cloud server or VS Code plugin
quicklint solves all of this with one install, one config file, zero overhead.
npm install quicklint-react --save-dev
npx quicklint initThat's it. Your project now has:
- ✅ ESLint with React + TypeScript + SonarJS rules
- ✅ JSX accessibility checks (alt text, ARIA roles, etc.)
- ✅ Prettier with opinionated defaults + format-on-save
- ✅ Husky git hooks (pre-commit lint, commit message validation)
- ✅ Lint-Staged for blazingly fast pre-commit hooks
- ✅ Commitlint with conventional commits
- ✅ SonarQube-style analysis with HTML report generation
- ✅ IDE integration (VS Code, IntelliJ, WebStorm) — linting works in real-time
Quick Start
# Install
npm install quicklint-react --save-dev
# Initialize (creates config, installs deps, sets up hooks & IDE)
npx quicklint init
# Run all quality checks
npx quicklint check
# Lint only
npx quicklint lint
# Format code
npx quicklint format
# Generate SonarQube report
npx quicklint reportCommands
| Command | Description |
| ------------------------------------ | ------------------------------------------------------ |
| quicklint init | Scaffold config file, install deps, set up hooks & IDE |
| quicklint lint | Run ESLint + SonarJS analysis |
| quicklint lint --fix | Auto-fix lint issues |
| quicklint lint --staged | Only lint staged files (for pre-commit hooks) |
| quicklint format | Format all files with Prettier |
| quicklint format --check | Check formatting without writing |
| quicklint check | Run all quality checks (lint + format + SonarQube) |
| quicklint report | Generate SonarQube-style HTML report |
| quicklint report -f json | Generate JSON report |
| quicklint report -f both | Generate both HTML and JSON |
| quicklint commitlint --edit <file> | Validate commit message (used by hooks) |
| quicklint eject | Remove all config files and uninstall the package |
Configuration
quicklint works out of the box with zero configuration. If you need to customize, edit quicklint.config.js:
/** @type {import('quicklint-react').QuickLintConfig} */
export default {
eslint: {
enabled: true,
react: true,
typescript: true,
rules: {
"no-console": "warn",
},
ignorePatterns: ["node_modules", "dist", "build"],
},
prettier: {
semi: true,
singleQuote: true,
trailingComma: "all",
tabWidth: 2,
printWidth: 100,
},
commitlint: {
enabled: true,
rules: {
// Override conventional commit rules
},
},
sonarqube: {
enabled: true,
rules: {
// Override SonarJS rules
},
report: {
format: "html", // 'html', 'json', or 'both'
outputDir: "./reports",
},
},
husky: {
enabled: true,
hooks: {
"pre-commit": "npx lint-staged",
"commit-msg": 'npx quicklint commitlint --edit "$1"',
},
},
lintStaged: {
enabled: true,
concurrent: true,
config: {
"*.{js,jsx,ts,tsx}": ["eslint --fix", "prettier --write"],
"*.{json,md,html,yml,yaml}": ["prettier --write"],
},
},
ide: {
generateConfigs: true,
},
};Only specify what you want to override — everything else uses production-ready defaults.
⚠️ After changing Prettier, Husky, or IDE settings in
quicklint.config.js, you must runnpx quicklint initagain to synchronize the generated config files with your project.
💡 After changing ESLint or SonarQube rules, restart the ESLint server in your IDE (
Ctrl+Shift+P→ "ESLint: Restart ESLint Server") for the changes to take effect.
How IDE Integration Works
When you run quicklint init, it generates thin proxy config files and configures your editor:
| Generated File | Purpose |
| ------------------------- | ------------------------------------------------- |
| eslint.config.mjs | Re-exports ESLint + SonarJS config from quicklint |
| .vscode/settings.json | Enables format-on-save, ESLint flat config |
| .vscode/extensions.json | Recommends ESLint + Prettier extensions |
The eslint.config.mjs proxy is intentionally short — a few lines that import from quicklint:
import { loadConfig, buildEslintConfig } from "quicklint-react";
const config = await loadConfig();
export default await buildEslintConfig(config);This gives your IDE real-time ESLint + SonarJS feedback and Prettier format-on-save with no additional setup.
Tip: These files are safe to commit if you want consistent IDE behavior across the team.
Troubleshooting IDE Integration
1. ESLint is crashing or not working immediately after init
When you run npx quicklint init, it installs quicklint-react as a dev dependency. If your IDE was already open, the ESLint server might try to read the config before the installation finishes and crash.
Fix: Reload your IDE window (VS Code: Ctrl+Shift+P → "Developer: Reload Window" or "ESLint: Restart ESLint Server").
2. I changed quicklint.config.js but the IDE behavior didn't update
The ESLint language server caches configurations heavily for performance. It does not auto-detect changes to our custom quicklint.config.js file.
Fix: Restart the ESLint server (Ctrl+Shift+P → "ESLint: Restart ESLint Server") or reload your IDE window.
SonarQube Analysis
quicklint includes eslint-plugin-sonarjs (200+ rules by SonarSource) and runs analysis locally — no server needed.
# Run analysis and generate HTML report
npx quicklint report
# The report is saved to ./reports/sonarqube-report.htmlThe report categorizes issues as:
- 🐛 Bugs — code that is demonstrably wrong
- 🔒 Vulnerabilities — security-related issues
- 🔧 Code Smells — maintainability issues
Ejecting
If you want to remove quicklint from your project:
# Preview what will be removed
npx quicklint eject --dry-run
# Remove all config files and uninstall
npx quicklint eject
# Remove config files but keep peer dependencies installed
npx quicklint eject --keep-depsThis removes all generated config files (quicklint.config.js, eslint.config.mjs, .husky/) and uninstalls quicklint along with its peer dependencies.
Programmatic API
import {
loadConfig,
runEslint,
checkFormatting,
runSonarAnalysis,
} from "quicklint-react";
const config = await loadConfig();
// Run ESLint
const lintResult = await runEslint(config);
// Check formatting
const formatResult = await checkFormatting(config);
// SonarQube analysis
const sonarResult = await runSonarAnalysis(config);What's Included
| Tool | Version | Purpose | | ------------------------- | ------- | ----------------------------- | | ESLint | ^9.20 | JavaScript/TypeScript linting | | Prettier | ^3.5 | Code formatting | | Husky | ^9.1 | Git hooks | | Lint-Staged | ^15.2 | Fast pre-commit formatting | | Commitlint | ^19.6 | Commit message validation | | eslint-plugin-sonarjs | ^3.0 | SonarQube rules (200+) | | eslint-plugin-react | ^7.37 | React-specific rules | | eslint-plugin-react-hooks | ^5.1 | React hooks rules | | eslint-plugin-jsx-a11y | ^6.0 | JSX accessibility rules | | typescript-eslint | ^8.24 | TypeScript support |
All versions are managed together. Minor upgrades happen automatically. Major upgrades of individual tools are released as major versions of quicklint.
Requirements
- Node.js >= 18
- Git (for Husky hooks)
License
MIT
