@nette/eslint-plugin

An ESLint plugin with custom rules and shareable configuration for Nette-specific JavaScript and TypeScript linting, including support for Latte template files.

Installation

npm install --save-dev @nette/eslint-plugin eslint

For TypeScript support, you will also need these additional dependencies:

npm install --save-dev typescript typescript-eslint

For Latte template support (HTML files with embedded JavaScript), you will also need:

npm install --save-dev eslint-plugin-html

 <!---->

Features

This plugin provides custom rules and configurations to improve code quality:

Custom Rules

• no-this-in-arrow-except: Prevents using this inside arrow functions with configurable exceptions
• prefer-line-comments: Enforces line comments (//) over block comments (/* */) for single-line comments

Latte Template Support

• Latte Processor: Processes Latte template files to lint JavaScript code within templates
• File Type Support: .js.latte, .css.latte, .txt.latte, .latte files
• n:syntax="off": Respects syntax disable attribute in HTML elements

 <!---->

Usage

Add @nette/eslint-plugin to your ESLint configuration.

Using Recommended Configuration

// eslint.config.js
import nette from '@nette/eslint-plugin';
import { defineConfig } from 'eslint/config';

export default defineConfig([
	{
		extends: [nette.configs.recommended],
		// ...your other config items
	},
]);

Using Latte Configuration

The eslint-plugin-html plugin is used to check JavaScript inside <script> tags in HTML pages. This package provides you with a preprocessor that allows you to use Latte tags inside JavaScript, for example:

<script>
let name = {$name};
</script>

Use this configuration:

import nette from '@nette/eslint-plugin';
import pluginHtml from 'eslint-plugin-html';
import { defineConfig } from 'eslint/config';

export default defineConfig([
	{
		files: ['app/**/*.latte'],

		plugins: {
			html: pluginHtml,       // Enables eslint-plugin-html
		},
		processor: '@nette/latte',  // Enabled Latte preprocessor
	},
]);

Using TypeScript Configuration

Import from typescript entrypoint:

import nette from '@nette/eslint-plugin/typescript';

export default defineConfig([
	{
		extends: [nette.configs.typescript],
		// ...your other config items
	},
]);

Customizing Configuration

export default defineConfig([
	{
		extends: [nette.configs.customize({
			browser: true,    // Include browser globals (default: true)
			typescript: true, // Include TypeScript support (default: false)
		})],
		// ...your other config items
	},
]);

Using Rules

import nette from '@nette/eslint-plugin';
import { defineConfig } from 'eslint/config';

export default defineConfig([
	{
		plugins: {
			'@nette': nette
		},

		rules: {
			'@nette/no-this-in-arrow-except': 'error',
			'@nette/prefer-line-comments': 'error'
		},
	},
]);

 <!---->

Rule Details

no-this-in-arrow-except

Prevents using this in arrow functions with exceptions for specific cases. It has two modes:

1. Default mode (allowNestedInFunction: false):

   • Allows this in arrow functions only when they are callbacks in class methods or directly passed to function calls

2. Opt-in mode (allowNestedInFunction: true):

   • Also allows this in arrow functions when nested within any regular function

Example configuration:

{
	rules: {
		'@nette/no-this-in-arrow-except': ['error', { allowNestedInFunction: true }]
	}
}

prefer-line-comments

Enforces the use of line comments (//) instead of block comments (/* */) for single-line comments. Exceptions are made for:

• Multi-line block comments
• JSDoc comments (block comments starting with *)