@dunggramer/biomejs-config
Advanced tools
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.
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/biome
Create a biome.jsonc file in your project root:
{
"$schema": "https://biomejs.dev/schemas/latest/schema.json",
"extends": ["@dunggramer/biomejs-config"]
}
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"
}
}
}
}
]
}
@apply, @theme, etc.)<br />, <img />)This configuration enables comprehensive linting across multiple categories:
Prevents common programming errors and enforces correct code patterns:
Protects against common security vulnerabilities:
Enforces consistent code style:
Reduces code complexity:
Ensures web accessibility:
Beta features for improved DX:
className, classList, clsx(), cn(), cva(), tw(), twMerge() for cleaner diffsSee CONFIGURATION.md for detailed explanations of all rules.
The config includes intelligent code organization:
The config includes intelligent overrides for specific file types:
*.test.*, *.spec.*)noExplicitAny rule for flexibility in tests*.config.*, vite.config.ts)tsconfig.json, tsconfig.*.json)compilerOptions first)*.json5).all-contributorsrc)Pre-configured global variables for testing:
cy, Cypress, before, context, assert.gitignore patternsmainnode_modules, .pnpm, .yarn, .npmdist, build, .next, .nuxt, .svelte-kit, etc..turbo, .parcel-cache, .vercel, .netlifycoverage, playwright-report, test-results# 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
FAQs
The shareable configuration for Biome in your project
The npm package @dunggramer/biomejs-config receives a total of 6 weekly downloads. As such, @dunggramer/biomejs-config popularity was classified as not popular.
We found that @dunggramer/biomejs-config demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
/Research
Socket uncovered 17 malicious npm and PyPI packages typosquatting Paysafe, Skrill, and Neteller SDKs to steal developer secrets.
Security News
Node.js is debating whether AI-driven security report volume warrants moving more vulnerability reports into public workflows.
Security News
PolinRider expands across npm, Packagist, Go modules, and Chrome extensions, using hidden loaders to target developer environments.