{"library":"markuplint-angular-parser","title":"Markuplint Angular Parser","description":"markuplint-angular-parser is an official parser plugin for the `markuplint` HTML linter, specifically designed to understand Angular template syntax. It enables `markuplint` to accurately parse and lint `.html` files containing Angular-specific constructs such as interpolations (`{{...}}`), property bindings (`[...]`), event bindings (`(...)`), and structural directives (`*ngIf`, `*ngFor`). The current stable version is `3.0.2`, and its release cycle is closely tied to the major versions of `markuplint`, with patch releases addressing bug fixes. A key differentiator is its deep integration with `markuplint`'s architecture, providing robust linting capabilities for Angular projects by correctly interpreting template expressions and preventing false positives or missed errors that generic HTML parsers might encounter. It primarily serves as a configuration entry for `markuplint`, rather than a library for direct programmatic use.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install markuplint-angular-parser"],"cli":{"name":"markuplint","version":null}},"imports":["import AngularParser from 'markuplint-angular-parser';","import type { AngularParserOptions } from 'markuplint-angular-parser';","import { version } from 'markuplint-angular-parser';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import { readFileSync, writeFileSync } from 'node:fs';\nimport { resolve } from 'node:path';\nimport { lint } from 'markuplint';\n\nconst angularTemplatePath = resolve(__dirname, 'src/app/my-component/my-component.component.html');\nconst angularTemplateContent = readFileSync(angularTemplatePath, 'utf8');\n\n// Minimal .markuplintrc.json equivalent for programmatic use\nconst config = {\n  parser: {\n    '.html$': 'markuplint-angular-parser'\n  },\n  rules: {\n    'attr-validate': true,\n    'require-accessible-name': true\n  }\n};\n\nasync function runLint() {\n  console.log(`Linting file: ${angularTemplatePath}`);\n  try {\n    const results = await lint({\n      sourceCodes: [\n        {\n          url: angularTemplatePath,\n          extension: 'html',\n          source: angularTemplateContent\n        }\n      ],\n      config: config\n    });\n\n    if (results[0] && results[0].violations.length > 0) {\n      console.error('Linting violations found:');\n      results[0].violations.forEach(violation => {\n        console.error(`  - [${violation.severity}] ${violation.message} (line: ${violation.line}, col: ${violation.col})`);\n      });\n      process.exit(1);\n    } else {\n      console.log('No linting violations found.');\n    }\n  } catch (error) {\n    console.error('An error occurred during linting:', error);\n    process.exit(1);\n  }\n}\n\n// Example Angular HTML file (src/app/my-component/my-component.component.html)\n// <div *ngIf=\"showContent\">\n//   <span [attr.data-id]=\"itemId\" (click)=\"doSomething()\">{{ title | uppercase }}</span>\n//   <img src=\"\" alt=\"Missing alt text\">\n// </div>\n\nrunLint();","lang":"typescript","description":"Demonstrates programmatic linting of an Angular HTML template using markuplint-angular-parser and common rules.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}