Skip to content

Commit 3b5c760

Browse files
BenoitZugmeyerBenoitZugmeyer
committed
doc: update config examples for ESLint v9
1 parent 5860da0 commit 3b5c760

File tree

1 file changed

+236
-35
lines changed

1 file changed

+236
-35
lines changed

‎README.md‎

Lines changed: 236 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -35,16 +35,33 @@ Simply install via `npm install --save-dev eslint-plugin-html` and add the plugi
3535
configuration. See
3636
[ESLint documentation](http://eslint.org/docs/user-guide/configuring#configuring-plugins).
3737

38-
Example:
38+
<details open>
39+
<summary>Example with ESLint 9 and above (flat config)</summary>
3940

4041
```javascript
42+
import html from "eslint-plugin-html"
43+
44+
export default [
45+
{
46+
files: ["**/*.html"],
47+
plugins: { html },
48+
},
49+
]
50+
```
51+
52+
</details>
53+
54+
<details>
55+
<summary>Example with ESLint 8 and below</summary>
56+
57+
```json
4158
{
42-
"plugins": [
43-
"html"
44-
]
59+
"plugins": ["html"]
4560
}
4661
```
4762

63+
</details>
64+
4865
## Disabling ESLint
4966

5067
To temporarily disable ESLint, use the `<!-- eslint-disable -->` HTML comment. Re-enable it with
@@ -91,14 +108,35 @@ option](https://eslint.org/docs/user-guide/configuring#specifying-parser-options
91108
if the script are modules. `eslint-plugin-html` will use this option as well to know if the scopes
92109
should be shared (the default) or not. To change this, just set it in your ESLint configuration:
93110

111+
<details open>
112+
<summary>ESLint 9 and above (flat config)</summary>
113+
114+
```javascript
115+
export default [
116+
{
117+
// ...
118+
languageOptions: {
119+
sourceType: "module",
120+
},
121+
},
122+
]
94123
```
124+
125+
</details>
126+
127+
<details>
128+
<summary>ESLint 8 and below</summary>
129+
130+
```json
95131
{
96132
"parserOptions": {
97133
"sourceType": "module"
98134
}
99135
}
100136
```
101137

138+
</details>
139+
102140
To illustrate this behavior, consider this HTML extract:
103141

104142
```html
@@ -142,79 +180,197 @@ By default, this plugin will only consider files ending with those extensions as
142180
`.handlebars`, `.hbs`, `.htm`, `.html`, `.mustache`, `.nunjucks`, `.php`, `.tag`, `.twig`, `.we`.
143181
You can set your own list of HTML extensions by using this setting. Example:
144182

183+
<details open>
184+
<summary>ESLint 9 and above (flat config)</summary>
185+
145186
```javascript
187+
export default [
188+
{
189+
files: ["**/*.html", "**/*.we"],
190+
plugins: { html },
191+
settings: {
192+
"html/html-extensions": [".html", ".we"], // consider .html and .we files as HTML
193+
},
194+
},
195+
]
196+
```
197+
198+
Note: you need to specify extensions twice, which is not ideal. This should be imporved in the
199+
future.
200+
201+
</details>
202+
203+
<details>
204+
<summary>ESLint 8 and below</summary>
205+
206+
```json
146207
{
147-
"plugins": [ "html" ],
148-
"settings": {
149-
"html/html-extensions": [".html", ".we"], // consider .html and .we files as HTML
150-
}
208+
"plugins": ["html"],
209+
"settings": {
210+
"html/html-extensions": [".html", ".we"] // consider .html and .we files as HTML
211+
}
151212
}
152213
```
153214

215+
</details>
216+
154217
### `html/xml-extensions`
155218

156219
By default, this plugin will only consider files ending with those extensions as XML: `.xhtml`,
157220
`.xml`. You can set your own list of XML extensions by using this setting. Example:
158221

222+
<details open>
223+
<summary>ESLint 9 and above (flat config)</summary>
224+
159225
```javascript
226+
export default [
227+
{
228+
files: ["**/*.html"],
229+
plugins: { html },
230+
settings: {
231+
"html/xtml-extensions": [".html"], // consider .html files as XML
232+
},
233+
},
234+
]
235+
```
236+
237+
Note: you need to specify extensions twice, which is not ideal. This should be imporved in the
238+
future.
239+
240+
</details>
241+
242+
<details>
243+
<summary>ESLint 8 and below</summary>
244+
245+
```json
160246
{
161-
"plugins": [ "html" ],
162-
"settings": {
163-
"html/xml-extensions": [".html"], // consider .html files as XML
164-
}
247+
"plugins": ["html"],
248+
"settings": {
249+
"html/xml-extensions": [".html"] // consider .html files as XML
250+
}
165251
}
166252
```
167253

254+
</details>
255+
168256
### `html/indent`
169257

170258
By default, the code between `<script>` tags is dedented according to the first non-empty line. The
171259
setting `html/indent` allows to ensure that every script tags follow an uniform indentation. Like
172260
the `indent` rule, you can pass a number of spaces, or `"tab"` to indent with one tab. Prefix this
173261
value with a `+` to be relative to the `<script>` tag indentation. Example:
174262

263+
<details open>
264+
<summary>ESLint 9 and above (flat config)</summary>
265+
175266
```javascript
267+
export default [
268+
{
269+
files: ["**/*.html"],
270+
plugins: { html },
271+
settings: {
272+
"html/indent": "0", // code should start at the beginning of the line (no initial indentation).
273+
"html/indent": "+2", // indentation is the <script> indentation plus two spaces.
274+
"html/indent": "tab", // indentation is one tab at the beginning of the line.
275+
},
276+
},
277+
]
278+
```
279+
280+
</details>
281+
282+
<details>
283+
<summary>ESLint 8 and below</summary>
284+
285+
```json
176286
{
177-
"plugins": [ "html" ],
178-
"settings": {
179-
"html/indent": "0", // code should start at the beginning of the line (no initial indentation).
180-
"html/indent": "+2", // indentation is the <script> indentation plus two spaces.
181-
"html/indent": "tab", // indentation is one tab at the beginning of the line.
182-
}
287+
"plugins": ["html"],
288+
"settings": {
289+
"html/indent": "0", // code should start at the beginning of the line (no initial indentation).
290+
"html/indent": "+2", // indentation is the <script> indentation plus two spaces.
291+
"html/indent": "tab" // indentation is one tab at the beginning of the line.
292+
}
183293
}
184294
```
185295

296+
</details>
297+
186298
### `html/report-bad-indent`
187299

188300
By default, this plugin won't warn if it encounters a problematic indentation (ex: a line is under
189301
indented). If you want to make sure the indentation is correct, use the `html/report-bad-indent` in
190302
conjunction with the `indent` rule. Pass `"warn"` or `1` to display warnings, `"error"` or `2` to
191303
display errors. Example:
192304

305+
<details open>
306+
<summary>ESLint 9 and above (flat config)</summary>
307+
193308
```javascript
309+
export default [
310+
{
311+
files: ["**/*.html"],
312+
plugins: { html },
313+
settings: {
314+
"html/report-bad-indent": "error",
315+
},
316+
},
317+
]
318+
```
319+
320+
</details>
321+
322+
<details>
323+
<summary>ESLint 8 and below</summary>
324+
325+
```json
194326
{
195-
"plugins": [ "html" ],
196-
"settings": {
197-
"html/report-bad-indent": "error",
198-
}
327+
"plugins": ["html"],
328+
"settings": {
329+
"html/report-bad-indent": "error"
330+
}
199331
}
200332
```
201333

334+
</details>
335+
202336
### `html/javascript-tag-names`
203337

204338
By default, the code between `<script>` tags is considered as JavaScript. You can customize which
205339
tags should be considered JavaScript by providing one or multiple tag names.
206340

207341
Example:
208342

343+
<details open>
344+
<summary>ESLint 9 and above (flat config)</summary>
345+
209346
```javascript
347+
export default [
348+
{
349+
files: ["**/*.html"],
350+
plugins: { html },
351+
settings: {
352+
"html/javascript-tag-names": ["script", "customscript"],
353+
},
354+
},
355+
]
356+
```
357+
358+
</details>
359+
360+
<details>
361+
<summary>ESLint 8 and below</summary>
362+
363+
```json
210364
{
211-
"plugins": [ "html" ],
212-
"settings": {
213-
"html/javascript-tag-names": ["script", "customscript"],
214-
}
365+
"plugins": ["html"],
366+
"settings": {
367+
"html/javascript-tag-names": ["script", "customscript"]
368+
}
215369
}
216370
```
217371

372+
</details>
373+
218374
### `html/javascript-mime-types`
219375

220376
By default, the code between `<script>` tags is considered as JavaScript code only if there is no
@@ -223,31 +379,76 @@ By default, the code between `<script>` tags is considered as JavaScript code on
223379
customize the types that should be considered as JavaScript by providing one or multiple MIME types.
224380
If a MIME type starts with a `/`, it will be considered as a regular expression. Example:
225381

382+
<details open>
383+
<summary>ESLint 9 and above (flat config)</summary>
384+
226385
```javascript
386+
export default [
387+
{
388+
files: ["**/*.html"],
389+
plugins: { html },
390+
settings: {
391+
"html/javascript-mime-types": ["text/javascript", "text/jsx"], // also use script tags with a "text/jsx" type attribute
392+
"html/javascript-mime-types": "/^text\\/(javascript|jsx)$/", // same thing
393+
},
394+
},
395+
]
396+
```
397+
398+
</details>
399+
400+
<details>
401+
<summary>ESLint 8 and below</summary>
402+
403+
```json
227404
{
228-
"plugins": [ "html" ],
229-
"settings": {
230-
"html/javascript-mime-types": ["text/javascript", "text/jsx"], // also use script tags with a "text/jsx" type attribute
231-
"html/javascript-mime-types": "/^text\\/(javascript|jsx)$/", // same thing
232-
}
405+
"plugins": ["html"],
406+
"settings": {
407+
"html/javascript-mime-types": ["text/javascript", "text/jsx"], // also use script tags with a "text/jsx" type attribute
408+
"html/javascript-mime-types": "/^text\\/(javascript|jsx)$/" // same thing
409+
}
233410
}
234411
```
235412

413+
</details>
414+
236415
### `html/ignore-tags-without-type`
237416

238417
By default, the code between `<script>` tags is considered JavaScript if there is no `type`
239418
attribute. You can set this setting to `true` to ignore script tags without a `type` attribute.
240419
Example:
241420

421+
<details open>
422+
<summary>ESLint 9 and above (flat config)</summary>
423+
242424
```javascript
425+
export default [
426+
{
427+
files: ["**/*.html"],
428+
plugins: { html },
429+
settings: {
430+
"html/ignore-tags-without-type": true,
431+
},
432+
},
433+
]
434+
```
435+
436+
</details>
437+
438+
<details>
439+
<summary>ESLint 8 and below</summary>
440+
441+
```json
243442
{
244-
"plugins": [ "html" ],
245-
"settings": {
246-
"html/ignore-tags-without-type": true,
247-
}
443+
"plugins": ["html"],
444+
"settings": {
445+
"html/ignore-tags-without-type": true
446+
}
248447
}
249448
```
250449

450+
</details>
451+
251452
## Troubleshooting
252453

253454
### No file linted when running `eslint` on a directory

0 commit comments

Comments
 (0)