Skip to content

Commit 1ac2344

Browse files
baseballyamabaseballyama
committed
chore: update README
1 parent 117d247 commit 1ac2344

File tree

1 file changed

+96
-134
lines changed

1 file changed

+96
-134
lines changed

‎README.md

+96-134
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,3 @@
1-
# svelte-eslint-parser
2-
3-
[Svelte] parser for [ESLint].
4-
You can check it on [Online DEMO](https://sveltejs.github.io/svelte-eslint-parser/playground).
5-
6-
> [!NOTE]
7-
> This README is in development.\
8-
> Please refer to the README for the version you are using.\
9-
> For example, <https://github.com/sveltejs/svelte-eslint-parser/blob/v0.43.0/README.md>
10-
111
[![NPM license](https://img.shields.io/npm/l/svelte-eslint-parser.svg)](https://www.npmjs.com/package/svelte-eslint-parser)
122
[![NPM version](https://img.shields.io/npm/v/svelte-eslint-parser.svg)](https://www.npmjs.com/package/svelte-eslint-parser)
133
[![NPM downloads](https://img.shields.io/badge/dynamic/json.svg?label=downloads&colorB=green&suffix=/day&query=$.downloads&uri=https://api.npmjs.org//downloads/point/last-day/svelte-eslint-parser&maxAge=3600)](http://www.npmtrends.com/svelte-eslint-parser)
@@ -18,47 +8,67 @@ You can check it on [Online DEMO](https://sveltejs.github.io/svelte-eslint-parse
188
[![Build Status](https://github.com/sveltejs/svelte-eslint-parser/workflows/CI/badge.svg?branch=main)](https://github.com/sveltejs/svelte-eslint-parser/actions?query=workflow%3ACI)
199
[![Coverage Status](https://coveralls.io/repos/github/sveltejs/svelte-eslint-parser/badge.svg?branch=main)](https://coveralls.io/github/sveltejs/svelte-eslint-parser?branch=main)
2010

21-
## ⤴️ Motivation
11+
<div align="center">
12+
13+
# svelte-eslint-parser
14+
15+
## [Svelte](https://svelte.dev/) parser for [ESLint](https://eslint.org/).
16+
17+
[Live DEMO](https://sveltejs.github.io/svelte-eslint-parser/playground) •
18+
[Discord](https://svelte.dev/chat)
19+
20+
</div>
2221

23-
The [svelte-eslint-parser] aims to make it easy to create your own ESLint rules for [Svelte].
22+
## Motivation
2423

25-
The [`eslint-plugin-svelte`] is an ESLint plugin that uses the [svelte-eslint-parser]. I have already [implemented some rules].
24+
The `svelte-eslint-parser` aims to make it easy to create your own ESLint rules for [Svelte](https://svelte.dev/).
2625

27-
[`eslint-plugin-svelte`]: https://github.com/sveltejs/eslint-plugin-svelte
28-
[implemented some rules]: https://sveltejs.github.io/eslint-plugin-svelte/rules/
26+
[eslint-plugin-svelte](https://github.com/sveltejs/eslint-plugin-svelte) is an ESLint plugin built upon this parser, and it already [implements some rules](https://sveltejs.github.io/eslint-plugin-svelte/rules/).
2927

3028
### ESLint Plugins Using svelte-eslint-parser
3129

3230
#### [eslint-plugin-svelte](https://sveltejs.github.io/eslint-plugin-svelte/)
3331

3432
ESLint plugin for Svelte.
35-
It provides many unique check rules by using the template AST.
33+
Provides a variety of template-based checks using the Svelte AST.
3634

3735
#### [@intlify/eslint-plugin-svelte](https://github.com/intlify/eslint-plugin-svelte)
3836

39-
ESLint plugin for internationalization (i18n) with Svelte.
40-
It provides rules to help internationalization your application created with Svelte.
37+
ESLint plugin for internationalization (i18n) in Svelte applications, offering helpful i18n-related rules.
4138

42-
## 💿 Installation
39+
---
40+
41+
## Installation
4342

4443
```bash
4544
npm install --save-dev eslint svelte-eslint-parser
4645
```
4746

48-
## 📖 Usage
47+
---
48+
49+
## Usage
4950

50-
1. Write `parser` option into your ESLint Config file.
51-
2. Use glob patterns or `--ext .svelte` CLI option.
51+
1. In your ESLint config, set the `parser` option to `svelte-eslint-parser`.
52+
2. Use glob patterns or the `--ext .svelte` CLI option to include `.svelte` files.
5253

5354
### ESLint Config (`eslint.config.js`)
5455

5556
```js
5657
import js from "@eslint/js";
5758
import svelteParser from "svelte-eslint-parser";
59+
5860
export default [
5961
js.configs.recommended,
6062
{
61-
files: ["**/*.svelte", "*.svelte"],
63+
files: [
64+
"**/*.svelte",
65+
"*.svelte",
66+
// Need to specify the file extension for Svelte 5 with rune symbols
67+
"**/*.svelte.js",
68+
"*.svelte.js",
69+
"**/*.svelte.ts",
70+
"*.svelte.ts",
71+
],
6272
languageOptions: {
6373
parser: svelteParser,
6474
},
@@ -68,23 +78,29 @@ export default [
6878

6979
### CLI
7080

71-
```console
72-
$ eslint "src/**/*.{js,svelte}"
81+
```bash
82+
eslint "src/**/*.{js,svelte}"
7383
# or
74-
$ eslint src --ext .svelte
84+
eslint src --ext .svelte
7585
```
7686

77-
## 🔧 Options
87+
---
88+
89+
## Options
90+
91+
The [parserOptions](https://eslint.org/docs/latest/use/configure/parser#configure-parser-options) for this parser generally match what [espree](https://github.com/eslint/espree#usage)—ESLint's default parser—supports.
7892

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

8295
```js
8396
import svelteParser from "svelte-eslint-parser";
97+
8498
export default [
8599
// ...
86100
{
87-
files: ["**/*.svelte", "*.svelte"],
101+
files: [
102+
// Set .svelte/.js/.ts files. See above for more details.
103+
],
88104
languageOptions: {
89105
parser: svelteParser,
90106
parserOptions: {
@@ -101,20 +117,18 @@ export default [
101117
];
102118
```
103119

104-
[`parserOptions`]: https://eslint.org/docs/latest/use/configure/parser#configure-parser-options
105-
106120
### parserOptions.parser
107121

108-
You can use `parserOptions.parser` property to specify a custom parser to parse `<script>` tags.
109-
Other properties than parser would be given to the specified parser.
110-
111-
For example in `eslint.config.js`:
122+
Use the `parserOptions.parser` property to define a custom parser for `<script>` tags. Any additional parser options (besides the parser itself) are passed along to the specified parser.
112123

113124
```js
114125
import tsParser from "@typescript-eslint/parser";
126+
115127
export default [
116128
{
117-
files: ["**/*.svelte", "*.svelte"],
129+
files: [
130+
// Set .svelte/.js/.ts files. See above for more details.
131+
],
118132
languageOptions: {
119133
parser: svelteParser,
120134
parserOptions: {
@@ -125,54 +139,52 @@ export default [
125139
];
126140
```
127141

128-
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.
142+
#### Using TypeScript in `<script>`
129143

130-
For example in `eslint.config.js`:
144+
If you use `@typescript-eslint/parser` for TypeScript within `<script>` of `.svelte` files, additional configuration is needed. For example:
131145

132146
```js
133147
import tsParser from "@typescript-eslint/parser";
148+
134149
export default [
135-
// ...
150+
// Other config for non-Svelte files
136151
{
137-
// ...
138152
languageOptions: {
139153
parser: tsParser,
140154
parserOptions: {
141-
// ...
142155
project: "path/to/your/tsconfig.json",
143-
extraFileExtensions: [".svelte"], // This is a required setting in `@typescript-eslint/parser` v4.24.0.
156+
extraFileExtensions: [".svelte"], // required since v4.24.0
144157
},
145158
},
146159
},
160+
// Svelte config
147161
{
148-
files: ["**/*.svelte", "*.svelte"],
162+
files: [
163+
// Set .svelte/.js/.ts files. See above for more details.
164+
],
149165
languageOptions: {
150-
parser: svelteParser,
151-
// Parse the `<script>` in `.svelte` as TypeScript by adding the following configuration.
152-
parserOptions: {
166+
// Parse <script> in `.svelte` as TypeScript
153167
parser: tsParser,
154168
},
155169
},
156-
// ...
157170
},
158171
];
159172
```
160173

161174
#### Multiple parsers
162175

163-
If you want to switch the parser for each lang, specify the object.
164-
165-
For example in `eslint.config.js`:
176+
To switch parsers for each language, provide an object:
166177

167178
```js
168179
import tsParser from "@typescript-eslint/parser";
169180
import espree from "espree";
181+
170182
export default [
171183
{
172-
files: ["**/*.svelte", "*.svelte"],
184+
files: [
185+
// Set .svelte/.js/.ts files. See above for more details.
186+
],
173187
languageOptions: {
174-
parser: svelteParser,
175-
parserOptions: {
176188
parser: {
177189
ts: tsParser,
178190
js: espree,
@@ -186,47 +198,46 @@ export default [
186198

187199
### parserOptions.svelteConfig
188200

189-
If you are using `eslint.config.js`, you can provide a `svelte.config.js` in the `parserOptions.svelteConfig` property.
190-
191-
For example:
201+
If you use `eslint.config.js`, you can specify a `svelte.config.js` file via `parserOptions.svelteConfig`.
192202

193203
```js
194204
import svelteConfig from "./svelte.config.js";
205+
195206
export default [
196207
{
197-
files: ["**/*.svelte", "*.svelte"],
208+
files: [
209+
// Set .svelte/.js/.ts files. See above for more details.
210+
],
198211
languageOptions: {
199-
parser: svelteParser,
200-
parserOptions: {
201212
svelteConfig,
202213
},
203214
},
204215
},
205216
];
206217
```
207218

208-
If `parserOptions.svelteConfig` is not specified, some config will be statically parsed from the `svelte.config.js` file.
209-
210-
The `.eslintrc.*` style configuration cannot load `svelte.config.js` because it cannot use ESM. We recommend using the `eslint.config.js` style configuration.
219+
If `parserOptions.svelteConfig` is not set, the parser attempts to statically read some config from `svelte.config.js`.
211220

212221
### parserOptions.svelteFeatures
213222

214-
You can use `parserOptions.svelteFeatures` property to specify how to parse related to Svelte features.
223+
You can configure how Svelte-specific features are parsed via `parserOptions.svelteFeatures`.
215224

216-
For example in `eslint.config.js`:
225+
For example:
217226

218227
```js
219228
export default [
220229
{
221-
files: ["**/*.svelte", "*.svelte"],
230+
files: [
231+
// Set .svelte/.js/.ts files. See above for more details.
232+
],
222233
languageOptions: {
223234
parser: svelteParser,
224235
parserOptions: {
225236
svelteFeatures: {
226-
// This option is for Svelte 5. The default value is `true`.
227-
// If `false`, ESLint will not recognize rune symbols.
228-
// If not configured this option, The parser will try to read the option from `compilerOptions.runes` from `svelte.config.js`.
229-
// If `parserOptions.svelteConfig` is not specified and the file cannot be parsed by static analysis, it will behave as `true`.
237+
// This is for Svelte 5. The default is true.
238+
// If false, ESLint won't recognize rune symbols.
239+
// If not specified, the parser tries to read compilerOptions.runes from `svelte.config.js`.
240+
// If `parserOptions.svelteConfig` is not given and static analysis fails, it defaults to true.
230241
runes: true,
231242
},
232243
},
@@ -235,88 +246,39 @@ export default [
235246
];
236247
```
237248

238-
### Runes support
239-
240-
If you install Svelte v5 the parser will be able to parse runes, and will also be able to parse `*.js` and `*.ts` files.
241-
If you don't want to use Runes, you may need to configure. Please read [parserOptions.svelteFeatures](#parseroptionssveltefeatures) for more details.
242-
243-
When using this mode in an ESLint configuration, it is recommended to set it per file pattern as below.
249+
---
244250

245-
For example in `eslint.config.js`:
246-
247-
```js
248-
import svelteConfig from "./svelte.config.js";
249-
export default [
250-
{
251-
files: ["**/*.svelte", "*.svelte"],
252-
languageOptions: {
253-
parser: svelteParser,
254-
parserOptions: {
255-
parser: "...",
256-
svelteConfig,
257-
/* ... */
258-
},
259-
},
260-
},
261-
{
262-
files: ["**/*.svelte.js", "*.svelte.js"],
263-
languageOptions: {
264-
parser: svelteParser,
265-
parserOptions: {
266-
svelteConfig,
267-
/* ... */
268-
},
269-
},
270-
},
271-
{
272-
files: ["**/*.svelte.ts", "*.svelte.ts"],
273-
languageOptions: {
274-
parser: svelteParser,
275-
parserOptions: {
276-
parser: "...(ts parser)...",
277-
svelteConfig,
278-
/* ... */
279-
},
280-
},
281-
},
282-
];
283-
```
284-
285-
## :computer: Editor Integrations
251+
## Editor Integrations
286252

287253
### Visual Studio Code
288254

289-
Use the [dbaeumer.vscode-eslint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) extension that Microsoft provides officially.
255+
Use the [dbaeumer.vscode-eslint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) extension provided by Microsoft.
290256

291-
You have to configure the `eslint.validate` option of the extension to check `.svelte` files, because the extension targets only `*.js` or `*.jsx` files by default.
292-
293-
Example **.vscode/settings.json**:
257+
By default, it only targets `*.js` and `*.jsx`, so you need to configure `.svelte` file support. For example, in **.vscode/settings.json**:
294258

295259
```json
296260
{
297261
"eslint.validate": ["javascript", "javascriptreact", "svelte"]
298262
}
299263
```
300264

301-
## Usage for Custom Rules / Plugins
302-
303-
- [AST.md](./docs/AST.md) is AST specification. You can check it on the [Online DEMO](https://sveltejs.github.io/svelte-eslint-parser/).
304-
- The parser will generate its own [ScopeManager](https://eslint.org/docs/developer-guide/scope-manager-interface). You can check it on the [Online DEMO](https://sveltejs.github.io/svelte-eslint-parser/scope).
305-
- I have already [implemented some rules] in the [`eslint-plugin-svelte`]. The source code for these rules will be helpful to you.
265+
---
306266

307-
## :beers: Contributing
267+
## Usage for Custom Rules / Plugins
308268

309-
Welcome contributing!
269+
- See [AST.md](./docs/AST.md) for the AST specification. You can explore it on the [Live DEMO](https://sveltejs.github.io/svelte-eslint-parser/).
270+
- This parser generates its own [ScopeManager](https://eslint.org/docs/developer-guide/scope-manager-interface). Check the [Live DEMO](https://sveltejs.github.io/svelte-eslint-parser/scope).
271+
- Several rules are [already implemented] in [`eslint-plugin-svelte`], and their source code can be a helpful reference.
310272

311-
Please use GitHub's Issues/PRs.
273+
---
312274

313-
See also the documentation for the internal mechanism.
275+
## Contributing
314276

315-
- [internal-mechanism.md](./docs/internal-mechanism.md)
277+
Contributions are welcome! Please open an issue or submit a PR on GitHub.
278+
For internal details, see [internal-mechanism.md](./docs/internal-mechanism.md).
316279

317-
## :lock: License
280+
---
318281

319-
See the [LICENSE](LICENSE) file for license rights and limitations (MIT).
282+
## License
320283

321-
[Svelte]: https://svelte.dev/
322-
[ESLint]: https://eslint.org/
284+
See [LICENSE](LICENSE) (MIT) for rights and limitations.

0 commit comments

Comments
 (0)