Shareable Biome configuration for JavaScript, TypeScript, and React projects
A comprehensive, opinionated Biome configuration that provides consistent code formatting and linting rules for modern JavaScript and TypeScript projects. This configuration emphasizes code quality, security, and maintainability while remaining flexible enough to customize for your specific needs.
- 🎯 Opinionated but flexible - Sensible defaults with easy customization
- ⚡️ Fast - Powered by Biome's Rust-based tooling
- 🔒 Security-focused - Strict rules for common security pitfalls
- 📦 React-ready - Includes React-specific linting rules
- 🧪 Test-friendly - Special configurations for test files
- 🎨 Consistent formatting - 2 spaces, single quotes, trailing commas
- 💅 CSS/Tailwind support - Full CSS formatting with Tailwind directives
- 🤖 Auto-organize - Imports, attributes, and class names sorted automatically
- 📝 Multi-language - JavaScript, TypeScript, CSS, HTML, JSON/JSONC support
Install the package along with Biome:
# Using npm
npm install -D @dunggramer/biomejs-config @biomejs/biome
# Using pnpm
pnpm add -D @dunggramer/biomejs-config @biomejs/biome
# Using yarn
yarn add -D @dunggramer/biomejs-config @biomejs/biomeCreate a biome.jsonc file in your project root:
Add scripts to your package.json:
{
"scripts": {
"format": "biome format --write .",
"lint": "biome lint .",
"check": "biome check --write ."
}
}That's it! Your project is now configured with comprehensive formatting and linting rules.
For the best developer experience, install the Biome VSCode extension and configure your .vscode/settings.json:
{
// Enable Biome as the default formatter
"editor.defaultFormatter": "biomejs.biome",
// Format on save
"editor.formatOnSave": true,
// Auto-fix on save
"editor.codeActionsOnSave": {
"source.organizeImports.biome": "explicit",
"source.fixAll.biome": "explicit",
"quickfix.biome": "explicit",
"addMissingImports": "explicit",
"source.action.useSortedAttributes.biome": "explicit",
"source.action.useSortedProperties.biome": "explicit",
},
// Disable other formatters to avoid conflicts
"[javascript]": {
"editor.defaultFormatter": "biomejs.biome"
},
"[javascriptreact]": {
"editor.defaultFormatter": "biomejs.biome"
},
"[typescript]": {
"editor.defaultFormatter": "biomejs.biome"
},
"[typescriptreact]": {
"editor.defaultFormatter": "biomejs.biome"
},
"[json]": {
"editor.defaultFormatter": "biomejs.biome"
},
"[jsonc]": {
"editor.defaultFormatter": "biomejs.biome"
},
"[css]": {
"editor.defaultFormatter": "biomejs.biome"
}
}Depending on your project type and team preferences, you may want to customize these settings:
If your repository uses master instead of main (or another branch):
{
"extends": ["@dunggramer/biomejs-config"],
"vcs": {
"defaultBranch": "master" // or "develop", "trunk", etc.
}
}The default allows console.log. For production apps, you may want stricter rules:
{
"extends": ["@dunggramer/biomejs-config"],
"linter": {
"rules": {
"suspicious": {
"noConsole": "error" // Block all console usage
// Or allow specific methods:
// "noConsole": { "level": "error", "options": { "allow": ["warn", "error"] } }
}
}
}
}If your team prefers named exports everywhere:
{
"extends": ["@dunggramer/biomejs-config"],
"linter": {
"rules": {
"style": {
"noDefaultExport": "error" // Enforce named exports
}
}
},
// Keep overrides for config files that require default exports
"overrides": [
{
"includes": ["**/*.config.*", "**/vite.config.ts", "**/*.stories.*"],
"linter": {
"rules": {
"style": { "noDefaultExport": "off" }
}
}
}
]
}For stricter TypeScript projects:
{
"extends": ["@dunggramer/biomejs-config"],
"linter": {
"rules": {
"suspicious": {
"noExplicitAny": "error" // Block 'any' type
},
"style": {
"noNonNullAssertion": "error" // Block '!' assertions
}
}
}
}For larger displays or narrower code style:
{
"extends": ["@dunggramer/biomejs-config"],
"formatter": {
"lineWidth": 120 // Or 80 for more conservative
},
"css": {
"formatter": {
"lineWidth": 120 // Keep CSS in sync
}
}
}Prevent barrel file imports or enforce modular lodash:
{
"extends": ["@dunggramer/biomejs-config"],
"linter": {
"rules": {
"style": {
"noRestrictedImports": {
"level": "error",
"options": {
"paths": {
"lodash": "Use lodash/<name> instead.",
"lodash-es": "Use lodash-es/<name> instead.",
"@/utils": "Import specific utilities, not the barrel file.",
"moment": "Use date-fns or dayjs instead."
}
}
}
}
}
}
}Different rules for different file types:
{
"extends": ["@dunggramer/biomejs-config"],
"overrides": [
{
"includes": ["**/scripts/**", "**/tools/**"],
"linter": {
"rules": {
"suspicious": {
"noConsole": "off" // Allow console in scripts
}
}
}
},
{
"includes": ["**/*.stories.*", "**/*.story.*"],
"linter": {
"rules": {
"suspicious": {
"noExplicitAny": "off" // Relax for Storybook files
}
}
}
}
]
}Add globals for your testing framework or environment:
{
"extends": ["@dunggramer/biomejs-config"],
"javascript": {
"globals": [
// Vitest
"describe", "it", "expect", "vi", "beforeEach", "afterEach",
// Jest
"jest",
// Node.js
"__dirname", "__filename"
]
}
}Project-specific build outputs or vendor code:
{
"extends": ["@dunggramer/biomejs-config"],
"files": {
"ignore": [
"**/generated/**", // Code generation output
"**/vendor/**", // Third-party code
"**/.docusaurus/**", // Docusaurus cache
"**/storybook-static/**" // Storybook build
]
}
}Keep manual control over import/key order in certain files:
{
"extends": ["@dunggramer/biomejs-config"],
"overrides": [
{
"includes": ["**/theme.ts", "**/constants.ts"],
"assist": {
"actions": {
"source": {
"organizeImports": "off",
"useSortedKeys": "off"
}
}
}
}
]
}- Indentation: 2 spaces
- Line width: 100 characters
- Quotes: Single quotes
- Trailing commas: ES5 (arrays, objects)
- Quote properties: Preserved
- Line width: 100 characters (matches JS/TS)
- Indentation: 2 spaces
- Tailwind directives: Supported (
@apply,@theme, etc.) - CSS Modules: Enabled
- Line comments: Allowed (for tooling)
- Self-closing void elements: Always (
<br />,<img />)
- Indentation: 2 spaces
- Comments: Allowed in JSONC files
- Trailing commas: Allowed
- TSConfig: Special handling with comments and trailing commas
This configuration enables comprehensive linting across multiple categories:
Prevents common programming errors and enforces correct code patterns:
- No unused variables or imports
- Proper React Hook dependencies
- No unreachable code
- Valid typeof checks
- And more...
Protects against common security vulnerabilities:
- No dangerouslySetInnerHTML misuse
- No global eval
- Enforces secure link targets
- XSS prevention
Enforces consistent code style:
- Use const when possible
- Prefer template literals
- Shorthand array type syntax
- Import type for TypeScript
- And more...
Reduces code complexity:
- No useless constructors or fragments
- Optional chaining preferred
- Literal keys over computed keys
- And more...
Ensures web accessibility:
- Button type attributes
- Keyboard event handlers
- Valid anchor usage
Beta features for improved DX:
- Sorted Tailwind classes: Auto-sort class names in
className,classList,clsx(),cn(),cva(),tw(),twMerge()for cleaner diffs
See CONFIGURATION.md for detailed explanations of all rules.
The config includes intelligent code organization:
- Auto-organize imports: Deduplicates and sorts import statements
- Sorted JSX/HTML attributes: Normalizes attribute order for stable diffs
- Sorted object keys: Alphabetizes object keys (where safe, see overrides)
- Sorted type properties: Consistent ordering in TypeScript types
The config includes intelligent overrides for specific file types:
- Relaxed
noExplicitAnyrule for flexibility in tests
- Allows default exports (commonly required by bundlers)
- Comments and trailing commas allowed
- Object key sorting disabled (preserves manual order like
compilerOptionsfirst)
- Object key sorting disabled (preserves conventional order)
- Double quotes enforced
- No trailing commas (spec compliance)
- Double quotes to match community conventions
Pre-configured global variables for testing:
- Cypress:
cy,Cypress,before,context,assert
- Git integration enabled
- Respects
.gitignorepatterns - Default branch:
main - Comprehensive ignore patterns for:
- Dependencies:
node_modules,.pnpm,.yarn,.npm - Build outputs:
dist,build,.next,.nuxt,.svelte-kit, etc. - Framework-specific:
.turbo,.parcel-cache,.vercel,.netlify - Testing artifacts:
coverage,playwright-report,test-results
- Dependencies:
# Format all files
pnpm format
# Check formatting without writing
biome format .# Lint with auto-fix
pnpm check
# Lint without auto-fix
pnpm lint# .github/workflows/ci.yml
- name: Check code quality
run: biome ci .Migrating from ESLint and Prettier? See our Migration Guide.
Contributions are welcome! Please read our Contributing Guide for details on our code of conduct and the process for submitting pull requests.
If you discover a security vulnerability, please see our Security Policy.
See FAQ.md for frequently asked questions.
MIT © DungGramer
Made with ❤️ by DungGramer
{ "$schema": "https://biomejs.dev/schemas/latest/schema.json", "extends": ["@dunggramer/biomejs-config"] }