Repository files navigation

The ESLint custom parser for.vue files.

This parser allows us to lint the<template> of.vue files. We can make mistakes easily on<template> if we use complex directives and expressions in the template. This parser and the rules ofeslint-plugin-vue would catch some of the mistakes.

npm install --save-dev eslint vue-eslint-parser

Writeparser option into youreslint.config.* file.

importvueParserfrom"vue-eslint-parser"exportdefault[js.configs.recommended,{files:["*.vue","**/*.vue"],languageOptions:{parser:vueParser,},}]

parserOptions has the same properties as whatespree, the default parser of ESLint, is supporting.For example:

importvueParserfrom"vue-eslint-parser"exportdefault[{files:["*.vue","**/*.vue"],languageOptions:{parser:vueParser,sourceType:"module",ecmaVersion:"latest",parserOptions:{ecmaFeatures:{globalReturn:false,impliedStrict:false,jsx:false}}},}]

You can useparserOptions.parser property to specify a custom parser to parse<script> tags.Other properties than parser would be given to the specified parser.For example:

importvueParserfrom"vue-eslint-parser"importbabelParserfrom"@babel/eslint-parser"exportdefault[{files:["*.vue","**/*.vue"],languageOptions:{parser:vueParser,parserOptions:{parser:babelParser,}},}]

importvueParserfrom"vue-eslint-parser"importtsParserfrom"@typescript-eslint/parser"exportdefault[{files:["*.vue","**/*.vue"],languageOptions:{parser:vueParser,parserOptions:{parser:tsParser,}},}]

You can also specify an object and change the parser separately for<script lang="...">.

importvueParserfrom"vue-eslint-parser"importtsParserfrom"@typescript-eslint/parser"exportdefault[{files:["*.vue","**/*.vue"],languageOptions:{parser:vueParser,parserOptions:{"parser":{// Script parser for `<script>`"js":"espree",// Script parser for `<script lang="ts">`"ts":tsParser,// Script parser for vue directives (e.g. `v-if=` or `:attribute=`)// and vue interpolations (e.g. `{{variable}}`).// If not specified, the parser determined by `<script lang ="...">` is used."<template>":"espree",}}},}]

If theparserOptions.parser isfalse, thevue-eslint-parser skips parsing<script> tags completely.This is useful for people who use the language ESLint community doesn't provide custom parser implementation.

You can useparserOptions.vueFeatures property to specify how to parse related to Vue features.For example:

importvueParserfrom"vue-eslint-parser"exportdefault[{files:["*.vue","**/*.vue"],languageOptions:{parser:vueParser,parserOptions:{vueFeatures:{filter:true,interpolationAsNonHTML:true,styleCSSVariableInjection:true,customMacros:[]}}},}]

You can useparserOptions.vueFeatures.filter property to specify whether to parse the Vue2 filter. If you specifyfalse, the parser does not parse| as a filter.For example:

{"parserOptions": {"vueFeatures": {"filter":false        }    }}

If you specifyfalse, it can be parsed in the same way as Vue 3.The following template parses as a bitwise operation.

<template>  <div>{{ a | b }}</div></template>

However, the following template that are valid in Vue 2 cannot be parsed.

<template>  <div>{{ a | valid:filter }}</div></template>

You can useparserOptions.vueFeatures.interpolationAsNonHTML property to specify whether to parse the interpolation as HTML. If you specifytrue, the parser handles the interpolation as non-HTML (However, you can use HTML escaping in the interpolation). Default istrue.For example:

{"parserOptions": {"vueFeatures": {"interpolationAsNonHTML":true        }    }}

If you specifytrue, it can be parsed in the same way as Vue 3.The following template can be parsed well.

<template>  <div>{{a<b}}</div></template>

But, it cannot be parsed with Vue 2.

If set totrue, to parse expressions inv-bind CSS functions inside<style> tags.v-bind() is parsed into theVExpressionContainer AST node and held in theVElement of<style>. Default istrue.

See also tohere.

Specifies an array of names of custom macros other than Vue standard macros.
For example, if you have a custom macrodefineFoo() and you want it processed by the parser, specify["defineFoo"].

Note that this option only works in<script setup>.

This is an experimental feature. It may be changed or deleted without notice in the minor version.

You can useparserOptions.templateTokenizer property to specify custom tokenizers to parse<template lang="..."> tags.

For example to enable parsing of pug templates:

{"parserOptions": {"templateTokenizer": {// template tokenizer for `<template lang="pug">`"pug":"vue-eslint-parser-template-tokenizer-pug",        }    }}

This 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.
If you just wantpug support, useeslint-plugin-vue-pug instead, which uses this option internally.

Seeimplementing-custom-template-tokenizers.md for information on creating your own template tokenizer.

• This parser providesparserServices to traverse<template>.
  • defineTemplateBodyVisitor(templateVisitor, scriptVisitor, options) ... returns ESLint visitor to traverse<template>.
  • getTemplateBodyTokenStore() ... returns ESLintTokenStore to get the tokens of<template>.
  • getDocumentFragment() ... returns the rootVDocumentFragment.
  • defineCustomBlocksVisitor(context, customParser, rule, scriptVisitor) ... returns ESLint visitor that parses and traverses the contents of the custom block.
  • defineDocumentVisitor(documentVisitor, options) ... returns ESLint visitor to traverses the document.
• ast.md is<template> AST specification.
• mustache-interpolation-spacing.js is an example.
• Check your version of ESLint as the location ofdefineTemplateBodyVisitor was moved fromcontext tocontext.sourceCode after major version9.x

Arguments

• templateBodyVisitor ... Event handlers for<template>.
• scriptVisitor ... Event handlers for<script> or scripts. (optional)
• options ... Options. (optional)
  • templateBodyTriggerSelector ... Script AST node selector that triggers the templateBodyVisitor. Default is"Program:exit". (optional)

import{AST}from"vue-eslint-parser"exportfunctioncreate(context){returncontext.sourceCode.parserServices.defineTemplateBodyVisitor(// Event handlers for <template>.{VElement(node:AST.VElement):void{//...}},// Event handlers for <script> or scripts. (optional){Program(node:AST.ESLintProgram):void{//...}},// Options. (optional){templateBodyTriggerSelector:"Program:exit"})}

Some rules make warnings due to the outside of<script> tags.Please disable those rules for.vue files as necessary.

• eol-last
• linebreak-style
• max-len
• max-lines
• no-trailing-spaces
• unicode-bom
• Other rules which are using the source code text instead of AST might be confused as well.

• GitHub Releases

Welcome contributing!

Please use GitHub's Issues/PRs.

If you want to write code, please executenpm install after you cloned this repository.Thenpm install command installs dependencies.

• npm test runs tests and measures coverage.
• npm run build compiles TypeScript source code toindex.js,index.js.map, andindex.d.ts indist.
• npm run coverage shows the coverage result ofnpm test command with the default browser.
• npm run lint runs ESLint.
• npm run update-fixtures updates files intest/fixtures/ast directory based ontest/fixtures/ast/*/source.vue files.
• npm run watch runsbuild,update-fixtures, and tests with--watch option.