{"id":27705983,"url":"https://github.com/mysticatea/vue-eslint-parser","last_synced_at":"2025-04-26T05:01:46.544Z","repository":{"id":38338561,"uuid":"76510980","full_name":"vuejs/vue-eslint-parser","owner":"vuejs","description":"The ESLint custom parser for `.vue` files.","archived":false,"fork":false,"pushed_at":"2025-04-05T03:14:24.000Z","size":2294,"stargazers_count":468,"open_issues_count":20,"forks_count":79,"subscribers_count":10,"default_branch":"master","last_synced_at":"2025-04-25T03:15:35.220Z","etag":null,"topics":["eslint","eslint-custom-parser","javascript","single-file-component","static-code-analysis","vue","vuejs"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/vuejs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["ota-meshi","mysticatea"]}},"created_at":"2016-12-15T01:11:07.000Z","updated_at":"2025-04-19T14:13:05.000Z","dependencies_parsed_at":"2024-04-09T23:31:37.928Z","dependency_job_id":"cbf301ba-5397-48ac-b025-eeeac812a686","html_url":"https://github.com/vuejs/vue-eslint-parser","commit_stats":{"total_commits":385,"total_committers":15,"mean_commits":"25.666666666666668","dds":"0.36623376623376624","last_synced_commit":"b0e0ccc6d302bb40c5cb496528536bd355ee5151"},"previous_names":["mysticatea/vue-eslint-parser"],"tags_count":95,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vuejs%2Fvue-eslint-parser","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vuejs%2Fvue-eslint-parser/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vuejs%2Fvue-eslint-parser/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vuejs%2Fvue-eslint-parser/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vuejs","download_url":"https://codeload.github.com/vuejs/vue-eslint-parser/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250935454,"owners_count":21510552,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["eslint","eslint-custom-parser","javascript","single-file-component","static-code-analysis","vue","vuejs"],"created_at":"2025-04-26T05:01:14.048Z","updated_at":"2025-04-26T05:01:46.520Z","avatar_url":"https://github.com/vuejs.png","language":"TypeScript","funding_links":["https://github.com/sponsors/ota-meshi","https://github.com/sponsors/mysticatea"],"categories":["Awesome Vue.js [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome)","实用库"],"sub_categories":["Development Tools"],"readme":"# vue-eslint-parser\n\n[![npm version](https://img.shields.io/npm/v/vue-eslint-parser.svg)](https://www.npmjs.com/package/vue-eslint-parser)\n[![Downloads/month](https://img.shields.io/npm/dm/vue-eslint-parser.svg)](http://www.npmtrends.com/vue-eslint-parser)\n[![Build Status](https://github.com/vuejs/vue-eslint-parser/workflows/CI/badge.svg)](https://github.com/vuejs/vue-eslint-parser/actions)\n\nThe ESLint custom parser for `.vue` files.\n\n## ⤴️ Motivation\n\nThis parser allows us to lint the `\u003ctemplate\u003e` of `.vue` files. We can make mistakes easily on `\u003ctemplate\u003e` if we use complex directives and expressions in the template. This parser and the rules of [eslint-plugin-vue](https://github.com/vuejs/eslint-plugin-vue) would catch some of the mistakes.\n\n## 💿 Installation\n\n```bash\nnpm install --save-dev eslint vue-eslint-parser\n```\n\n## 📖 Usage\n\nWrite `parser` option into your `eslint.config.*` file.\n\n```js\nimport vueParser from \"vue-eslint-parser\"\nexport default [\n    js.configs.recommended,\n    {\n        files: [\"*.vue\", \"**/*.vue\"],\n        languageOptions: {\n            parser: vueParser,\n        },\n    }\n]\n```\n\n## 🔧 Options\n\n`parserOptions` has the same properties as what [espree](https://github.com/eslint/espree#usage), the default parser of ESLint, is supporting.\nFor example:\n\n```js\nimport vueParser from \"vue-eslint-parser\"\nexport default [\n    {\n        files: [\"*.vue\", \"**/*.vue\"],\n        languageOptions: {\n            parser: vueParser,\n            sourceType: \"module\",\n            ecmaVersion: \"latest\",\n            parserOptions: {\n                ecmaFeatures: {\n                    globalReturn: false,\n                    impliedStrict: false,\n                    jsx: false\n                }\n            }\n        },\n    }\n]\n```\n\n### parserOptions.parser\n\nYou can use `parserOptions.parser` property to specify a custom parser to parse `\u003cscript\u003e` tags.\nOther properties than parser would be given to the specified parser.\nFor example:\n\n```js\nimport vueParser from \"vue-eslint-parser\"\nimport babelParser from \"@babel/eslint-parser\"\nexport default [\n    {\n        files: [\"*.vue\", \"**/*.vue\"],\n        languageOptions: {\n            parser: vueParser,\n            parserOptions: {\n                parser: babelParser,\n            }\n        },\n    }\n]\n```\n\n```js\nimport vueParser from \"vue-eslint-parser\"\nimport tsParser from \"@typescript-eslint/parser\"\nexport default [\n    {\n        files: [\"*.vue\", \"**/*.vue\"],\n        languageOptions: {\n            parser: vueParser,\n            parserOptions: {\n                parser: tsParser,\n            }\n        },\n    }\n]\n```\n\nYou can also specify an object and change the parser separately for `\u003cscript lang=\"...\"\u003e`.\n\n```js\nimport vueParser from \"vue-eslint-parser\"\nimport tsParser from \"@typescript-eslint/parser\"\nexport default [\n    {\n        files: [\"*.vue\", \"**/*.vue\"],\n        languageOptions: {\n            parser: vueParser,\n            parserOptions: {\n                \"parser\": {\n                    // Script parser for `\u003cscript\u003e`\n                    \"js\": \"espree\",\n\n                    // Script parser for `\u003cscript lang=\"ts\"\u003e`\n                    \"ts\": tsParser,\n\n                    // Script parser for vue directives (e.g. `v-if=` or `:attribute=`)\n                    // and vue interpolations (e.g. `{{variable}}`).\n                    // If not specified, the parser determined by `\u003cscript lang =\"...\"\u003e` is used.\n                    \"\u003ctemplate\u003e\": \"espree\",\n                }\n            }\n        },\n    }\n]\n```\n\nIf the `parserOptions.parser` is `false`, the `vue-eslint-parser` skips parsing `\u003cscript\u003e` tags completely.\nThis is useful for people who use the language ESLint community doesn't provide custom parser implementation.\n\n### parserOptions.vueFeatures\n\nYou can use `parserOptions.vueFeatures` property to specify how to parse related to Vue features.\nFor example:\n\n```js\nimport vueParser from \"vue-eslint-parser\"\nexport default [\n    {\n        files: [\"*.vue\", \"**/*.vue\"],\n        languageOptions: {\n            parser: vueParser,\n            parserOptions: {\n                vueFeatures: {\n                    filter: true,\n                    interpolationAsNonHTML: true,\n                    styleCSSVariableInjection: true,\n                    customMacros: []\n                }\n            }\n        },\n    }\n]\n```\n\n### parserOptions.vueFeatures.filter\n\nYou can use `parserOptions.vueFeatures.filter` property to specify whether to parse the Vue2 filter. If you specify `false`, the parser does not parse `|` as a filter.\nFor example:\n\n```json\n{\n    \"parserOptions\": {\n        \"vueFeatures\": {\n            \"filter\": false\n        }\n    }\n}\n```\n\nIf you specify `false`, it can be parsed in the same way as Vue 3.\nThe following template parses as a bitwise operation.\n\n```vue\n\u003ctemplate\u003e\n  \u003cdiv\u003e{{ a | b }}\u003c/div\u003e\n\u003c/template\u003e\n```\n\nHowever, the following template that are valid in Vue 2 cannot be parsed.\n\n```vue\n\u003ctemplate\u003e\n  \u003cdiv\u003e{{ a | valid:filter }}\u003c/div\u003e\n\u003c/template\u003e\n```\n\n### parserOptions.vueFeatures.interpolationAsNonHTML\n\nYou can use `parserOptions.vueFeatures.interpolationAsNonHTML` property to specify whether to parse the interpolation as HTML. If you specify `true`, the parser handles the interpolation as non-HTML (However, you can use HTML escaping in the interpolation). Default is `true`.\nFor example:\n\n```json\n{\n    \"parserOptions\": {\n        \"vueFeatures\": {\n            \"interpolationAsNonHTML\": true\n        }\n    }\n}\n```\n\nIf you specify `true`, it can be parsed in the same way as Vue 3.\nThe following template can be parsed well.\n\n```vue\n\u003ctemplate\u003e\n  \u003cdiv\u003e{{a\u003cb}}\u003c/div\u003e\n\u003c/template\u003e\n```\n\nBut, it cannot be parsed with Vue 2.\n\n### parserOptions.vueFeatures.styleCSSVariableInjection\n\nIf set to `true`, to parse expressions in `v-bind` CSS functions inside `\u003cstyle\u003e` tags. `v-bind()` is parsed into the `VExpressionContainer` AST node and held in the `VElement` of `\u003cstyle\u003e`. Default is `true`.\n\nSee also to [here](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0043-sfc-style-variables.md).\n\n### parserOptions.vueFeatures.customMacros\n\nSpecifies an array of names of custom macros other than Vue standard macros.  \nFor example, if you have a custom macro `defineFoo()` and you want it processed by the parser, specify `[\"defineFoo\"]`.\n\nNote that this option only works in `\u003cscript setup\u003e`.\n\n### parserOptions.templateTokenizer\n\n**This is an experimental feature. It may be changed or deleted without notice in the minor version.**\n\nYou can use `parserOptions.templateTokenizer` property to specify custom tokenizers to parse `\u003ctemplate lang=\"...\"\u003e` tags.\n\nFor example to enable parsing of pug templates:\n\n```jsonc\n{\n    \"parserOptions\": {\n        \"templateTokenizer\": {\n             // template tokenizer for `\u003ctemplate lang=\"pug\"\u003e`\n            \"pug\": \"vue-eslint-parser-template-tokenizer-pug\",\n        }\n    }\n}\n```\n\nThis option is only intended for plugin developers. **Be careful** when using this option directly, as it may change behaviour of rules you might have enabled.  \nIf you just want **pug** support, use [eslint-plugin-vue-pug](https://github.com/rashfael/eslint-plugin-vue-pug) instead, which uses this option internally.\n\nSee [implementing-custom-template-tokenizers.md](./docs/implementing-custom-template-tokenizers.md) for information on creating your own template tokenizer.\n\n## 🎇 Usage for custom rules / plugins\n\n- This parser provides `parserServices` to traverse `\u003ctemplate\u003e`.\n    - `defineTemplateBodyVisitor(templateVisitor, scriptVisitor, options)` ... returns ESLint visitor to traverse `\u003ctemplate\u003e`.\n    - `getTemplateBodyTokenStore()` ... returns ESLint `TokenStore` to get the tokens of `\u003ctemplate\u003e`.\n    - `getDocumentFragment()` ... returns the root `VDocumentFragment`.\n    - `defineCustomBlocksVisitor(context, customParser, rule, scriptVisitor)` ... returns ESLint visitor that parses and traverses the contents of the custom block.\n    - `defineDocumentVisitor(documentVisitor, options)` ... returns ESLint visitor to traverses the document.\n- [ast.md](./docs/ast.md) is `\u003ctemplate\u003e` AST specification.\n- [mustache-interpolation-spacing.js](https://github.com/vuejs/eslint-plugin-vue/blob/b434ff99d37f35570fa351681e43ba2cf5746db3/lib/rules/mustache-interpolation-spacing.js) is an example.\n- Check your version of ESLint as the location of `defineTemplateBodyVisitor` was moved from `context` to `context.sourceCode` after major version `9.x`\n\n### `defineTemplateBodyVisitor(templateBodyVisitor, scriptVisitor, options)`\n\n*Arguments*\n\n- `templateBodyVisitor` ... Event handlers for `\u003ctemplate\u003e`.\n- `scriptVisitor` ... Event handlers for `\u003cscript\u003e` or scripts. (optional)\n- `options` ... Options. (optional)\n  - `templateBodyTriggerSelector` ... Script AST node selector that triggers the templateBodyVisitor. Default is `\"Program:exit\"`. (optional)\n\n```ts\nimport { AST } from \"vue-eslint-parser\"\n\nexport function create(context) {\n    return context.sourceCode.parserServices.defineTemplateBodyVisitor(\n        // Event handlers for \u003ctemplate\u003e.\n        {\n            VElement(node: AST.VElement): void {\n                //...\n            }\n        },\n        // Event handlers for \u003cscript\u003e or scripts. (optional)\n        {\n            Program(node: AST.ESLintProgram): void {\n                //...\n            }\n        },\n        // Options. (optional)\n        {\n            templateBodyTriggerSelector: \"Program:exit\"\n        }\n    )\n}\n```\n\n## ⚠️ Known Limitations\n\nSome rules make warnings due to the outside of `\u003cscript\u003e` tags.\nPlease disable those rules for `.vue` files as necessary.\n\n- [eol-last](http://eslint.org/docs/rules/eol-last)\n- [linebreak-style](http://eslint.org/docs/rules/linebreak-style)\n- [max-len](http://eslint.org/docs/rules/max-len)\n- [max-lines](http://eslint.org/docs/rules/max-lines)\n- [no-trailing-spaces](http://eslint.org/docs/rules/no-trailing-spaces)\n- [unicode-bom](http://eslint.org/docs/rules/unicode-bom)\n- Other rules which are using the source code text instead of AST might be confused as well.\n\n## 📰 Changelog\n\n- [GitHub Releases](https://github.com/vuejs/vue-eslint-parser/releases)\n\n## 🍻 Contributing\n\nWelcome contributing!\n\nPlease use GitHub's Issues/PRs.\n\nIf you want to write code, please execute `npm install` after you cloned this repository.\nThe `npm install` command installs dependencies.\n\n### Development Tools\n\n- `npm test` runs tests and measures coverage.\n- `npm run build` compiles TypeScript source code to `index.js`, `index.js.map`, and `index.d.ts`.\n- `npm run coverage` shows the coverage result of `npm test` command with the default browser.\n- `npm run clean` removes the temporary files which are created by `npm test` and `npm run build`.\n- `npm run lint` runs ESLint.\n- `npm run update-fixtures` updates files in `test/fixtures/ast` directory based on `test/fixtures/ast/*/source.vue` files.\n- `npm run watch` runs `build`, `update-fixtures`, and tests with `--watch` option.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmysticatea%2Fvue-eslint-parser","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmysticatea%2Fvue-eslint-parser","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmysticatea%2Fvue-eslint-parser/lists"}