5.0 KiB
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.
💿 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
- Write
parser
option into your.eslintrc.*
file. - 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"
}
}
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.
🎇 Usage for custom rules / plugins
- This parser provides
parserServices
to traverse<template>
.defineTemplateBodyVisitor(templateVisitor, scriptVisitor)
… returns ESLint visitor to traverse<template>
.getTemplateBodyTokenStore()
… returns ESLintTokenStore
to get the tokens of<template>
.getDocumentFragment()
… returns the rootVDocumentFragment
.
- 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
🍻 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 toindex.js
,index.js.map
, andindex.d.ts
.npm run coverage
shows the coverage result ofnpm test
command with the default browser.npm run clean
removes the temporary files which are created bynpm test
andnpm run build
.npm run lint
runs ESLint.npm run setup
setups submodules to develop.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.