|
|
||
|---|---|---|
| .. | ||
| node_modules/eslint-scope | ||
| LICENSE | ||
| README.md | ||
| index.d.ts | ||
| index.js | ||
| index.js.map | ||
| package.json | ||
README.md
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
vue-eslint-parserrequires ESLint 3.9.0 or later.
📖 Usage
- Write
parseroption into your.eslintrc.*file. - Use glob patterns or
--ext .vueCLI 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. Useeslint@>=4.14.0andbabel-eslint@>=8.1.1. - If you use
typescript-eslint-parser, the location of original nodes can be wrong. Waiting fortypescript-eslint-parserto support parseResult.visitorKeys.
🎇 Usage for custom rules / plugins
- This parser provides
parserServicesto traverse<template>.defineTemplateBodyVisitor(templateVisitor, scriptVisitor)... returns ESLint visitor to traverse<template>.getTemplateBodyTokenStore()... returns ESLintTokenStoreto 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
🍻 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 testruns tests and measures coverage.npm run buildcompiles TypeScript source code toindex.js,index.js.map, andindex.d.ts.npm run coverageshows the coverage result ofnpm testcommand with the default browser.npm run cleanremoves the temporary files which are created bynpm testandnpm run build.npm run lintruns ESLint.npm run setupsetups submodules to develop.npm run update-fixturesupdates files intest/fixtures/astdirectory based ontest/fixtures/ast/*/source.vuefiles.npm run watchrunsbuild,update-fixtures, and tests with--watchoption.