Prettier Razor Plugin

1.0.11-alpha.1 verified Sat Apr 25 auth: no javascript

Prettier plugin for formatting Razor (.cshtml) files used in ASP.NET Core MVC and Blazor. Current stable version is 1.0.11-alpha.1. Released irregularly as alpha. Key differentiator: brings consistent code formatting to Razor templates within the Prettier ecosystem, supporting directives like @code, @functions, and HTML/CSS/C# code segments. Alternatives include built-in Visual Studio formatters, but this plugin integrates with Prettier workflows and CI pipelines.

Common errors

error Cannot find module 'prettier-plugin-razor' ↓

cause Plugin not installed or not listed in Prettier plugins.

fix

npm install --save-dev prettier-plugin-razor

error Couldn't resolve parser "razor" ↓

cause Plugin not loaded or parser not specified in options.

fix

Add 'parser: "razor"' to Prettier configuration.

Warnings

gotcha Plugin is in alpha; breaking changes may occur between minor versions. ↓

fix Pin to exact version in package.json.

gotcha Only supports standalone Prettier, not integrations like ESLint or stylelint. ↓

fix Use Prettier CLI or API directly.

gotcha Does not support all Razor constructs; complex nesting may be misformatted. ↓

fix Check formatting output and raise issues on GitHub.

Install

npm install prettier-plugin-razor

yarn add prettier-plugin-razor

pnpm add prettier-plugin-razor

Imports

default

wrong

const plugin = require('prettier-plugin-razor')

correct

module.exports = { plugins: ['prettier-plugin-razor'] }

Not imported directly; configured in Prettier config.

Default

wrong

import razor from 'prettier-plugin-razor'

correct

import { prettier-plugin-razor } from 'prettier-plugin-razor'

Used as a plugin string, not a default import.

require

wrong

const razor = require('prettier-plugin-razor')

correct

const prettier = require('prettier'); prettier.format(code, { parser: 'razor', plugins: ['prettier-plugin-razor'] })

Plugin is specified in options, not required directly.

Quickstart

Configure Prettier to use the Razor plugin for .cshtml files.

// .prettierrc
{
  "plugins": ["prettier-plugin-razor"],
  "overrides": [{
    "files": "*.cshtml",
    "options": {
      "parser": "razor"
    }
  }]
}

// Install
// npm install --save-dev prettier prettier-plugin-razor