@shufo/prettier-plugin-blade

The @shufo/prettier-plugin-blade plugin supports standard Prettier options as well as specific Blade-related configuration keys. You can configure these in your .prettierrc or equivalent Prettier configuration file.

Standard Prettier Options

These options define the basic formatting behavior:

• tabWidth: Number of spaces per tab (default: 4).
• printWidth: Maximum line width (default: 120).
• singleQuote: Use single quotes for strings (default: true).

Blade-Specific Options

These options control how Blade templates and HTML/PHP elements are formatted.

Additional configuration for Blade template formatting.

Control the order of HTML attributes using sortHtmlAttributes and customHtmlAttributesOrder.

sortHtmlAttributes values:

• none (default)
• alphabetical
• code-guide
• idiomatic
• vuejs
• custom

customHtmlAttributesOrder usage: When sortHtmlAttributes is set to custom, provide a comma-separated list of attribute names or regex patterns. Example: "id, aria-.+, class, src".

{
  "sortHtmlAttributes": "custom",
  "customHtmlAttributesOrder": "id, aria-.+, class, src"
}

Detailed settings for controlling attribute wrapping behavior.

Automatically sort Tailwind CSS classes within your templates.

The plugin supports the Blade language. It is identified by the .blade.php file extension and uses the blade parser. This metadata allows Prettier to automatically associate Blade files with this plugin.

export const languages: SupportLanguage[] = [
	{
		name: "Blade",
		parsers: ["blade"],
		since: "1.0.0",
		extensions: [".blade.php"],
		tmScope: "source.blade.php",
		aceMode: "text",
		linguistLanguageId: 33,
		vscodeLanguageIds: ["blade"],
	},
];

Configure how HTML tag attributes are wrapped using the wrapAttributes option.

Available values:

• auto (default)
• force
• force-aligned
• force-expand-multiline
• aligned-multiple
• preserve
• preserve-aligned

{
  "wrapAttributes": "force-aligned"
}

The blade-format printer is responsible for taking the Blade AST and converting it back into formatted source code. It uses the print function to perform the actual code generation.

export const printers: { [k: string]: Printer } = {
	"blade-format": {
		print,
	},
};

The blade parser is responsible for converting Blade source code into an Abstract Syntax Tree (AST) with the format blade-format. It implements locStart and locEnd to provide node location information based on the start and end properties of the AST nodes.

export const parsers: { [k: string]: Parser } = {
	blade: {
		parse,
		astFormat: "blade-format",
		locStart(node: any) {
			return node.start;
		},
		locEnd(node: any) {
			return node.end;
		},
	},
};