SKY UX ESLint Plugin

14.2.2 verified Sat Apr 25 auth: no javascript

An ESLint plugin for SKY UX projects, providing lint rules for Angular TypeScript and HTML templates. Current stable version is 14.2.2 (released April 2026). It builds on angular-eslint and typescript-eslint, extending them with SKY UX-specific conventions. Key differentiators include rules for style public API (classnames, custom properties, SCSS variables), accessibility matchers, and schematics integration via @skyux-sdk/testing. Requires @angular-eslint/bundled-angular-compiler, @angular-eslint/eslint-plugin-template, @angular-eslint/utils, and @typescript-eslint/utils as peer dependencies. Follows Angular 21 and TypeScript 8.x patterns, enforcing SKY UX design system guidelines.

Common errors

error Error: Failed to load plugin 'skyux-eslint' ... Cannot find module 'skyux-eslint' ↓

cause Missing or mismatched installation of skyux-eslint. Common if not added via ng add.

fix

Run 'ng add skyux-eslint' or 'npm install skyux-eslint --save-dev' and ensure peer dependencies are installed.

error Configuration for rule 'skyux-eslint/no-deprecated-classes' is invalid: Value "error" is not allowed. ↓

cause Using string severity instead of numeric or wrong rule name. Some rules expect 2 for error, 1 for warn.

fix

Use numeric severity: ['skyux-eslint/no-deprecated-classes', 2] or ['error'] is not valid; must be ['skyux-eslint/no-deprecated-classes', 'error'].

error Parsing error: Unexpected token ... in template expression ↓

cause Angular template parser version mismatch between Angular CLI and @angular-eslint bundled compiler.

fix

Update @angular-eslint/bundled-angular-compiler to match your Angular version: npm install @angular-eslint/bundled-angular-compiler@^21.2.0

error TypeError: skyux.configs is not iterable ↓

cause Using spread operator on skyux.configs.tsRecommended without importing skyux correctly.

fix

Ensure default import: import skyux from 'skyux-eslint'; then use ...skyux.configs.tsRecommended. Do not import { configs }.

Warnings

breaking skyux-eslint v14 only supports ESLint flat config (eslint.config.mjs). Legacy .eslintrc format is no longer supported. ↓

fix Migrate to flat config using eslint.config.mjs as shown in the quickstart. Remove any .eslintrc files.

gotcha The plugin relies on tseslint.config() for configuration. Using plain ESLint config arrays or other config creators may cause rules not to load. ↓

fix Ensure you use tseslint.config() to wrap your config arrays. Import from 'typescript-eslint' and use that.

deprecated Some style-related rules (e.g., no-sky-theme-imports) moved to skyux-stylelint. They remain aliased here but will be removed in v15. ↓

fix Migrate style rules to skyux-stylelint plugin. Use 'skyux-stylelint' for stylelint configurations.

gotcha The peer dependency @angular-eslint/bundled-angular-compiler must match the version of Angular used. Incompatible versions cause template parsing errors. ↓

fix Ensure @angular-eslint/bundled-angular-compiler is at version ^21.2.0 for Angular 21. Use npm ls to check versions.

Install

npm install skyux-eslint

yarn add skyux-eslint

pnpm add skyux-eslint

Imports

skyux
wrong
```
const skyux = require('skyux-eslint')
```
correct
```
import skyux from 'skyux-eslint'
```
Default import is the preferred and only supported pattern. CommonJS require is not supported in ESLint flat config.
configs
```
import skyux from 'skyux-eslint';
const { configs } = skyux;
```
Access configs via the default export. Direct import of configs is not an exported member.
tseslint.configs.recommended
```
import tseslint from 'typescript-eslint';
...tseslint.configs.recommended
```
skyux-eslint configs are meant to be spread after tseslint.configs.recommended in tseslint.config() arrays. Not using tseslint.config() will cause errors.

Quickstart

Flat config setup using tseslint.config() with skyux-eslint configs for TS and HTML files, including recommended Angular rules.

// @ts-check
import eslint from '@eslint/js';
import angular from 'angular-eslint';
import skyux from 'skyux-eslint';
import tseslint from 'typescript-eslint';

export default tseslint.config(
  {
    files: ['**/*.ts'],
    extends: [
      eslint.configs.recommended,
      ...tseslint.configs.recommended,
      ...tseslint.configs.stylistic,
      ...angular.configs.tsRecommended,
      ...skyux.configs.tsRecommended,
    ],
    processor: angular.processInlineTemplates,
    rules: {
      '@angular-eslint/component-class-suffix': ['error', { suffixes: ['Component', 'Page'] }],
    },
  },
  {
    files: ['**/*.html'],
    extends: [
      ...angular.configs.templateRecommended,
      ...angular.configs.templateAccessibility,
      ...skyux.configs.templateRecommended,
    ],
    rules: {},
  },
);