Skip to content

Commit 0a95b39

Browse files
ota-meshiota-meshi
authored
Add to docs how to use it with @typescript-eslint/parser. (#23)
1 parent 2655ed2 commit 0a95b39

File tree

2 files changed

+53
-23
lines changed

2 files changed

+53
-23
lines changed

‎README.md

+33-18
Original file line numberDiff line numberDiff line change
@@ -102,46 +102,59 @@ If you are using [eslint-plugin-svelte3] you need to remove it.
102102

103103
If you have specified a parser, you need to configure a parser for `.svelte`.
104104

105-
For example, if you are using the `"@typescript-eslint/parser"`, configure it as follows:
105+
For example, if you are using the `"@babel/eslint-parser"`, configure it as follows:
106106

107107
```js
108108
module.exports = {
109109
// ...
110-
parser: "@typescript-eslint/parser",
110+
extends: ["plugin:@ota-meshi/svelte/recommended"],
111+
// ...
112+
parser: "@babel/eslint-parser",
111113
// Add an `overrides` section to add a parser configuration for svelte.
112114
overrides: [
113115
{
114116
files: ["*.svelte"],
115117
parser: "svelte-eslint-parser",
116118
},
119+
// ...
117120
],
118121
// ...
119122
}
120123
```
121124

122-
If you want to use TypeScript in `<script>` of `.svelte`, you need to add more `parserOptions` configuration.
125+
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.
123126

124127
```js
125128
module.exports = {
129+
// ...
130+
extends: ["plugin:@ota-meshi/svelte/recommended"],
131+
// ...
126132
parser: "@typescript-eslint/parser",
133+
parserOptions: {
134+
// ...
135+
project: "path/to/your/tsconfig.json",
136+
extraFileExtensions: [".svelte"], // This is a required setting in `@typescript-eslint/parser` v4.24.0.
137+
},
127138
overrides: [
128139
{
129140
files: ["*.svelte"],
130141
parser: "svelte-eslint-parser",
131-
// Parse the script in `.svelte` as TypeScript by adding the following configuration.
142+
// Parse the `<script>` in `.svelte` as TypeScript by adding the following configuration.
132143
parserOptions: {
133144
parser: "@typescript-eslint/parser",
134145
},
135146
},
147+
// ...
136148
],
149+
// ...
137150
}
138151
```
139152

140153
If you have a mix of TypeScript and JavaScript in your project, use a multiple parser configuration.
141154

142155
```js
143156
module.exports = {
144-
parser: "@typescript-eslint/parser",
157+
// ...
145158
overrides: [
146159
{
147160
files: ["*.svelte"],
@@ -155,7 +168,9 @@ module.exports = {
155168
},
156169
},
157170
},
171+
// ...
158172
],
173+
// ...
159174
}
160175
```
161176

@@ -224,19 +239,19 @@ The rules with the following star :star: are included in the configs.
224239

225240
<!--RULES_TABLE_START-->
226241

227-
| Rule ID | Description | |
228-
|:--------|:------------|:---|
229-
| [@ota-meshi/svelte/button-has-type](https://ota-meshi.github.io/eslint-plugin-svelte/rules/button-has-type.html) | disallow usage of button without an explicit type attribute | |
230-
| [@ota-meshi/svelte/comment-directive](https://ota-meshi.github.io/eslint-plugin-svelte/rules/comment-directive.html) | support comment-directives in HTML template | :star: |
231-
| [@ota-meshi/svelte/no-at-debug-tags](https://ota-meshi.github.io/eslint-plugin-svelte/rules/no-at-debug-tags.html) | disallow the use of `{@debug}` | :star: |
232-
| [@ota-meshi/svelte/no-at-html-tags](https://ota-meshi.github.io/eslint-plugin-svelte/rules/no-at-html-tags.html) | disallow use of `{@html}` to prevent XSS attack | :star: |
233-
| [@ota-meshi/svelte/no-dupe-else-if-blocks](https://ota-meshi.github.io/eslint-plugin-svelte/rules/no-dupe-else-if-blocks.html) | disallow duplicate conditions in `{#if}` / `{:else if}` chains | :star: |
234-
| [@ota-meshi/svelte/no-inner-declarations](https://ota-meshi.github.io/eslint-plugin-svelte/rules/no-inner-declarations.html) | disallow variable or `function` declarations in nested blocks | :star: |
235-
| [@ota-meshi/svelte/no-target-blank](https://ota-meshi.github.io/eslint-plugin-svelte/rules/no-target-blank.html) | disallow target="_blank" attribute without rel="noopener noreferrer" | |
236-
| [@ota-meshi/svelte/no-useless-mustaches](https://ota-meshi.github.io/eslint-plugin-svelte/rules/no-useless-mustaches.html) | disallow unnecessary mustache interpolations | :wrench: |
237-
| [@ota-meshi/svelte/prefer-class-directive](https://ota-meshi.github.io/eslint-plugin-svelte/rules/prefer-class-directive.html) | require class directives instead of ternary expressions | :wrench: |
238-
| [@ota-meshi/svelte/spaced-html-comment](https://ota-meshi.github.io/eslint-plugin-svelte/rules/spaced-html-comment.html) | enforce consistent spacing after the `<!--` and before the `-->` in a HTML comment | :wrench: |
239-
| [@ota-meshi/svelte/system](https://ota-meshi.github.io/eslint-plugin-svelte/rules/system.html) | system rule for working this plugin | :star: |
242+
| Rule ID | Description | |
243+
| :----------------------------------------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------------- | :------- |
244+
| [@ota-meshi/svelte/button-has-type](https://ota-meshi.github.io/eslint-plugin-svelte/rules/button-has-type.html) | disallow usage of button without an explicit type attribute | |
245+
| [@ota-meshi/svelte/comment-directive](https://ota-meshi.github.io/eslint-plugin-svelte/rules/comment-directive.html) | support comment-directives in HTML template | :star: |
246+
| [@ota-meshi/svelte/no-at-debug-tags](https://ota-meshi.github.io/eslint-plugin-svelte/rules/no-at-debug-tags.html) | disallow the use of `{@debug}` | :star: |
247+
| [@ota-meshi/svelte/no-at-html-tags](https://ota-meshi.github.io/eslint-plugin-svelte/rules/no-at-html-tags.html) | disallow use of `{@html}` to prevent XSS attack | :star: |
248+
| [@ota-meshi/svelte/no-dupe-else-if-blocks](https://ota-meshi.github.io/eslint-plugin-svelte/rules/no-dupe-else-if-blocks.html) | disallow duplicate conditions in `{#if}` / `{:else if}` chains | :star: |
249+
| [@ota-meshi/svelte/no-inner-declarations](https://ota-meshi.github.io/eslint-plugin-svelte/rules/no-inner-declarations.html) | disallow variable or `function` declarations in nested blocks | :star: |
250+
| [@ota-meshi/svelte/no-target-blank](https://ota-meshi.github.io/eslint-plugin-svelte/rules/no-target-blank.html) | disallow target="\_blank" attribute without rel="noopener noreferrer" | |
251+
| [@ota-meshi/svelte/no-useless-mustaches](https://ota-meshi.github.io/eslint-plugin-svelte/rules/no-useless-mustaches.html) | disallow unnecessary mustache interpolations | :wrench: |
252+
| [@ota-meshi/svelte/prefer-class-directive](https://ota-meshi.github.io/eslint-plugin-svelte/rules/prefer-class-directive.html) | require class directives instead of ternary expressions | :wrench: |
253+
| [@ota-meshi/svelte/spaced-html-comment](https://ota-meshi.github.io/eslint-plugin-svelte/rules/spaced-html-comment.html) | enforce consistent spacing after the `<!--` and before the `-->` in a HTML comment | :wrench: |
254+
| [@ota-meshi/svelte/system](https://ota-meshi.github.io/eslint-plugin-svelte/rules/system.html) | system rule for working this plugin | :star: |
240255

241256
<!--RULES_TABLE_END-->
242257
<!--RULES_SECTION_END-->

‎docs/user-guide/README.md

+20-5
Original file line numberDiff line numberDiff line change
@@ -61,46 +61,59 @@ If you are using [eslint-plugin-svelte3] you need to remove it.
6161

6262
If you have specified a parser, you need to configure a parser for `.svelte`.
6363

64-
For example, if you are using the `"@typescript-eslint/parser"`, configure it as follows:
64+
For example, if you are using the `"@babel/eslint-parser"`, configure it as follows:
6565

6666
```js
6767
module.exports = {
6868
// ...
69-
parser: "@typescript-eslint/parser",
69+
extends: ["plugin:@ota-meshi/svelte/recommended"],
70+
// ...
71+
parser: "@babel/eslint-parser",
7072
// Add an `overrides` section to add a parser configuration for svelte.
7173
overrides: [
7274
{
7375
files: ["*.svelte"],
7476
parser: "svelte-eslint-parser",
7577
},
78+
// ...
7679
],
7780
// ...
7881
}
7982
```
8083

81-
If you want to use TypeScript in `<script>` of `.svelte`, you need to add more `parserOptions` configuration.
84+
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.
8285

8386
```js
8487
module.exports = {
88+
// ...
89+
extends: ["plugin:@ota-meshi/svelte/recommended"],
90+
// ...
8591
parser: "@typescript-eslint/parser",
92+
parserOptions: {
93+
// ...
94+
project: "path/to/your/tsconfig.json",
95+
extraFileExtensions: [".svelte"], // This is a required setting in `@typescript-eslint/parser` v4.24.0.
96+
},
8697
overrides: [
8798
{
8899
files: ["*.svelte"],
89100
parser: "svelte-eslint-parser",
90-
// Parse the script in `.svelte` as TypeScript by adding the following configuration.
101+
// Parse the `<script>` in `.svelte` as TypeScript by adding the following configuration.
91102
parserOptions: {
92103
parser: "@typescript-eslint/parser",
93104
},
94105
},
106+
// ...
95107
],
108+
// ...
96109
}
97110
```
98111

99112
If you have a mix of TypeScript and JavaScript in your project, use a multiple parser configuration.
100113

101114
```js
102115
module.exports = {
103-
parser: "@typescript-eslint/parser",
116+
// ...
104117
overrides: [
105118
{
106119
files: ["*.svelte"],
@@ -114,7 +127,9 @@ module.exports = {
114127
},
115128
},
116129
},
130+
// ...
117131
],
132+
// ...
118133
}
119134
```
120135

0 commit comments

Comments
 (0)