Skip to content

Commit ca0452c

Browse files
ota-meshiota-meshi
committed
docs: rewrite parser config docs to mainly use flat config
1 parent 7c0861b commit ca0452c

File tree

1 file changed

+147
-109
lines changed

1 file changed

+147
-109
lines changed

‎README.md

Lines changed: 147 additions & 109 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,24 +93,25 @@ $ 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.
@@ -99,134 +120,155 @@ For example:
99120

100121
```json
101122
{
102-
"parser": "svelte-eslint-parser",
103-
"parserOptions": {
104-
"parser": "@typescript-eslint/parser"
105-
}
123+
"parserOptions": {
124+
"parser": "@typescript-eslint/parser"
125+
}
106126
}
107127
```
108128

109129
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.
110130

111131
```js
112-
module.exports = {
132+
import tsParser from "@typescript-eslint/parser";
133+
export default [
113134
// ...
114-
parser: "@typescript-eslint/parser",
115-
parserOptions: {
135+
{
116136
// ...
117-
project: "path/to/your/tsconfig.json",
118-
extraFileExtensions: [".svelte"], // This is a required setting in `@typescript-eslint/parser` v4.24.0.
137+
languageOptions: {
138+
parser: tsParser,
139+
parserOptions: {
140+
// ...
141+
project: "path/to/your/tsconfig.json",
142+
extraFileExtensions: [".svelte"], // This is a required setting in `@typescript-eslint/parser` v4.24.0.
143+
},
144+
},
119145
},
120-
overrides: [
121-
{
122-
files: ["*.svelte"],
123-
parser: "svelte-eslint-parser",
146+
{
147+
files: ["**/*.svelte", "*.svelte"],
148+
languageOptions: {
149+
parser: svelteParser,
124150
// Parse the `<script>` in `.svelte` as TypeScript by adding the following configuration.
125151
parserOptions: {
126-
parser: "@typescript-eslint/parser",
152+
parser: tsParser,
127153
},
128154
},
129155
// ...
130-
],
131-
// ...
132-
}
156+
},
157+
];
133158
```
134159

135160
#### Multiple parsers
136161

137162
If you want to switch the parser for each lang, specify the object.
138163

139-
```json
140-
{
141-
"parser": "svelte-eslint-parser",
142-
"parserOptions": {
143-
"parser": {
144-
"ts": "@typescript-eslint/parser",
145-
"js": "espree",
146-
"typescript": "@typescript-eslint/parser"
147-
}
148-
}
149-
}
164+
```js
165+
import tsParser from "@typescript-eslint/parser";
166+
import espree from "espree";
167+
export default [
168+
{
169+
files: ["**/*.svelte", "*.svelte"],
170+
languageOptions: {
171+
parser: svelteParser,
172+
parserOptions: {
173+
parser: {
174+
ts: tsParser,
175+
js: espree,
176+
typescript: tsParser,
177+
},
178+
},
179+
},
180+
},
181+
];
150182
```
151183

152-
#### Parser Object
184+
#### Parser module name
153185

154-
When using JavaScript configuration (`.eslintrc.js`), you can also give the parser object directly.
186+
When using JavaScript configuration (`eslint.config.js`), you can also give the parser module name.
155187

156188
```js
157-
const tsParser = require("@typescript-eslint/parser")
158-
const espree = require("espree")
159-
160-
module.exports = {
161-
parser: "svelte-eslint-parser",
162-
parserOptions: {
189+
export default [
190+
{
191+
files: ["**/*.svelte", "*.svelte"],
192+
languageOptions: {
193+
parser: svelteParser,
194+
parserOptions: {
163195
// Single parser
164-
parser: tsParser,
196+
parser: "@typescript-eslint/parser",
165197
// Multiple parser
166198
parser: {
167-
js: espree,
168-
ts: tsParser,
169-
}
199+
js: "espree",
200+
ts: "@typescript-eslint/parser",
201+
},
202+
},
170203
},
171-
}
204+
},
205+
];
172206
```
173207

174208
### parserOptions.svelteFeatures
175209

176210
You can use `parserOptions.svelteFeatures` property to specify how to parse related to Svelte features. For example:
177211

178-
```jsonc
179-
{
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-
}
191-
}
212+
```js
213+
export default [
214+
{
215+
files: ["**/*.svelte", "*.svelte"],
216+
languageOptions: {
217+
parser: svelteParser,
218+
parserOptions: {
219+
svelteFeatures: {
220+
/* -- Experimental Svelte Features -- */
221+
/* It may be changed or removed in minor versions without notice. */
222+
// Whether to parse the `generics` attribute.
223+
// See https://github.com/sveltejs/rfcs/pull/38
224+
experimentalGenerics: false,
225+
},
226+
},
227+
},
228+
},
229+
];
192230
```
193231

194232
### Runes support
195233

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

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

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

202-
```json
203-
{
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-
]
229-
}
240+
```js
241+
export default [
242+
{
243+
files: ["**/*.svelte", "*.svelte"],
244+
languageOptions: {
245+
parser: svelteParser,
246+
parserOptions: {
247+
parser: "...",
248+
/* ... */
249+
},
250+
},
251+
},
252+
{
253+
files: ["**/*.svelte.js", "*.svelte.js"],
254+
languageOptions: {
255+
parser: svelteParser,
256+
parserOptions: {
257+
/* ... */
258+
},
259+
},
260+
},
261+
{
262+
files: ["**/*.svelte.ts", "*.svelte.ts"],
263+
languageOptions: {
264+
parser: svelteParser,
265+
parserOptions: {
266+
parser: "...(ts parser)...",
267+
/* ... */
268+
},
269+
},
270+
},
271+
];
230272
```
231273

232274
## :computer: Editor Integrations
@@ -241,11 +283,7 @@ Example **.vscode/settings.json**:
241283

242284
```json
243285
{
244-
"eslint.validate": [
245-
"javascript",
246-
"javascriptreact",
247-
"svelte"
248-
]
286+
"eslint.validate": ["javascript", "javascriptreact", "svelte"]
249287
}
250288
```
251289

@@ -261,7 +299,7 @@ Welcome contributing!
261299

262300
Please use GitHub's Issues/PRs.
263301

264-
See also the documentation for the internal mechanism.
302+
See also the documentation for the internal mechanism.
265303

266304
- [internal-mechanism.md](./docs/internal-mechanism.md)
267305

0 commit comments

Comments
 (0)