Rome VS Code Extension

Rome unifies your development stack by combining the functionality of separate tools. It uses a single configuration file, has fantastic performance, and works with any stack. This extension brings Rome to your editor so that you can:

• Format files on save or when issuing the Format Document command
• See lints while you type and apply code fixes
• Perform refactors

Installation

You can install the code extension by heading to the extension's Visual Studio Code Market Place page or from within VS Code by either:

• Open the extensions tab (View → Extensions) and search for Rome.
• Open the Quick Open Overlay (Ctrl/⌘+P or Go -> Go to File), enter ext install rome.rome, and hit enter.

Getting Started

Default Formatter

Configure Rome as the default formatter for supported files to ensure that VS Code uses Rome over other formatters that you may have installed. You can do so by opening a JavaScript or TypeScript and then:

• Open the Command Palette (Ctrl/⌘+⇧+P or View → Command Palette)
• Select Format Document With…
• Select Configure Default Formatter…
• Select Rome

You can also enable Rome for specific languages only:

• Open the settings.json: open the Command Palette(Ctrl/⌘+⇧+P) and select Preferences: Open User Settings (JSON)
• And set the editor.defaultFormatter to rome.rome for the desired language

{
	"editor.defaultFormatter": "<other formatter>",
	"[javascript]": {
		"editor.defaultFormatter": "rome.rome"
	}
}

This configuration sets Rome as the default formatter for JavaScript files. All other files will be formatted using <other formatter>

Configuration Resolution

The extension automatically loads the rome.json file from the workspace’s root directory.

Rome Resolution

The extension tries to use Rome from your project's local dependencies (node_modules/rome). We recommend adding Rome as a project dependency to ensure that NPM scripts and the extension use the same Rome version.

You can also explicitly specify the rome binary the extension should use by configuring the rome.lspBin setting in your editor options.

If the project has no dependency on Rome and no explicit path is configured, the extension uses the Rome version included in its bundle.

Usage

Format document

To format an entire document, open the Command Palette (Ctrl/⌘+⇧+P) and select Format Document.

To format a text range, select the text you want to format, open the Command Palette (Ctrl/⌘+⇧+P), and select Format Selection.

Format on save

Rome respects VS Code's Format on Save setting. To enable format on save, open the settings (File -> Preferences -> Settings), search for editor.formatOnSave, and enable the option.

Fix on save

Rome respects VS Code's Code Actions On Save setting. To enable fix on save, add "editor.codeActionsOnSave": { "quickfix.rome": true } in vscode settings.json.

Imports Sorting [Experimental]

The Rome VS Code extension has experimental support for imports sorting through the "Organize Imports" code action. By default this action can be run using the ⇧+Alt+O keyboard shortcut, or is accessible through the Command Palette (Ctrl/⌘+⇧+P) by selecting Organize Imports.

You can add the following to your editor configuration if you want the action to run automatically on save instead of calling it manually:

{
	"editor.codeActionsOnSave":{
		"source.organizeImports.rome": true
	}
}

Extension Settings

rome.lspBin

The rome.lspBin option overrides the Rome binary used by the extension. The workspace folder is used as the base path if the path is relative.

rome.rename

Enables Rome to handle renames in the workspace (experimental).

rome.requireConfiguration

Disables formatting, linting, and syntax errors for projects without a rome.json file. Requires Rome 12 or newer. Enabled by default.

Versioning

We follow the specs suggested by the official documentation:

Odd minor versions are dedicated to pre-releases, e.g. *.5.* . Even minor versions are dedicated to official releases, e.g. *.6.*.