How to Format and Lint code in 2023

Updated on
•2 min read
•
#nodejs

I always loved to use Prettier when coding nodejs related projects. I always wanted to get into ESLint, but never got used to it, maybe because I didn't like the tons of configuration options and plugins nor the huge size of dependencies.

But now, there is Rome!

When I was looking for a lightweight alternative for Prettier and ESLint I found the tool I never heard before.

Rome unifies your development stack by combining the functionality of separate tools.

What I really like about Rome:

  • Lightweight in comparison to Prettier & ESLint (Rome v11.0.0 is 24.76 MiB)
  • Fast (see benchmark)

    ~25x Faster than Prettier when formatting 85,000 lines of code.

  • Like Deno it includes all linting rules, no tons of additional deps
  • The documentation is straight forward
  • The playground is great for trying out options
  • Easy to migrate from Prettier & ESLint
  • Has a Rome VS Code extension
  1. Get the Rome VS Code extension
  2. Install rome with your preferred package manager
  3. Configure VS Code to use Rome as default formatter
.vscode/settings.json
{
	"editor.formatOnSave": true,
	"editor.codeActionsOnSave": {
		"source.organizeImports.rome": true
	},
	"[javascript][javascriptreact][typescript][typescriptreact]": {
		"editor.defaultFormatter": "rome.rome"
	},
	"[json][jsonc][markdown]": {
		"editor.defaultFormatter": "vscode.json-language-features"
	},
	"[css][scss][less]": {
		"editor.defaultFormatter": "vscode.css-language-features"
	}
}
  1. Create a rome.json (here is mine):
rome.json
{
  "$schema": "./node_modules/rome/configuration_schema.json",
  "formatter": {
    "enabled": true,
    "formatWithErrors": false,
    "indentSize": 2,
    "indentStyle": "space",
    "lineWidth": 80,
    "ignore": []
  },
  "javascript": {
    "formatter": {
      "quoteStyle": "single",
      "quoteProperties": "asNeeded",
      "semicolons": "asNeeded",
      "trailingComma": "es5"
    }
  },
  "linter": {
    "enabled": true,
    "ignore": [
      "dist"
    ],
    "rules": {
      "recommended": true
    }
  }
}
  1. Add the scripts to package.json
"scripts": {
  "fmt": "rome format src --write",
  "lint": "rome check src"
}
  1. Enjoy blazing fast Rome!

We just learned that Rome is a great alternative formatter & linter in 2023!

We should keep an eye on the rome dev blog, since there is much more planed for the future.

Thanks for reading!

Helpful Resources: