routie dev init since i didn't adhere to any proper guidance up until now
This commit is contained in:
+21
@@ -0,0 +1,21 @@
|
||||
MIT License
|
||||
|
||||
Copyright (c) 2016 Toru Nagashima
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
+331
@@ -0,0 +1,331 @@
|
||||
# vue-eslint-parser
|
||||
|
||||
[](https://www.npmjs.com/package/vue-eslint-parser)
|
||||
[](http://www.npmtrends.com/vue-eslint-parser)
|
||||
[](https://github.com/vuejs/vue-eslint-parser/actions)
|
||||
|
||||
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](https://github.com/vuejs/eslint-plugin-vue) would catch some of the mistakes.
|
||||
|
||||
## 💿 Installation
|
||||
|
||||
```bash
|
||||
npm install --save-dev eslint vue-eslint-parser
|
||||
```
|
||||
|
||||
## 📖 Usage
|
||||
|
||||
Write `parser` option into your `eslint.config.*` file.
|
||||
|
||||
```js
|
||||
import vueParser from "vue-eslint-parser"
|
||||
export default [
|
||||
js.configs.recommended,
|
||||
{
|
||||
files: ["*.vue", "**/*.vue"],
|
||||
languageOptions: {
|
||||
parser: vueParser,
|
||||
},
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
## 🔧 Options
|
||||
|
||||
`parserOptions` has the same properties as what [espree](https://github.com/eslint/espree#usage), the default parser of ESLint, is supporting.
|
||||
For example:
|
||||
|
||||
```js
|
||||
import vueParser from "vue-eslint-parser"
|
||||
export default [
|
||||
{
|
||||
files: ["*.vue", "**/*.vue"],
|
||||
languageOptions: {
|
||||
parser: vueParser,
|
||||
sourceType: "module",
|
||||
ecmaVersion: "latest",
|
||||
parserOptions: {
|
||||
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:
|
||||
|
||||
```js
|
||||
import vueParser from "vue-eslint-parser"
|
||||
import babelParser from "@babel/eslint-parser"
|
||||
export default [
|
||||
{
|
||||
files: ["*.vue", "**/*.vue"],
|
||||
languageOptions: {
|
||||
parser: vueParser,
|
||||
parserOptions: {
|
||||
parser: babelParser,
|
||||
}
|
||||
},
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
```js
|
||||
import vueParser from "vue-eslint-parser"
|
||||
import tsParser from "@typescript-eslint/parser"
|
||||
export default [
|
||||
{
|
||||
files: ["*.vue", "**/*.vue"],
|
||||
languageOptions: {
|
||||
parser: vueParser,
|
||||
parserOptions: {
|
||||
parser: tsParser,
|
||||
}
|
||||
},
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
You can also specify an object and change the parser separately for `<script lang="...">`.
|
||||
|
||||
```js
|
||||
import vueParser from "vue-eslint-parser"
|
||||
import tsParser from "@typescript-eslint/parser"
|
||||
export default [
|
||||
{
|
||||
files: ["*.vue", "**/*.vue"],
|
||||
languageOptions: {
|
||||
parser: vueParser,
|
||||
parserOptions: {
|
||||
"parser": {
|
||||
// Script parser for `<script>`
|
||||
"js": "espree",
|
||||
|
||||
// Script parser for `<script lang="ts">`
|
||||
"ts": tsParser,
|
||||
|
||||
// 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:
|
||||
|
||||
```js
|
||||
import vueParser from "vue-eslint-parser"
|
||||
export default [
|
||||
{
|
||||
files: ["*.vue", "**/*.vue"],
|
||||
languageOptions: {
|
||||
parser: vueParser,
|
||||
parserOptions: {
|
||||
vueFeatures: {
|
||||
filter: true,
|
||||
interpolationAsNonHTML: true,
|
||||
styleCSSVariableInjection: true,
|
||||
customMacros: []
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
### 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:
|
||||
|
||||
```json
|
||||
{
|
||||
"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.
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<div>{{ a | b }}</div>
|
||||
</template>
|
||||
```
|
||||
|
||||
However, the following template that are valid in Vue 2 cannot be parsed.
|
||||
|
||||
```vue
|
||||
<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). Default is `true`.
|
||||
For example:
|
||||
|
||||
```json
|
||||
{
|
||||
"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.
|
||||
|
||||
```vue
|
||||
<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](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0043-sfc-style-variables.md).
|
||||
|
||||
### parserOptions.vueFeatures.customMacros
|
||||
|
||||
Specifies an array of names of custom macros other than Vue standard macros.
|
||||
For example, if you have a custom macro `defineFoo()` and you want it processed by the parser, specify `["defineFoo"]`.
|
||||
|
||||
Note that this option only works in `<script setup>`.
|
||||
|
||||
### parserOptions.templateTokenizer
|
||||
|
||||
**This is an experimental feature. It may be changed or deleted without notice in the minor version.**
|
||||
|
||||
You can use `parserOptions.templateTokenizer` property to specify custom tokenizers to parse `<template lang="...">` tags.
|
||||
|
||||
For example to enable parsing of pug templates:
|
||||
|
||||
```jsonc
|
||||
{
|
||||
"parserOptions": {
|
||||
"templateTokenizer": {
|
||||
// template tokenizer for `<template lang="pug">`
|
||||
"pug": "vue-eslint-parser-template-tokenizer-pug",
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
This option is only intended for plugin developers. **Be careful** when using this option directly, as it may change behaviour of rules you might have enabled.
|
||||
If you just want **pug** support, use [eslint-plugin-vue-pug](https://github.com/rashfael/eslint-plugin-vue-pug) instead, which uses this option internally.
|
||||
|
||||
See [implementing-custom-template-tokenizers.md](./docs/implementing-custom-template-tokenizers.md) for information on creating your own template tokenizer.
|
||||
|
||||
## 🎇 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.
|
||||
- `defineDocumentVisitor(documentVisitor, options)` ... returns ESLint visitor to traverses the document.
|
||||
- [ast.md](./docs/ast.md) is `<template>` AST specification.
|
||||
- [mustache-interpolation-spacing.js](https://github.com/vuejs/eslint-plugin-vue/blob/b434ff99d37f35570fa351681e43ba2cf5746db3/lib/rules/mustache-interpolation-spacing.js) is an example.
|
||||
- Check your version of ESLint as the location of `defineTemplateBodyVisitor` was moved from `context` to `context.sourceCode` after major version `9.x`
|
||||
|
||||
### `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)
|
||||
|
||||
```ts
|
||||
import { AST } from "vue-eslint-parser"
|
||||
|
||||
export function create(context) {
|
||||
return context.sourceCode.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.
|
||||
|
||||
- [eol-last](http://eslint.org/docs/rules/eol-last)
|
||||
- [linebreak-style](http://eslint.org/docs/rules/linebreak-style)
|
||||
- [max-len](http://eslint.org/docs/rules/max-len)
|
||||
- [max-lines](http://eslint.org/docs/rules/max-lines)
|
||||
- [no-trailing-spaces](http://eslint.org/docs/rules/no-trailing-spaces)
|
||||
- [unicode-bom](http://eslint.org/docs/rules/unicode-bom)
|
||||
- Other rules which are using the source code text instead of AST might be confused as well.
|
||||
|
||||
## 📰 Changelog
|
||||
|
||||
- [GitHub Releases](https://github.com/vuejs/vue-eslint-parser/releases)
|
||||
|
||||
## 🍻 Contributing
|
||||
|
||||
Welcome contributing!
|
||||
|
||||
Please use GitHub's Issues/PRs.
|
||||
|
||||
If you want to write code, please execute `npm install` after you cloned this repository.
|
||||
The `npm install` command installs dependencies.
|
||||
|
||||
### 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` in `dist`.
|
||||
- `npm run coverage` shows the coverage result of `npm test` command with the default browser.
|
||||
- `npm run lint` runs ESLint.
|
||||
- `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.
|
||||
+10394
File diff suppressed because it is too large
Load Diff
+1
File diff suppressed because one or more lines are too long
+1148
File diff suppressed because it is too large
Load Diff
+82
@@ -0,0 +1,82 @@
|
||||
{
|
||||
"name": "vue-eslint-parser",
|
||||
"version": "10.4.0",
|
||||
"description": "The ESLint custom parser for `.vue` files.",
|
||||
"main": "./dist/index.cjs",
|
||||
"types": "./dist/index.d.cts",
|
||||
"exports": {
|
||||
".": "./dist/index.cjs",
|
||||
"./package.json": "./package.json"
|
||||
},
|
||||
"files": [
|
||||
"dist"
|
||||
],
|
||||
"engines": {
|
||||
"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"eslint": "^8.57.0 || ^9.0.0 || ^10.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"debug": "^4.4.0",
|
||||
"eslint-scope": "^8.2.0 || ^9.0.0",
|
||||
"eslint-visitor-keys": "^4.2.0 || ^5.0.0",
|
||||
"espree": "^10.3.0 || ^11.0.0",
|
||||
"esquery": "^1.6.0",
|
||||
"semver": "^7.6.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.26.7",
|
||||
"@babel/eslint-parser": "^7.28.6",
|
||||
"@babel/plugin-syntax-decorators": "^7.25.9",
|
||||
"@babel/plugin-syntax-pipeline-operator": "^7.26.7",
|
||||
"@babel/plugin-syntax-typescript": "^7.25.9",
|
||||
"@eslint/eslintrc": "^3.2.0",
|
||||
"@eslint/js": "^9.19.0",
|
||||
"@types/debug": "^4.1.7",
|
||||
"@types/estree": "^1.0.0",
|
||||
"@types/node": "^18.8.4",
|
||||
"@types/semver": "^7.3.12",
|
||||
"@typescript-eslint/eslint-plugin": "^8.55.0",
|
||||
"@typescript-eslint/parser": "^8.55.0",
|
||||
"@vitest/coverage-v8": "^3.2.4",
|
||||
"@vitest/ui": "^3.2.4",
|
||||
"eslint": "^10.0.0",
|
||||
"@eslint-community/eslint-plugin-eslint-comments": "^4.6.0",
|
||||
"eslint-plugin-jsonc": "^2.19.1",
|
||||
"eslint-plugin-n": "^17.15.1",
|
||||
"eslint-plugin-node-dependencies": "^1.3.0",
|
||||
"eslint-plugin-prettier": "^5.2.3",
|
||||
"eslint-plugin-unicorn": "^57.0.0",
|
||||
"jsonc-eslint-parser": "^2.0.3",
|
||||
"prettier": "^3.4.2",
|
||||
"ts-node": "^10.9.2",
|
||||
"tsdown": "^0.20.3",
|
||||
"typescript": "~5.7.3",
|
||||
"vite": "^6.3.5",
|
||||
"vitest": "^3.2.4"
|
||||
},
|
||||
"scripts": {
|
||||
"dev": "tsdown --watch",
|
||||
"build": "tsdown",
|
||||
"coverage": "vitest --coverage --ui",
|
||||
"lint": "eslint src test package.json",
|
||||
"test": "vitest",
|
||||
"test:cover": "vitest --coverage",
|
||||
"preversion": "npm test -- run",
|
||||
"version": "npm run -s build",
|
||||
"postversion": "git push && git push --tags"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/vuejs/vue-eslint-parser.git"
|
||||
},
|
||||
"keywords": [],
|
||||
"author": "Toru Nagashima",
|
||||
"license": "MIT",
|
||||
"bugs": {
|
||||
"url": "https://github.com/vuejs/vue-eslint-parser/issues"
|
||||
},
|
||||
"homepage": "https://github.com/vuejs/vue-eslint-parser#readme",
|
||||
"funding": "https://github.com/sponsors/mysticatea"
|
||||
}
|
||||
Reference in New Issue
Block a user