eslint-plugin-no-interpolation-spacing

A custom ESLint plugin to enforce no spacing between Angular-style interpolations ({{ }}) and HTML elements, ensuring clean and consistent coding standards for your Angular templates.

---

Installation

Install the plugin using npm:

1npm install eslint-plugin-no-interpolation-spacing --save-dev

Or using yarn:

1yarn add eslint-plugin-no-interpolation-spacing --dev

Usage

Add the Plugin to Your ESLint Configuration

Add no-interpolation-spacing to your ESLint configuration file. Below is an example using .eslintrc.json:

1{
2    "plugins": ["no-interpolation-spacing"],
3    "rules": {
4        "no-interpolation-spacing/no-space-between-interpolation-and-element": "error"
5    }
6}

Or if you use eslint.config.js:

1const noInterpolationSpacingPlugin = require('eslint-plugin-no-interpolation-spacing');
2
3module.exports = {
4  plugins: {
5    'no-interpolation-spacing': noInterpolationSpacingPlugin,
6  },
7  rules: {
8    'no-interpolation-spacing/no-space-between-interpolation-and-element': 'error',
9  },
10};

Configuration

This plugin is primarily designed for Angular templates and HTML files. Make sure your ESLint configuration targets .html files.

Example in eslint.config.js:

1module.exports = [
2  {
3    files: ['**/*.html'], // Apply only to HTML files
4    plugins: {
5      'no-interpolation-spacing': require('eslint-plugin-no-interpolation-spacing'),
6    },
7    rules: {
8      'no-interpolation-spacing/no-space-between-interpolation-and-element': 'error',
9    },
10  },
11];
12

Rule no-space-between-interpolation-and-element

This rule ensures there are no spaces or newlines between Angular-style interpolations ({{ }}) and adjacent elements in HTML files.

Example:

✅ Correct:

1<div>{{value}}</div>
2<span>Hello {{name}}</span>

❌ Incorrect:

1<div> {{value}}</div>
2<span>Hello {{ name }}</span>

Contributing

We welcome contributions! If you'd like to contribute, follow these steps:

• Fork the repository.
• Make your changes.
• Submit a pull request.

Changelog

See Github Releases for realease notes and changelog.

---

License

This project is licensed under the MIT License. See the LICENSE file for details.