Skip to content

Commit 32d0d1a

Browse files
ota-meshiota-meshi
committed
chore: Update readme
1 parent aca17d7 commit 32d0d1a

File tree

1 file changed

+97
-90
lines changed

1 file changed

+97
-90
lines changed

‎README.md‎

Lines changed: 97 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -19,40 +19,45 @@ npm install --save-dev eslint vue-eslint-parser
1919

2020
## 📖 Usage
2121

22-
1. Write `parser` option into your `.eslintrc.*` file.
23-
2. Use glob patterns or `--ext .vue` CLI option.
22+
Write `parser` option into your `eslint.config.*` file.
2423

25-
```json
26-
{
27-
"extends": "eslint:recommended",
28-
"parser": "vue-eslint-parser"
29-
}
30-
```
31-
32-
```console
33-
$ eslint "src/**/*.{js,vue}"
34-
# or
35-
$ eslint src --ext .vue
24+
```js
25+
import vueParser from "vue-eslint-parser"
26+
export default [
27+
js.configs.recommended,
28+
{
29+
files: ["*.vue", "**/*.vue"],
30+
languageOptions: {
31+
parser: vueParser,
32+
},
33+
}
34+
]
3635
```
3736

3837
## 🔧 Options
3938

4039
`parserOptions` has the same properties as what [espree](https://github.com/eslint/espree#usage), the default parser of ESLint, is supporting.
4140
For example:
4241

43-
```json
44-
{
45-
"parser": "vue-eslint-parser",
46-
"parserOptions": {
47-
"sourceType": "module",
48-
"ecmaVersion": "latest",
49-
"ecmaFeatures": {
50-
"globalReturn": false,
51-
"impliedStrict": false,
52-
"jsx": false
53-
}
42+
```js
43+
import vueParser from "vue-eslint-parser"
44+
export default [
45+
{
46+
files: ["*.vue", "**/*.vue"],
47+
languageOptions: {
48+
parser: vueParser,
49+
sourceType: "module",
50+
ecmaVersion: "latest",
51+
parserOptions: {
52+
ecmaFeatures: {
53+
globalReturn: false,
54+
impliedStrict: false,
55+
jsx: false
56+
}
57+
}
58+
},
5459
}
55-
}
60+
]
5661
```
5762

5863
### parserOptions.parser
@@ -61,66 +66,65 @@ You can use `parserOptions.parser` property to specify a custom parser to parse
6166
Other properties than parser would be given to the specified parser.
6267
For example:
6368

64-
```json
65-
{
66-
"parser": "vue-eslint-parser",
67-
"parserOptions": {
68-
"parser": "@babel/eslint-parser",
69-
"sourceType": "module"
69+
```js
70+
import vueParser from "vue-eslint-parser"
71+
import babelParser from "@babel/eslint-parser"
72+
export default [
73+
{
74+
files: ["*.vue", "**/*.vue"],
75+
languageOptions: {
76+
parser: vueParser,
77+
parserOptions: {
78+
parser: babelParser,
79+
}
80+
},
7081
}
71-
}
82+
]
7283
```
7384

74-
```json
75-
{
76-
"parser": "vue-eslint-parser",
77-
"parserOptions": {
78-
"parser": "@typescript-eslint/parser",
79-
"sourceType": "module"
85+
```js
86+
import vueParser from "vue-eslint-parser"
87+
import tsParser from "@typescript-eslint/parser"
88+
export default [
89+
{
90+
files: ["*.vue", "**/*.vue"],
91+
languageOptions: {
92+
parser: vueParser,
93+
parserOptions: {
94+
parser: tsParser,
95+
}
96+
},
8097
}
81-
}
98+
]
8299
```
83100

84101
You can also specify an object and change the parser separately for `<script lang="...">`.
85102

86-
```jsonc
87-
{
88-
"parser": "vue-eslint-parser",
89-
"parserOptions": {
90-
"parser": {
91-
// Script parser for `<script>`
92-
"js": "espree",
93-
94-
// Script parser for `<script lang="ts">`
95-
"ts": "@typescript-eslint/parser",
96-
97-
// Script parser for vue directives (e.g. `v-if=` or `:attribute=`)
98-
// and vue interpolations (e.g. `{{variable}}`).
99-
// If not specified, the parser determined by `<script lang ="...">` is used.
100-
"<template>": "espree",
101-
}
102-
}
103-
}
104-
```
105-
106-
When using JavaScript configuration (`.eslintrc.js`), you can also give the parser object directly.
107-
108103
```js
109-
const tsParser = require("@typescript-eslint/parser")
110-
const espree = require("espree")
111-
112-
module.exports = {
113-
parser: "vue-eslint-parser",
114-
parserOptions: {
115-
// Single parser
116-
parser: tsParser,
117-
// Multiple parser
118-
parser: {
119-
js: espree,
120-
ts: tsParser,
121-
}
122-
},
123-
}
104+
import vueParser from "vue-eslint-parser"
105+
import tsParser from "@typescript-eslint/parser"
106+
export default [
107+
{
108+
files: ["*.vue", "**/*.vue"],
109+
languageOptions: {
110+
parser: vueParser,
111+
parserOptions: {
112+
"parser": {
113+
// Script parser for `<script>`
114+
"js": "espree",
115+
116+
// Script parser for `<script lang="ts">`
117+
"ts": tsParser,
118+
119+
// Script parser for vue directives (e.g. `v-if=` or `:attribute=`)
120+
// and vue interpolations (e.g. `{{variable}}`).
121+
// If not specified, the parser determined by `<script lang ="...">` is used.
122+
"<template>": "espree",
123+
}
124+
}
125+
},
126+
}
127+
]
124128
```
125129

126130
If the `parserOptions.parser` is `false`, the `vue-eslint-parser` skips parsing `<script>` tags completely.
@@ -131,18 +135,24 @@ This is useful for people who use the language ESLint community doesn't provide
131135
You can use `parserOptions.vueFeatures` property to specify how to parse related to Vue features.
132136
For example:
133137

134-
```json
135-
{
136-
"parser": "vue-eslint-parser",
137-
"parserOptions": {
138-
"vueFeatures": {
139-
"filter": true,
140-
"interpolationAsNonHTML": true,
141-
"styleCSSVariableInjection": true,
142-
"customMacros": []
143-
}
138+
```js
139+
import vueParser from "vue-eslint-parser"
140+
export default [
141+
{
142+
files: ["*.vue", "**/*.vue"],
143+
languageOptions: {
144+
parser: vueParser,
145+
parserOptions: {
146+
vueFeatures: {
147+
filter: true,
148+
interpolationAsNonHTML: true,
149+
styleCSSVariableInjection: true,
150+
customMacros: []
151+
}
152+
}
153+
},
144154
}
145-
}
155+
]
146156
```
147157

148158
### parserOptions.vueFeatures.filter
@@ -152,7 +162,6 @@ For example:
152162

153163
```json
154164
{
155-
"parser": "vue-eslint-parser",
156165
"parserOptions": {
157166
"vueFeatures": {
158167
"filter": false
@@ -185,7 +194,6 @@ For example:
185194

186195
```json
187196
{
188-
"parser": "vue-eslint-parser",
189197
"parserOptions": {
190198
"vueFeatures": {
191199
"interpolationAsNonHTML": true
@@ -228,7 +236,6 @@ For example to enable parsing of pug templates:
228236

229237
```jsonc
230238
{
231-
"parser": "vue-eslint-parser",
232239
"parserOptions": {
233240
"templateTokenizer": {
234241
// template tokenizer for `<template lang="pug">`

0 commit comments

Comments
 (0)