Skip to content
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Commit 5dc6d3e

Browse files
ota-meshiota-meshi
authoredMay 9, 2024··
docs: rewrite parser config docs to mainly use flat config (#514)
1 parent d9cc4c3 commit 5dc6d3e

File tree

1 file changed

+227
-96
lines changed

1 file changed

+227
-96
lines changed
 

‎README.md

Lines changed: 227 additions & 96 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
[Svelte] parser for [ESLint].
44
You can check it on [Online DEMO](https://sveltejs.github.io/svelte-eslint-parser/playground).
55

6-
***Note that this parser has experimental support for Svelte v5, but may break with new versions of Svelte v5.***
6+
**_Note that this parser has experimental support for Svelte v5, but may break with new versions of Svelte v5._**
77

88
[![NPM license](https://img.shields.io/npm/l/svelte-eslint-parser.svg)](https://www.npmjs.com/package/svelte-eslint-parser)
99
[![NPM version](https://img.shields.io/npm/v/svelte-eslint-parser.svg)](https://www.npmjs.com/package/svelte-eslint-parser)
@@ -50,21 +50,41 @@ npm install --save-dev eslint svelte-eslint-parser
5050

5151
## 📖 Usage
5252

53-
1. Write `overrides.parser` option into your `.eslintrc.*` file.
53+
1. Write `parser` option into your ESLint Config file.
5454
2. Use glob patterns or `--ext .svelte` CLI option.
5555

56+
### ESLint Config (`eslint.config.js`)
57+
58+
```js
59+
import js from "@eslint/js";
60+
import svelteParser from "svelte-eslint-parser";
61+
export default [
62+
js.configs.recommended,
63+
{
64+
files: ["**/*.svelte", "*.svelte"],
65+
languageOptions: {
66+
parser: svelteParser,
67+
},
68+
},
69+
];
70+
```
71+
72+
### ESLint Config (`.eslintrc.*`)
73+
5674
```json
5775
{
58-
"extends": "eslint:recommended",
59-
"overrides": [
60-
{
61-
"files": ["*.svelte"],
62-
"parser": "svelte-eslint-parser"
63-
}
64-
]
76+
"extends": "eslint:recommended",
77+
"overrides": [
78+
{
79+
"files": ["*.svelte"],
80+
"parser": "svelte-eslint-parser"
81+
}
82+
]
6583
}
6684
```
6785

86+
### CLI
87+
6888
```console
6989
$ eslint "src/**/*.{js,svelte}"
7090
# or
@@ -73,40 +93,92 @@ $ eslint src --ext .svelte
7393

7494
## 🔧 Options
7595

76-
`parserOptions` has the same properties as what [espree](https://github.com/eslint/espree#usage), the default parser of ESLint, is supporting.
96+
[`parserOptions`] has the same properties as what [espree](https://github.com/eslint/espree#usage), the default parser of ESLint, is supporting.
7797
For example:
7898

7999
```json
80100
{
81-
"parser": "svelte-eslint-parser",
82-
"parserOptions": {
83-
"sourceType": "module",
84-
"ecmaVersion": 2021,
85-
"ecmaFeatures": {
86-
"globalReturn": false,
87-
"impliedStrict": false,
88-
"jsx": false
89-
}
101+
"parserOptions": {
102+
"sourceType": "module",
103+
"ecmaVersion": 2021,
104+
"ecmaFeatures": {
105+
"globalReturn": false,
106+
"impliedStrict": false,
107+
"jsx": false
90108
}
109+
}
91110
}
92111
```
93112

113+
[`parserOptions`]: https://eslint.org/docs/latest/use/configure/parser#configure-parser-options
114+
94115
### parserOptions.parser
95116

96117
You can use `parserOptions.parser` property to specify a custom parser to parse `<script>` tags.
97118
Other properties than parser would be given to the specified parser.
98-
For example:
119+
120+
For example in `eslint.config.js`:
121+
122+
```js
123+
import tsParser from "@typescript-eslint/parser";
124+
export default [
125+
{
126+
files: ["**/*.svelte", "*.svelte"],
127+
languageOptions: {
128+
parser: svelteParser,
129+
parserOptions: {
130+
parser: tsParser,
131+
},
132+
},
133+
},
134+
];
135+
```
136+
137+
For example in `.eslintrc.*`:
99138

100139
```json
101140
{
102-
"parser": "svelte-eslint-parser",
103-
"parserOptions": {
104-
"parser": "@typescript-eslint/parser"
105-
}
141+
"parser": "svelte-eslint-parser",
142+
"parserOptions": {
143+
"parser": "@typescript-eslint/parser"
144+
}
106145
}
107146
```
108147

109-
For example, if you are using the `"@typescript-eslint/parser"`, and if you want to use TypeScript in `<script>` of `.svelte`, you need to add more `parserOptions` configuration.
148+
If you are using the `"@typescript-eslint/parser"`, and if you want to use TypeScript in `<script>` of `.svelte`, you need to add more `parserOptions` configuration.
149+
150+
For example in `eslint.config.js`:
151+
152+
```js
153+
import tsParser from "@typescript-eslint/parser";
154+
export default [
155+
// ...
156+
{
157+
// ...
158+
languageOptions: {
159+
parser: tsParser,
160+
parserOptions: {
161+
// ...
162+
project: "path/to/your/tsconfig.json",
163+
extraFileExtensions: [".svelte"], // This is a required setting in `@typescript-eslint/parser` v4.24.0.
164+
},
165+
},
166+
},
167+
{
168+
files: ["**/*.svelte", "*.svelte"],
169+
languageOptions: {
170+
parser: svelteParser,
171+
// Parse the `<script>` in `.svelte` as TypeScript by adding the following configuration.
172+
parserOptions: {
173+
parser: tsParser,
174+
},
175+
},
176+
// ...
177+
},
178+
];
179+
```
180+
181+
For example in `.eslintrc.*`:
110182

111183
```js
112184
module.exports = {
@@ -129,103 +201,166 @@ module.exports = {
129201
// ...
130202
],
131203
// ...
132-
}
204+
};
133205
```
134206

135207
#### Multiple parsers
136208

137209
If you want to switch the parser for each lang, specify the object.
138210

211+
For example in `eslint.config.js`:
212+
213+
```js
214+
import tsParser from "@typescript-eslint/parser";
215+
import espree from "espree";
216+
export default [
217+
{
218+
files: ["**/*.svelte", "*.svelte"],
219+
languageOptions: {
220+
parser: svelteParser,
221+
parserOptions: {
222+
parser: {
223+
ts: tsParser,
224+
js: espree,
225+
typescript: tsParser,
226+
},
227+
},
228+
},
229+
},
230+
];
231+
```
232+
233+
For example in `.eslintrc.*`:
234+
139235
```json
140236
{
141-
"parser": "svelte-eslint-parser",
142-
"parserOptions": {
143-
"parser": {
144-
"ts": "@typescript-eslint/parser",
145-
"js": "espree",
146-
"typescript": "@typescript-eslint/parser"
147-
}
237+
"parser": "svelte-eslint-parser",
238+
"parserOptions": {
239+
"parser": {
240+
"ts": "@typescript-eslint/parser",
241+
"js": "espree",
242+
"typescript": "@typescript-eslint/parser"
148243
}
244+
}
149245
}
150246
```
151247

152-
#### Parser Object
248+
### parserOptions.svelteFeatures
153249

154-
When using JavaScript configuration (`.eslintrc.js`), you can also give the parser object directly.
250+
You can use `parserOptions.svelteFeatures` property to specify how to parse related to Svelte features. For example:
155251

156-
```js
157-
const tsParser = require("@typescript-eslint/parser")
158-
const espree = require("espree")
252+
For example in `eslint.config.js`:
159253

160-
module.exports = {
161-
parser: "svelte-eslint-parser",
162-
parserOptions: {
163-
// Single parser
164-
parser: tsParser,
165-
// Multiple parser
166-
parser: {
167-
js: espree,
168-
ts: tsParser,
169-
}
254+
```js
255+
export default [
256+
{
257+
files: ["**/*.svelte", "*.svelte"],
258+
languageOptions: {
259+
parser: svelteParser,
260+
parserOptions: {
261+
svelteFeatures: {
262+
/* -- Experimental Svelte Features -- */
263+
/* It may be changed or removed in minor versions without notice. */
264+
// Whether to parse the `generics` attribute.
265+
// See https://github.com/sveltejs/rfcs/pull/38
266+
experimentalGenerics: false,
267+
},
268+
},
170269
},
171-
}
270+
},
271+
];
172272
```
173273

174-
### parserOptions.svelteFeatures
175-
176-
You can use `parserOptions.svelteFeatures` property to specify how to parse related to Svelte features. For example:
274+
For example in `.eslintrc.*`:
177275

178276
```jsonc
179277
{
180-
"parser": "svelte-eslint-parser",
181-
"parserOptions": {
182-
"svelteFeatures": {
183-
184-
/* -- Experimental Svelte Features -- */
185-
/* It may be changed or removed in minor versions without notice. */
186-
// Whether to parse the `generics` attribute.
187-
// See https://github.com/sveltejs/rfcs/pull/38
188-
"experimentalGenerics": false
189-
}
190-
}
278+
"parser": "svelte-eslint-parser",
279+
"parserOptions": {
280+
"svelteFeatures": {
281+
/* -- Experimental Svelte Features -- */
282+
/* It may be changed or removed in minor versions without notice. */
283+
// Whether to parse the `generics` attribute.
284+
// See https://github.com/sveltejs/rfcs/pull/38
285+
"experimentalGenerics": false,
286+
},
287+
},
191288
}
192289
```
193290

194291
### Runes support
195292

196-
***This is an experimental feature. It may be changed or removed in minor versions without notice.***
293+
**_This is an experimental feature. It may be changed or removed in minor versions without notice._**
197294

198295
If you install Svelte v5 the parser will be able to parse runes, and will also be able to parse `*.js` and `*.ts` files.
199296

200297
When using this mode in an ESLint configuration, it is recommended to set it per file pattern as below.
201298

202-
```json
299+
For example in `eslint.config.js`:
300+
301+
```js
302+
export default [
303+
{
304+
files: ["**/*.svelte", "*.svelte"],
305+
languageOptions: {
306+
parser: svelteParser,
307+
parserOptions: {
308+
parser: "...",
309+
/* ... */
310+
},
311+
},
312+
},
313+
{
314+
files: ["**/*.svelte.js", "*.svelte.js"],
315+
languageOptions: {
316+
parser: svelteParser,
317+
parserOptions: {
318+
/* ... */
319+
},
320+
},
321+
},
322+
{
323+
files: ["**/*.svelte.ts", "*.svelte.ts"],
324+
languageOptions: {
325+
parser: svelteParser,
326+
parserOptions: {
327+
parser: "...(ts parser)...",
328+
/* ... */
329+
},
330+
},
331+
},
332+
];
333+
```
334+
335+
For example in `.eslintrc.*`:
336+
337+
```jsonc
203338
{
204-
"overrides": [
205-
{
206-
"files": ["*.svelte"],
207-
"parser": "svelte-eslint-parser",
208-
"parserOptions": {
209-
"parser": "...",
210-
...
211-
}
212-
},
213-
{
214-
"files": ["*.svelte.js"],
215-
"parser": "svelte-eslint-parser",
216-
"parserOptions": {
217-
...
218-
}
219-
},
220-
{
221-
"files": ["*.svelte.ts"],
222-
"parser": "svelte-eslint-parser",
223-
"parserOptions": {
224-
"parser": "...(ts parser)...",
225-
...
226-
}
227-
}
228-
]
339+
"overrides": [
340+
{
341+
"files": ["*.svelte"],
342+
"parser": "svelte-eslint-parser",
343+
"parserOptions": {
344+
"parser": "...",
345+
/* ... */
346+
},
347+
},
348+
{
349+
"files": ["*.svelte.js"],
350+
"parser": "svelte-eslint-parser",
351+
"parserOptions": {
352+
/* ... */
353+
},
354+
},
355+
{
356+
"files": ["*.svelte.ts"],
357+
"parser": "svelte-eslint-parser",
358+
"parserOptions": {
359+
"parser": "...(ts parser)...",
360+
/* ... */
361+
},
362+
},
363+
],
229364
}
230365
```
231366

@@ -241,11 +376,7 @@ Example **.vscode/settings.json**:
241376

242377
```json
243378
{
244-
"eslint.validate": [
245-
"javascript",
246-
"javascriptreact",
247-
"svelte"
248-
]
379+
"eslint.validate": ["javascript", "javascriptreact", "svelte"]
249380
}
250381
```
251382

@@ -261,7 +392,7 @@ Welcome contributing!
261392

262393
Please use GitHub's Issues/PRs.
263394

264-
See also the documentation for the internal mechanism.
395+
See also the documentation for the internal mechanism.
265396

266397
- [internal-mechanism.md](./docs/internal-mechanism.md)
267398

0 commit comments

Comments
 (0)
Please sign in to comment.