{"id":20555,"library":"skyux-eslint","title":"SKY UX ESLint Plugin","description":"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.","status":"active","version":"14.2.2","language":"javascript","source_language":"en","source_url":"https://github.com/blackbaud/skyux","tags":["javascript","blackbaud","skyux","typescript"],"install":[{"cmd":"npm install skyux-eslint","lang":"bash","label":"npm"},{"cmd":"yarn add skyux-eslint","lang":"bash","label":"yarn"},{"cmd":"pnpm add skyux-eslint","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required for Angular template rule processing","package":"@angular-eslint/bundled-angular-compiler","optional":false},{"reason":"Provides base Angular template lint rules that skyux-eslint extends","package":"@angular-eslint/eslint-plugin-template","optional":false},{"reason":"Utility functions used by skyux-eslint Angular rules","package":"@angular-eslint/utils","optional":false},{"reason":"Required for TypeScript rule creation utilities","package":"@typescript-eslint/utils","optional":false}],"imports":[{"note":"Default import is the preferred and only supported pattern. CommonJS require is not supported in ESLint flat config.","wrong":"const skyux = require('skyux-eslint')","symbol":"skyux","correct":"import skyux from 'skyux-eslint'"},{"note":"Access configs via the default export. Direct import of configs is not an exported member.","symbol":"configs","correct":"import skyux from 'skyux-eslint';\nconst { configs } = skyux;"},{"note":"skyux-eslint configs are meant to be spread after tseslint.configs.recommended in tseslint.config() arrays. Not using tseslint.config() will cause errors.","symbol":"tseslint.configs.recommended","correct":"import tseslint from 'typescript-eslint';\n...tseslint.configs.recommended"}],"quickstart":{"code":"// @ts-check\nimport eslint from '@eslint/js';\nimport angular from 'angular-eslint';\nimport skyux from 'skyux-eslint';\nimport tseslint from 'typescript-eslint';\n\nexport default tseslint.config(\n  {\n    files: ['**/*.ts'],\n    extends: [\n      eslint.configs.recommended,\n      ...tseslint.configs.recommended,\n      ...tseslint.configs.stylistic,\n      ...angular.configs.tsRecommended,\n      ...skyux.configs.tsRecommended,\n    ],\n    processor: angular.processInlineTemplates,\n    rules: {\n      '@angular-eslint/component-class-suffix': ['error', { suffixes: ['Component', 'Page'] }],\n    },\n  },\n  {\n    files: ['**/*.html'],\n    extends: [\n      ...angular.configs.templateRecommended,\n      ...angular.configs.templateAccessibility,\n      ...skyux.configs.templateRecommended,\n    ],\n    rules: {},\n  },\n);","lang":"typescript","description":"Flat config setup using tseslint.config() with skyux-eslint configs for TS and HTML files, including recommended Angular rules."},"warnings":[{"fix":"Migrate to flat config using eslint.config.mjs as shown in the quickstart. Remove any .eslintrc files.","message":"skyux-eslint v14 only supports ESLint flat config (eslint.config.mjs). Legacy .eslintrc format is no longer supported.","severity":"breaking","affected_versions":">=14.0.0"},{"fix":"Ensure you use tseslint.config() to wrap your config arrays. Import from 'typescript-eslint' and use that.","message":"The plugin relies on tseslint.config() for configuration. Using plain ESLint config arrays or other config creators may cause rules not to load.","severity":"gotcha","affected_versions":">=14.0.0"},{"fix":"Migrate style rules to skyux-stylelint plugin. Use 'skyux-stylelint' for stylelint configurations.","message":"Some style-related rules (e.g., no-sky-theme-imports) moved to skyux-stylelint. They remain aliased here but will be removed in v15.","severity":"deprecated","affected_versions":">=14.0.0"},{"fix":"Ensure @angular-eslint/bundled-angular-compiler is at version ^21.2.0 for Angular 21. Use npm ls to check versions.","message":"The peer dependency @angular-eslint/bundled-angular-compiler must match the version of Angular used. Incompatible versions cause template parsing errors.","severity":"gotcha","affected_versions":">=14.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Run 'ng add skyux-eslint' or 'npm install skyux-eslint --save-dev' and ensure peer dependencies are installed.","cause":"Missing or mismatched installation of skyux-eslint. Common if not added via ng add.","error":"Error: Failed to load plugin 'skyux-eslint' ... Cannot find module 'skyux-eslint'"},{"fix":"Use numeric severity: ['skyux-eslint/no-deprecated-classes', 2] or ['error'] is not valid; must be ['skyux-eslint/no-deprecated-classes', 'error'].","cause":"Using string severity instead of numeric or wrong rule name. Some rules expect 2 for error, 1 for warn.","error":"Configuration for rule 'skyux-eslint/no-deprecated-classes' is invalid: Value \"error\" is not allowed."},{"fix":"Update @angular-eslint/bundled-angular-compiler to match your Angular version: npm install @angular-eslint/bundled-angular-compiler@^21.2.0","cause":"Angular template parser version mismatch between Angular CLI and @angular-eslint bundled compiler.","error":"Parsing error: Unexpected token ... in template expression"},{"fix":"Ensure default import: import skyux from 'skyux-eslint'; then use ...skyux.configs.tsRecommended. Do not import { configs }.","cause":"Using spread operator on skyux.configs.tsRecommended without importing skyux correctly.","error":"TypeError: skyux.configs is not iterable"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}