vue-eslint-parser

What is vue-eslint-parser?

The vue-eslint-parser npm package is a parser that allows ESLint to lint .vue files' script and template sections. It is designed to parse Vue.js component files and extract the JavaScript expression inside them for ESLint to check.

What are vue-eslint-parser's main functionalities?

Parsing .vue files

This feature allows the integration of ESLint with Vue.js single-file components. The code sample shows how to configure ESLint to use vue-eslint-parser in a project's .eslintrc.js file.

module.exports = { parser: 'vue-eslint-parser', parserOptions: { parser: 'babel-eslint', sourceType: 'module', ecmaVersion: 2020 } }

Extracting script content

vue-eslint-parser extracts the script content from a .vue file, enabling ESLint to lint the JavaScript code within. The code sample is a Vue component with a template and a script section.

/* eslint-disable */ <template><div>{{ message }}</div></template><script>export default { data() { return { message: 'Hello Vue!' }; } }</script>

Supporting custom blocks

The parser can handle custom blocks in .vue files, such as style and i18n blocks, although linting these blocks may require additional plugins or configurations. The code sample includes a style block along with the template and script.

/* eslint-disable */ <template><div>{{ message }}</div></template><script>export default { data() { return { message: 'Hello Vue!' }; } }</script><style scoped>.message { color: red; }</style>

Other packages similar to vue-eslint-parser

eslint-plugin-vue

This package is an ESLint plugin that provides linting rules for Vue.js templates. It is often used in conjunction with vue-eslint-parser to lint both the template and script parts of Vue components.

babel-eslint

babel-eslint is a parser that allows ESLint to run on source code that is transpiled with Babel. While it does not specifically target Vue.js files, it is commonly used as the underlying JavaScript parser for vue-eslint-parser.

README

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"
    }
}

• If you use with babel-eslint, it has additional requirements. Use eslint@>=4.14.0 and babel-eslint@>=8.1.1.
• If you use typescript-eslint-parser, the location of original nodes can be wrong. Waiting for typescript-eslint-parser to support parseResult.visitorKeys.

🎇 Usage for custom rules / plugins

• This parser provides parserServices to traverse <template>.
  • defineTemplateBodyVisitor(templateVisitor, scriptVisitor) ... returns ESLint visitor to traverse <template>.
  • getTemplateBodyTokenStore() ... returns ESLint TokenStore to get the tokens of <template>.
• ast.md is <template> AST specification.
• mustache-interpolation-spacing.js is an example.

⚠️ 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.