Aurelia Lint

This is a linter for aurelia template files to detect common mistakes.

Configuration

// aurelia-lint.json5
{
	// Array of file paths to extend from:
	extends: [
		"node_modules/some-packages/aurelia-lint.json5",
	],

	// The root directory of sources in this project:
	// (This is used to correctly resolve view resources)
	srcRoot: "./src",

	// Array of glob patterns for files to lint:
	// (See https://www.npmjs.com/package/picomatch)
	include: [
		"./src/**/*.html",
	],

	// An object with rules and configuration options:
	rules: {
		"rule-1": "error",
		"rule-2": "warn",
		"rule-3": "info",
		"rule-4": ["error", { ...options }],
		"rule-5": { ...options },
	},
}

Usage

npx naw-aurelia-lint ...

• --config <filename> - Specify a config filename. Default is ./aurelia-lint.json5
• --watch - Lint and watch for changes.
• --no-color - Disable colored output.

Disabling Rules

Rules can be temporarily disabled via html comments:

Disable for the next line:

<!-- aurelia-lint-disable-line example-rule -->

Disable for a range of lines:

<!-- aurelia-lint-disable example-rule -->
...
<!-- aurelia-lint-enable example-rule -->

Or for the entire file:

<!-- aurelia-lint-disable example-rule -->
...
...

Optionally, disable comments can have multiple lines and multiple disable instructions or explanations:

<!--
	aurelia-lint-disable example-rule
	aurelia-lint-disable second-rule
	Example rule is disabled because...
-->

Builtin Rules

attribute-usage

Require or disallow attributes on specific elements. This rule automatically ignores suffixes like .bind.

rules: {
	"attribute-usage": {
		elements: {
			"example-element": {
				// Disallow the use of specific attributes:
				disallow: ["id", "title"],

				// Require specific attributes to be present:
				require: ["value"],
			},

			// Slashes can be used to target specifically nested elements:
			"list/list-column": { ... },
		}
	}
}

editorconfig-format

Ensure that all template files are correctly formatted according to the respective .editorconfig file. This rule validates indentation, line endings and trailing whitespace.

element-nesting

Allow or disallow specific element children.

rules: {
	"element-nesting": {
		elements: {
			"text-block": {
				categories: ["block"],

				// Either allow only specific elements:
				allow: [
					// Allows <example-element>:
					"example-element",

					// Allows all elements that have the "inline" category:
					"@inline"
				],
				// or disallow specific elements:
				disallow: [...]

				// Disallow text content:
				// - Text content is allowed by default.
				// - Whitespace is always ignored.
				allowText: false,
			},

			"span": {
				categories: ["inline"],
			},
			"b": {
				categories: ["inline"],
			},

			// Slashes can be used to target specifically nested elements:
			"list/list-column": { ... }
		}
	},
}

html-custom-element-compat

Enforce compatibility with the html custom element spec by enforcing valid custom element names. This prevents accidentally using semantic elements as custom element names like <button> or <details>.

rules: {
	"html-custom-element-compat": {
		// An array of elements to ignore:
		// (Builtin aurelia elements are ignored automatically)
		ignore: [
			"something",
		]
	}
}

no-dead-templates

Require <template> elements to have at least one of the following attributes: "id", "if", "else", "repeat", "replace-part"

no-duplicate-requires

Ensure that there are no duplicate <require from="..."> elements.

no-invalid-bindings

Ensure that there are no bindings with syntax that can not be parsed by aurelia.

require-view-resources

Ensure that all elements, binding behaviors and value converters are either global or have an associated <require from="..."> element.

rules: {
	"require-view-resources": {
		// An array of elements to ignore:
		// (Builtin aurelia elements are ignored automatically)
		ignoreElements: [
			"global-element",
			"div",
			"span",
			"button",

			// Slashes can be used to target specifically nested elements:
			"list/list-column",
			"list/list-column/header",

			...
		],

		// An array of value converters to ignore:
		ignoreValueConverters: [
			"globalValueConverter",
			...
		],

		// An array of binding behaviors to ignore:
		// (Builtin aurelia binding behaviors are ignored automatically)
		ignoreBindingBehaviors: [
			"globalBindingBehavior",
			...
		],
	},
},