vue-eslint-parser
    TypeScript icon, indicating that this package has built-in type declarations

    7.9.0 • Public • Published

    vue-eslint-parser

    npm version Downloads/month Build Status Coverage Status Dependency Status

    The ESLint custom parser for .vue files.

    ⤴️ Motivation

    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 of eslint-plugin-vue would catch some of the mistakes.

    💿 Installation

    $ npm install --save-dev eslint vue-eslint-parser
    • Requires Node.js 6.5.0 or later.
    • Requires ESLint 5.0.0 or later.
    • Requires babel-eslint 8.1.1 or later if you want it. (optional)
    • Requires @typescript-eslint/parser 1.0.0 or later if you want it. (optional)

    📖 Usage

    1. Write parser option into your .eslintrc.* file.
    2. Use glob patterns or --ext .vue CLI option.
    {
        "extends": "eslint:recommended",
        "parser": "vue-eslint-parser"
    }
    $ eslint "src/**/*.{js,vue}"
    # or
    $ eslint src --ext .vue

    🔧 Options

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

    {
        "parser": "vue-eslint-parser",
        "parserOptions": {
            "sourceType": "module",
            "ecmaVersion": 2018,
            "ecmaFeatures": {
                "globalReturn": false,
                "impliedStrict": false,
                "jsx": false
            }
        }
    }

    parserOptions.parser

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

    {
        "parser": "vue-eslint-parser",
        "parserOptions": {
            "parser": "babel-eslint",
            "sourceType": "module",
            "allowImportExportEverywhere": false
        }
    }
    {
        "parser": "vue-eslint-parser",
        "parserOptions": {
            "parser": "@typescript-eslint/parser"
        }
    }

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

    {
        "parser": "vue-eslint-parser",
        "parserOptions": {
            "parser": {
                 // Script parser for `<script>`
                "js": "espree",
    
                 // Script parser for `<script lang="ts">`
                "ts": "@typescript-eslint/parser",
    
                 // 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 the parserOptions.parser is false, the vue-eslint-parser skips parsing <script> tags completely. This is useful for people who use the language ESLint community doesn't provide custom parser implementation.

    parserOptions.vueFeatures

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

    {
        "parser": "vue-eslint-parser",
        "parserOptions": {
            "vueFeatures": {
                "filter": true,
                "interpolationAsNonHTML": false,
                "styleCSSVariableInjection": true,
            }
        }
    }

    parserOptions.vueFeatures.filter

    You 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. For example:

    {
        "parser": "vue-eslint-parser",
        "parserOptions": {
            "vueFeatures": {
                "filter": false
            }
        }
    }

    If you specify false, 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>

    parserOptions.vueFeatures.interpolationAsNonHTML

    You 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). For example:

    {
        "parser": "vue-eslint-parser",
        "parserOptions": {
            "vueFeatures": {
                "interpolationAsNonHTML": true
            }
        }
    }

    If you specify true, 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.

    parserOptions.vueFeatures.styleCSSVariableInjection

    If set to true, to parse expressions in v-bind CSS functions inside <style> tags. v-bind() is parsed into the VExpressionContainer AST node and held in the VElement of <style>. Default is true.

    See also to here.

    🎇 Usage for custom rules / plugins

    • This parser provides parserServices to traverse <template>.
      • defineTemplateBodyVisitor(templateVisitor, scriptVisitor, options) ... returns ESLint visitor to traverse <template>.
      • getTemplateBodyTokenStore() ... returns ESLint TokenStore to get the tokens of <template>.
      • getDocumentFragment() ... returns the root VDocumentFragment.
      • defineCustomBlocksVisitor(context, customParser, rule, scriptVisitor) ... returns ESLint visitor that parses and traverses the contents of the custom block.
    • ast.md is <template> AST specification.
    • mustache-interpolation-spacing.js is an example.

    defineTemplateBodyVisitor(templateBodyVisitor, scriptVisitor, options)

    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"
    
    export function create(context) {
        return context.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"
            }
        )
    }

    ⚠️ Known Limitations

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

    📰 Changelog

    🍻 Contributing

    Welcome contributing!

    Please use GitHub's Issues/PRs.

    If you want to write code, please execute npm install && npm run setup after you cloned this repository. The npm install command installs dependencies. The npm run setup command initializes ESLint as git submodules for tests.

    Development Tools

    • npm test runs tests and measures coverage.
    • npm run build compiles TypeScript source code to index.js, index.js.map, and index.d.ts.
    • npm run coverage shows the coverage result of npm test command with the default browser.
    • npm run clean removes the temporary files which are created by npm test and npm run build.
    • npm run lint runs ESLint.
    • npm run setup setups submodules to develop.
    • npm run update-fixtures updates files in test/fixtures/ast directory based on test/fixtures/ast/*/source.vue files.
    • npm run watch runs build, update-fixtures, and tests with --watch option.

    Keywords

    none

    Install

    npm i vue-eslint-parser

    DownloadsWeekly Downloads

    2,250,164

    Version

    7.9.0

    License

    MIT

    Unpacked Size

    964 kB

    Total Files

    6

    Last publish

    Collaborators

    • avatar
    • avatar