Exploring Biome: A Guide to Installing and Using it in Visual Studio Code

Charu Srivastava

2024.05.08

Hi, this is Charu from Classmethod. In this blog, we will be learning about Biome.

Biome Formatter is a powerful tool designed to beautify and standardize your code within Visual Studio Code. When compared with prettier, it is stricter than Prettier parser.

Step 1: Installing Biome Formatter

  • Launch Visual Studio Code.
  • Navigate to the Extensions view by clicking on the square icon in the sidebar or pressing Ctrl+Shift+X.
  • Search for "Biome Formatter" in the Extensions Marketplace.
  • Click on the "Install" button next to the Biome Formatter extension.
  • If required, restart Visual Studio Code to activate the extension.
  • Run the following command in your terminal, to check if Biome is installed,

    • biome --help

    Step 2: Configuration

  • Creating biome.json file is recommended.
  • To create it automatically, run the following command in your root project directory,

    • pnpm biome init

  • After running the init command, you’ll now have a new biome.json file in your directory. It will look something like this,
    • {
	"$schema": "https://biomejs.dev/schemas/1.7.3/schema.json",
	"organizeImports": {
		"enabled": true
	},
	"linter": {
		"enabled": true,
		"rules": {
			"recommended": true
		}
	}
}
  • You can add the files you want to ignore, by adding those under the ignore tag provided by Biome. For example, I wanted to ignore all my cdk.out files, hence I added the following code:
    • "files":{
		"ignore": ["cdk.out"]
	},

    Step 3: Automate

  • I want Biome to format my files automatically, once I save them.
  • To do this, write the following code in your .vscode>settings.json file
    • {
	"editor.formatOnSave": true,
	"editor.defaultFormatter": "biomejs.biome",
	"editor.codeActionsOnSave": {
		"quickfix.biome": "explicit",
		"source.organizeImports.biome": "explicit"
	}
}
  • Add the following script in your package.json,
    • "scripts": {
		"lint": "pnpm biome check ."
	}
  • Your package.json should look like this,
    • {
	"name": "your_app",
	"version": "0.1.0",
	"scripts": {
		"lint": "pnpm biome check ."
	},
	"devDependencies": {
		"@biomejs/biome": "1.7.3"
	},
	"dependencies": {}
}

    Step 4: Run

  • Run the following statement(for pnpm) in your terminal to check if your setup is correct,

    • pn lint

    Conclusion:

    By following this guide, you've learned how to install and configure Biome Formatter, format your code effectively, explore advanced features, and integrate the extension seamlessly into your coding workflow.

    Thank you for reading!

    Happy Learning:)

    AWS