vue-eslint-parser

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.
• This parser allows us to fix our mistakes automatically.
  ESLint supports autofix on custom parsers but does not support autofix on plugins which have processors (eslint/eslint#7510). This parser supports autofix on .vue files.

💿 Installation

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

• vue-eslint-parser requires ESLint 3.9.0 or later.

📖 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": 2017,
        "ecmaFeatures": {
            "globalReturn": false,
            "impliedStrict": false,
            "jsx": false,
            "experimentalObjectRestSpread": false
        }
    }
}

Also, you can use 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"
    }
}

🎇 Usage for custom rules / plugins

This parser provides parserServices to traverse <template>.

The spec of <template> AST is here.

TODO: write examples.

⚠️ Known Limitations

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.

📰 Changelog

• GitHub Releases

🍻 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.