Skip to content

Commit b136ab4

Browse files
ota-meshiota-meshi
authored
feat!: change the plugin to an ESM-only package (#932)
This PR changes the plugin to an ESM-only package. ~~However, it is not yet a fully ESM-only package, as we have not yet made the parser ESM.~~ Close #808
1 parent 4c130da commit b136ab4

File tree

218 files changed

+1122
-1505
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

218 files changed

+1122
-1505
lines changed

‎.changeset/thick-items-retire.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"eslint-plugin-svelte": major
3+
---
4+
5+
feat!: change the plugin to an ESM-only package

‎.env-cmdrc.js

-22
This file was deleted.

‎.env-cmdrc.json

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
{
2+
"version": {
3+
"IN_VERSION_SCRIPT": "true"
4+
},
5+
"version-ci": {
6+
"IN_VERSION_CI_SCRIPT": "true"
7+
},
8+
"debug": {
9+
"DEBUG": "eslint-plugin-svelte*"
10+
},
11+
"update-fixtures": {
12+
"UPDATE_FIXTURES": "true"
13+
}
14+
}

‎README.md

+73-138
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,12 @@
44
It provides many unique check rules by using the template AST.
55
You can check on the [Online DEMO](https://eslint-online-playground.netlify.app/#eslint-plugin-svelte%20with%20typescript).
66

7+
> [!NOTE]
8+
> This document is in development.\
9+
> Please refer to the document for the version you are using.\
10+
> For example, <https://github.com/sveltejs/eslint-plugin-svelte/blob/eslint-plugin-svelte%402.46.0/README.md>
11+
> and <https://github.com/sveltejs/eslint-plugin-svelte/blob/eslint-plugin-svelte%402.46.0/docs>
12+
713
**_We are working on experimental support for Svelte v5, but may break with new versions of Svelte v5._**
814

915
[![NPM license](https://img.shields.io/npm/l/eslint-plugin-svelte.svg)](https://www.npmjs.com/package/eslint-plugin-svelte)
@@ -68,8 +74,6 @@ npm install --save-dev eslint eslint-plugin-svelte svelte
6874

6975
### Configuration
7076

71-
#### New Config (`eslint.config.js`)
72-
7377
Use `eslint.config.js` file to configure rules. See also: <https://eslint.org/docs/latest/use/configure/configuration-files-new>.
7478

7579
Example **eslint.config.js**:
@@ -79,7 +83,7 @@ import eslintPluginSvelte from 'eslint-plugin-svelte';
7983
export default [
8084
// add more generic rule sets here, such as:
8185
// js.configs.recommended,
82-
...eslintPluginSvelte.configs['flat/recommended'],
86+
...eslintPluginSvelte.configs.recommended,
8387
{
8488
rules: {
8589
// override/add rules settings here, such as:
@@ -91,129 +95,67 @@ export default [
9195

9296
This plugin provides configs:
9397

94-
- `eslintPluginSvelte.configs['flat/base']` ... Configuration to enable correct Svelte parsing.
95-
- `eslintPluginSvelte.configs['flat/recommended']` ... Above, plus rules to prevent errors or unintended behavior.
96-
- `eslintPluginSvelte.configs['flat/prettier']` ... Turns off rules that may conflict with [Prettier](https://prettier.io/) (You still need to configure prettier to work with svelte yourself, for example by using [prettier-plugin-svelte](https://github.com/sveltejs/prettier-plugin-svelte).).
97-
- `eslintPluginSvelte.configs['flat/all']` ... All rules. This configuration is not recommended for production use because it changes with every minor and major version of `eslint-plugin-svelte`. Use it at your own risk.
98+
- `eslintPluginSvelte.configs.base` ... Configuration to enable correct Svelte parsing.
99+
- `eslintPluginSvelte.configs.recommended` ... Above, plus rules to prevent errors or unintended behavior.
100+
- `eslintPluginSvelte.configs.prettier` ... Turns off rules that may conflict with [Prettier](https://prettier.io/) (You still need to configure prettier to work with svelte yourself, for example by using [prettier-plugin-svelte](https://github.com/sveltejs/prettier-plugin-svelte).).
101+
- `eslintPluginSvelte.configs.all` ... All rules. This configuration is not recommended for production use because it changes with every minor and major version of `eslint-plugin-svelte`. Use it at your own risk.
98102

99103
See [the rule list](https://sveltejs.github.io/eslint-plugin-svelte/rules/) to get the `rules` that this plugin provides.
100104

101-
#### Legacy Config (`.eslintrc`)
102-
103-
Use `.eslintrc.*` file to configure rules. See also: <https://eslint.org/docs/user-guide/configuring>.
104-
105-
Example **.eslintrc.js**:
106-
107-
```js
108-
module.exports = {
109-
extends: [
110-
// add more generic rule sets here, such as:
111-
// 'eslint:recommended',
112-
'plugin:svelte/recommended'
113-
],
114-
rules: {
115-
// override/add rules settings here, such as:
116-
// 'svelte/rule-name': 'error'
117-
}
118-
};
119-
```
120-
121-
This plugin provides configs:
122-
123-
- `plugin:svelte/base` ... Configuration to enable correct Svelte parsing.
124-
- `plugin:svelte/recommended` ... Above, plus rules to prevent errors or unintended behavior.
125-
- `plugin:svelte/prettier` ... Turns off rules that may conflict with [Prettier](https://prettier.io/) (You still need to configure prettier to work with svelte yourself, for example by using [prettier-plugin-svelte](https://github.com/sveltejs/prettier-plugin-svelte).).
126-
- `plugin:svelte/all` ... All rules. This configuration is not recommended for production use because it changes with every minor and major version of `eslint-plugin-svelte`. Use it at your own risk.
127-
128-
See [the rule list](https://sveltejs.github.io/eslint-plugin-svelte/rules/) to get the `rules` that this plugin provides.
129-
130-
::: warning ❗ Attention
131-
132-
The `eslint-plugin-svelte` can not be used with the [eslint-plugin-svelte3].
133-
If you are using [eslint-plugin-svelte3] you need to remove it.
134-
135-
```diff
136-
"plugins": [
137-
- "svelte3"
138-
]
139-
```
140-
141-
:::
142-
143105
#### Parser Configuration
144106

145107
If you have specified a parser, you need to configure a parser for `.svelte`.
146108

147-
For example, if you are using the `"@babel/eslint-parser"`, configure it as follows:
148-
149-
```js
150-
module.exports = {
151-
// ...
152-
extends: ['plugin:svelte/recommended'],
153-
// ...
154-
parser: '@babel/eslint-parser',
155-
// Add an `overrides` section to add a parser configuration for svelte.
156-
overrides: [
157-
{
158-
files: ['*.svelte'],
159-
parser: 'svelte-eslint-parser'
160-
}
161-
// ...
162-
]
163-
// ...
164-
};
165-
```
166-
167109
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.
168110

169111
```js
170-
module.exports = {
171-
// ...
172-
extends: ['plugin:svelte/recommended'],
173-
// ...
174-
parser: '@typescript-eslint/parser',
175-
parserOptions: {
176-
// ...
177-
project: 'path/to/your/tsconfig.json',
178-
extraFileExtensions: ['.svelte'] // This is a required setting in `@typescript-eslint/parser` v4.24.0.
179-
},
180-
overrides: [
181-
{
182-
files: ['*.svelte'],
183-
parser: 'svelte-eslint-parser',
184-
// Parse the `<script>` in `.svelte` as TypeScript by adding the following configuration.
112+
import eslintPluginSvelte from 'eslint-plugin-svelte';
113+
import * as svelteParser from 'svelte-eslint-parser';
114+
import * as typescriptParser from '@typescript-eslint/parser';
115+
export default [
116+
...js.configs.recommended,
117+
...eslintPluginSvelte.configs.recommended,
118+
{
119+
files: ['**/*.svelte'],
120+
languageOptions: {
121+
parser: svelteParser,
185122
parserOptions: {
186-
parser: '@typescript-eslint/parser'
123+
parser: typescriptParser,
124+
project: './path/to/your/tsconfig.json',
125+
extraFileExtensions: ['.svelte']
187126
}
188127
}
189-
// ...
190-
]
191-
// ...
192-
};
128+
}
129+
];
193130
```
194131

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

197134
```js
198-
module.exports = {
199-
// ...
200-
overrides: [
201-
{
202-
files: ['*.svelte'],
203-
parser: 'svelte-eslint-parser',
135+
import eslintPluginSvelte from 'eslint-plugin-svelte';
136+
import * as svelteParser from 'svelte-eslint-parser';
137+
import * as typescriptParser from '@typescript-eslint/parser';
138+
import espree from 'espree';
139+
export default [
140+
...js.configs.recommended,
141+
...eslintPluginSvelte.configs.recommended,
142+
{
143+
files: ['**/*.svelte'],
144+
languageOptions: {
145+
parser: svelteParser,
204146
parserOptions: {
205147
parser: {
206148
// Specify a parser for each lang.
207-
ts: '@typescript-eslint/parser',
208-
js: 'espree',
209-
typescript: '@typescript-eslint/parser'
210-
}
149+
ts: typescriptParser,
150+
js: espree,
151+
typescript: typescriptParser
152+
},
153+
project: './path/to/your/tsconfig.json',
154+
extraFileExtensions: ['.svelte']
211155
}
212156
}
213-
// ...
214-
]
215-
// ...
216-
};
157+
}
158+
];
217159
```
218160

219161
See also <https://github.com/sveltejs/svelte-eslint-parser#readme>.
@@ -241,7 +183,7 @@ Example **eslint.config.js**:
241183
import eslintPluginSvelte from 'eslint-plugin-svelte';
242184
import svelteConfig from './svelte.config.js';
243185
export default [
244-
...eslintPluginSvelte.configs['flat/recommended'],
186+
...eslintPluginSvelte.configs.recommended,
245187
{
246188
files: [
247189
'**/*.svelte',
@@ -266,28 +208,30 @@ You can change the behavior of this plugin with some settings.
266208
e.g.
267209

268210
```js
269-
module.exports = {
211+
export default [
270212
// ...
271-
settings: {
272-
svelte: {
273-
ignoreWarnings: [
274-
'@typescript-eslint/no-unsafe-assignment',
275-
'@typescript-eslint/no-unsafe-member-access'
276-
],
277-
compileOptions: {
278-
postcss: {
279-
configFilePath: './path/to/my/postcss.config.js'
280-
}
281-
},
282-
kit: {
283-
files: {
284-
routes: 'src/routes'
213+
{
214+
settings: {
215+
svelte: {
216+
ignoreWarnings: [
217+
'@typescript-eslint/no-unsafe-assignment',
218+
'@typescript-eslint/no-unsafe-member-access'
219+
],
220+
compileOptions: {
221+
postcss: {
222+
configFilePath: './path/to/my/postcss.config.js'
223+
}
224+
},
225+
kit: {
226+
files: {
227+
routes: 'src/routes'
228+
}
285229
}
286230
}
287231
}
288232
}
289233
// ...
290-
};
234+
];
291235
```
292236

293237
#### settings.svelte.ignoreWarnings
@@ -317,30 +261,21 @@ Therefore please check [SvelteKit docs](https://kit.svelte.dev/docs/configuratio
317261
e.g.
318262

319263
```js
320-
module.exports = {
264+
export default [
321265
// ...
322-
settings: {
323-
svelte: {
324-
kit: {
325-
files: {
326-
routes: 'src/routes'
266+
{
267+
settings: {
268+
svelte: {
269+
kit: {
270+
files: {
271+
routes: 'src/routes'
272+
}
327273
}
328274
}
329275
}
330276
}
331277
// ...
332-
};
333-
```
334-
335-
### Running ESLint from the command line
336-
337-
If you want to run `eslint` from the command line, make sure you include the `.svelte` extension using [the `--ext` option](https://eslint.org/docs/user-guide/configuring#specifying-file-extensions-to-lint) or a glob pattern, because ESLint targets only `.js` files by default.
338-
339-
Examples:
340-
341-
```bash
342-
eslint --ext .js,.svelte src
343-
eslint "src/**/*.{js,svelte}"
278+
];
344279
```
345280

346281
## :computer: Editor Integrations

0 commit comments

Comments
 (0)