Biome Over Eslint and Prettier

I’ve always been a fan of using Eslint and Prettier for maintaining format standards and promoting better coding practices in my side projects. Linting before pushing has been a lifesaver countless times. However, delving into the complexities of Eslint configurations for tasks like organizing imports, validating JSDoc, and enforcing camelCase can significantly slow down the process. Even with a MacBook Pro M3 Pro, I noticed that linting could still take a considerable amount of time.

I once tried Rome JS, but issues like server disconnections and inconsistent linting led to its eventual archiving in August 2023. Enter Biome JS, a promising alternative.

Install Biome

yarn add --dev --exact @biomejs/biome

Init Biome

yarn biome init

Install Editor Plugin

If you’re using VSCode like I am, there’s a Biome plugin you should definitely install. Here’s how to set it up:

VSCode Best Biome Settings:

Add these configurations to your .vscode/settings.json for automatic linting and formatting:

{  
  "editor.defaultFormatter": "biomejs.biome", 
  "editor.codeActionsOnSave": { 
    "source.organizeImports.biome": "explicit", 
    "source.fixAll.biome": "explicit", 
    "quickfix.biome": "explicit" 
  }, 
  "[typescript]": { 
    "editor.defaultFormatter": "biomejs.biome" 
  }, 
  "[typescriptreact]": { 
    "editor.defaultFormatter": "biomejs.biome" 
  } 
}

My Personal Biome Configuration for React-Native, Elysia, & React:

{ 
  "$schema": "https://biomejs.dev/schemas/1.9.4/schema.json", 
"vcs": { 
    "enabled": false, 
    "clientKind": "git", 
    "useIgnoreFile": false 
  }, 
  "files": { 
    "ignoreUnknown": false, 
    "ignore": [] 
  }, 
  "formatter": { 
    "enabled": true, 
    "indentStyle": "tab", 
    "indentWidth": 4 
  }, 
  "organizeImports": { 
    "enabled": true 
  }, 
  "linter": { 
    "enabled": true, 
    "rules": { 
      "recommended": true, 
      "correctness": { 
        "noUnusedImports": "warn" 
      }, 
      "suspicious": { 
        "noExplicitAny": "warn", 
        "noArrayIndexKey": "off" 
      }, 
      "nursery": { 
        "noNestedTernary": "warn" 
      }, 
      "style": { 
        "useImportType": "off", 
        "noUselessElse": "off" 
      } 
    } 
  }, 
  "javascript": { 
    "jsxRuntime": "reactClassic", 
    "formatter": { 
      "quoteStyle": "double" 
    } 
  } 
}

Conclusion

Switching to Biome from Eslint and Prettier has been straightforward. Biome claims to be approximately 25 times faster than Prettier and 15 times faster than ESLint, and I’ve noticed a substantial performance boost. While Eslint offers more customization options which might be necessary for some projects, Biome is actively being developed to include many of these features. It’s well-maintained and on a promising path to becoming a complete solution for both linting and formatting.

Try BanKan Board — The Project Management App Made for Developers, by Developers

If you’re tired of complicated project management tools with story points, sprints, and endless processes, BanKan Board is here to simplify your workflow. Built with developers in mind, BanKan Board lets you manage your projects without the clutter.

Key Features:

• No complicated processes: Focus on what matters without the overhead of traditional project management systems.
• Claude AI Assistant: Get smart assistance to streamline your tasks and improve productivity.
• Free to Use: Start using it without any upfront cost.
• Premium Features: Upgrade to unlock advanced functionality tailored to your team’s needs.

Whether you’re building a side project, managing a team, or collaborating on open-source software, BanKan Board is designed to make your life easier. Try it today!

Get Started with BanKan Board — It’s Free!