Skip to content

Commit

Permalink
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Loading
Loading status checks…
wip
Browse files Browse the repository at this point in the history
@baseballyama
baseballyama committed Jan 26, 2025
1 parent 38a963b commit 53d665b
Showing 4 changed files with 129 additions and 118 deletions.
141 changes: 80 additions & 61 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,4 @@
# Introduction

`eslint-plugin-svelte` is the official [ESLint] plugin for [Svelte].
It provides many unique check rules by using the template AST.
You can check on the [Online DEMO](https://eslint-online-playground.netlify.app/#eslint-plugin-svelte%20with%20typescript).

> [!NOTE]
> This document is in development.\
> Please refer to the document for the version you are using.\
> For example, <https://github.com/sveltejs/eslint-plugin-svelte/blob/eslint-plugin-svelte%402.46.0/README.md>
> and <https://github.com/sveltejs/eslint-plugin-svelte/blob/eslint-plugin-svelte%402.46.0/docs>
<!--DOCS_IGNORE_START-->

[![NPM license](https://img.shields.io/npm/l/eslint-plugin-svelte.svg)](https://www.npmjs.com/package/eslint-plugin-svelte)
[![NPM version](https://img.shields.io/npm/v/eslint-plugin-svelte.svg)](https://www.npmjs.com/package/eslint-plugin-svelte)
@@ -24,52 +14,48 @@ You can check on the [Online DEMO](https://eslint-online-playground.netlify.app/
[![Code Style: Prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier)
[![changesets](https://img.shields.io/badge/maintained%20with-changesets-176de3.svg)](https://github.com/atlassian/changesets)

## :name_badge: What is this plugin?

[ESLint] plugin for [Svelte].
It provides many unique check rules using the AST generated by [svelte-eslint-parser].
<div align="center">

### ❗ Attention
# eslint-plugin-svelte

#### Cannot be used with eslint-plugin-svelte3
### ESLint plugin for Svelte using AST

The [svelte-eslint-parser] and the `eslint-plugin-svelte` can not be used with the [eslint-plugin-svelte3].
[Live Demo](https://eslint-online-playground.netlify.app/#eslint-plugin-svelte%20with%20typescript) •
[Documentation](https://sveltejs.github.io/eslint-plugin-svelte/) •
[Discord](https://svelte.dev/chat)

[svelte-eslint-parser]: https://github.com/sveltejs/svelte-eslint-parser
[eslint-plugin-svelte3]: https://github.com/sveltejs/eslint-plugin-svelte3
</div>

#### Experimental support for Svelte v5
<!--DOCS_IGNORE_END-->

We are working on support for Svelte v5, but it is still an experimental feature. Please note that rules and features related to Svelte v5 may be changed or removed in minor versions without notice.
# Introduction

<!--DOCS_IGNORE_START-->
`eslint-plugin-svelte` is the official [ESLint](https://eslint.org/) plugin for [Svelte](https://svelte.dev/).
It offers a variety of unique linting rules by leveraging the AST generated by [svelte-eslint-parser](https://github.com/sveltejs/svelte-eslint-parser).
It provides a variety of unique linting rules by utilizing the template AST.

## Versioning policy
> [!WARNING]
> The [svelte-eslint-parser](https://github.com/sveltejs/svelte-eslint-parser) and `eslint-plugin-svelte` cannot be used alongside [eslint-plugin-svelte3](https://github.com/sveltejs/eslint-plugin-svelte3).
This plugin follows [Semantic Versioning](https://semver.org/).
However, unlike [ESLint’s Semantic Versioning Policy](https://github.com/eslint/eslint#semantic-versioning-policy), this plugin adds new rules to its configs even in minor releases. For example, if you are using the recommended config, a minor update may add new rules, which could cause new lint errors in your project.
While [ESLint’s Semantic Versioning Policy](https://github.com/eslint/eslint#semantic-versioning-policy) only adds new rules to configs in major releases, most users (myself included) don’t regularly monitor new rules. This makes it challenging to manually add them to projects whenever they are introduced.
By adding new rules to configs in minor releases, this plugin ensures users can adopt them more easily. If any new rules cause issues, you can simply disable them. I believe this approach helps maintain and improve code quality with minimal effort.
<!--DOCS_IGNORE_START-->

## Migration Guide

To migrate from `eslint-plugin-svelte` v1, or [`@ota-meshi/eslint-plugin-svelte`](https://www.npmjs.com/package/@ota-meshi/eslint-plugin-svelte), please refer to the [migration guide](https://sveltejs.github.io/eslint-plugin-svelte/migration/).

## :book: Documentation
## Installation

See [documents](https://sveltejs.github.io/eslint-plugin-svelte/).

## :cd: Installation
> [!NOTE]
>
> **Requirements**
>
> - ESLint v8.57.1, v9.0.0, and above
> - Node.js v18.20.4, v20.18.0, v22.10.0, and above
```bash
npm install --save-dev eslint eslint-plugin-svelte svelte
npm install --save-dev svelte eslint eslint-plugin-svelte globals
```

> **Requirements**
>
> - ESLint v8.57.1, v9.0.0 and above
> - Node.js v18.20.4, v20.18.0, v22.10.0 and above
<!--DOCS_IGNORE_END-->

## :book: Usage
@@ -79,33 +65,59 @@ npm install --save-dev eslint eslint-plugin-svelte svelte

### Configuration

Use `eslint.config.js` file to configure rules. See also: <https://eslint.org/docs/latest/use/configure/configuration-files-new>.
Use the `eslint.config.js` file to configure rules. For more details, see the [ESLint documentation](https://eslint.org/docs/latest/use/configure/configuration-files-new).

Example **eslint.config.js**:

```js
import eslintPluginSvelte from 'eslint-plugin-svelte';
import js from '@eslint/js';
import { includeIgnoreFile } from '@eslint/compat';
import svelte from 'eslint-plugin-svelte';
import globals from 'globals';
import { fileURLToPath } from 'node:url';
const gitignorePath = fileURLToPath(new URL('./.gitignore', import.meta.url));

/** @type {import('eslint').Linter.Config[]} */
export default [
// add more generic rule sets here, such as:
// js.configs.recommended,
...eslintPluginSvelte.configs.recommended,
includeIgnoreFile(gitignorePath),
js.configs.recommended,
...svelte.configs['flat/recommended'],
{
languageOptions: {
globals: {
...globals.browser,
...globals.node // Add this if you are using SvelteKit in non-SPA mode
}
}
},
{
rules: {
// override/add rules settings here, such as:
// Override or add rule settings here, such as:
// 'svelte/rule-name': 'error'
}
}
];
```
This plugin provides configs:
#### Available Configurations
- `eslintPluginSvelte.configs.base` ... Configuration to enable correct Svelte parsing.
- `eslintPluginSvelte.configs.recommended` ... Above, plus rules to prevent errors or unintended behavior.
- `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).).
- `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.
This plugin provides the following configurations:
See [the rule list](https://sveltejs.github.io/eslint-plugin-svelte/rules/) to get the `rules` that this plugin provides.
- **`eslintPluginSvelte.configs.base`**
Enables correct Svelte parsing.
- **`eslintPluginSvelte.configs.recommended`**
Includes `base` configuration, plus rules to prevent errors or unintended behavior.
- **`eslintPluginSvelte.configs.prettier`**
Disables rules that may conflict with [Prettier](https://prettier.io/).
You still need to configure Prettier to work with Svelte manually, for example, by using [prettier-plugin-svelte](https://github.com/sveltejs/prettier-plugin-svelte).
- **`eslintPluginSvelte.configs.all`**
Includes all available rules.
**Note:** This configuration is not recommended for production use, as it changes with every minor and major version of `eslint-plugin-svelte`. Use at your own risk.
For more details, see [the rule list](https://sveltejs.github.io/eslint-plugin-svelte/rules/) to explore the rules provided by this plugin.
#### Parser Configuration
@@ -283,13 +295,13 @@ export default [
];
```
## :computer: Editor Integrations
## Editor Integrations
### Visual Studio Code
Use the [dbaeumer.vscode-eslint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) extension that Microsoft provides officially.
Use the [dbaeumer.vscode-eslint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) extension provided officially by Microsoft.
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.
You need to configure the `eslint.validate` option in the extension settings to include `.svelte` files, as the extension only targets `*.js` and `*.jsx` files by default.
Example **.vscode/settings.json**:
@@ -302,6 +314,17 @@ Example **.vscode/settings.json**:
<!--USAGE_GUIDE_END-->
<!--USAGE_SECTION_END-->
<!--DOCS_IGNORE_START-->
## Versioning policy
This plugin follows [Semantic Versioning](https://semver.org/).
However, unlike [ESLint’s Semantic Versioning Policy](https://github.com/eslint/eslint#semantic-versioning-policy), this plugin adds new rules to its configs even in minor releases. For example, if you are using the recommended config, a minor update may add new rules, which could cause new lint errors in your project.
While [ESLint’s Semantic Versioning Policy](https://github.com/eslint/eslint#semantic-versioning-policy) only adds new rules to configs in major releases, most users (myself included) don’t regularly monitor new rules. This makes it challenging to manually add them to projects whenever they are introduced.
By adding new rules to configs in minor releases, this plugin ensures users can adopt them more easily. If any new rules cause issues, you can simply disable them. I believe this approach helps maintain and improve code quality with minimal effort.
<!--DOCS_IGNORE_END-->
## :white_check_mark: Rules
<!-- prettier-ignore-start -->
@@ -453,21 +476,17 @@ These rules relate to this plugin works:
<!--DOCS_IGNORE_START-->
## :beers: Contributing

Welcome contributing!

Please use GitHub's Issues/PRs.
## Contributing
See also [CONTRIBUTING.md](./CONTRIBUTING.md)
Contributions are welcome! Feel free to use GitHub Issues or submit a Pull Request (PR). For more details, see [CONTRIBUTING.md](./CONTRIBUTING.md).
### Working With Rules
This plugin uses [svelte-eslint-parser](https://github.com/sveltejs/svelte-eslint-parser) for the parser. Check [here](https://sveltejs.github.io/svelte-eslint-parser/) to find out about AST.
This plugin uses [svelte-eslint-parser](https://github.com/sveltejs/svelte-eslint-parser) as its parser. Check the [AST documentation](https://sveltejs.github.io/svelte-eslint-parser/) to learn more about the AST structure.
<!--DOCS_IGNORE_END-->
## :lock: License
## License
See the [LICENSE](LICENSE) file for license rights and limitations (MIT).
47 changes: 6 additions & 41 deletions docs/README.md
View file
Original file line number Diff line number Diff line change
@@ -4,47 +4,12 @@ title: 'eslint-plugin-svelte'

# Introduction

`eslint-plugin-svelte` is the official [ESLint] plugin for [Svelte].
It provides many unique check rules by using the template AST.
You can check on the [Online DEMO](https://eslint-online-playground.netlify.app/#eslint-plugin-svelte%20with%20typescript).
`eslint-plugin-svelte` is the official [ESLint](https://eslint.org/) plugin for [Svelte](https://svelte.dev/).
It offers a variety of unique linting rules by leveraging the AST generated by [svelte-eslint-parser](https://github.com/sveltejs/svelte-eslint-parser).
It provides a variety of unique linting rules by utilizing the template AST.

> [!NOTE]
> This document is in development.\
> Please refer to the document for the version you are using.\
> For example, <https://github.com/sveltejs/eslint-plugin-svelte/blob/eslint-plugin-svelte%402.46.0/README.md>
> and <https://github.com/sveltejs/eslint-plugin-svelte/blob/eslint-plugin-svelte%402.46.0/docs>
[![NPM license](https://img.shields.io/npm/l/eslint-plugin-svelte.svg)](https://www.npmjs.com/package/eslint-plugin-svelte)
[![NPM version](https://img.shields.io/npm/v/eslint-plugin-svelte.svg)](https://www.npmjs.com/package/eslint-plugin-svelte)
[![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/eslint-plugin-svelte&maxAge=3600)](http://www.npmtrends.com/eslint-plugin-svelte)
[![NPM downloads](https://img.shields.io/npm/dw/eslint-plugin-svelte.svg)](http://www.npmtrends.com/eslint-plugin-svelte)
[![NPM downloads](https://img.shields.io/npm/dm/eslint-plugin-svelte.svg)](http://www.npmtrends.com/eslint-plugin-svelte)
[![NPM downloads](https://img.shields.io/npm/dy/eslint-plugin-svelte.svg)](http://www.npmtrends.com/eslint-plugin-svelte)
[![NPM downloads](https://img.shields.io/npm/dt/eslint-plugin-svelte.svg)](http://www.npmtrends.com/eslint-plugin-svelte)
[![Build Status](https://github.com/sveltejs/eslint-plugin-svelte/workflows/CI/badge.svg?branch=main)](https://github.com/sveltejs/eslint-plugin-svelte/actions?query=workflow%3ACI)

[![type-coverage](https://img.shields.io/badge/dynamic/json.svg?label=type-coverage&prefix=%E2%89%A5&suffix=%&query=$.typeCoverage.atLeast&uri=https%3A%2F%2Fraw.githubusercontent.com%2Fsveltejs%2Feslint-plugin-svelte%2Fmain%2Fpackage.json)](https://github.com/plantain-00/type-coverage)
[![Conventional Commits](https://img.shields.io/badge/conventional%20commits-1.0.0-yellow.svg)](https://conventionalcommits.org)
[![Code Style: Prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier)
[![changesets](https://img.shields.io/badge/maintained%20with-changesets-176de3.svg)](https://github.com/atlassian/changesets)

## :name_badge: What is this plugin?

[ESLint] plugin for [Svelte].
It provides many unique check rules using the AST generated by [svelte-eslint-parser].

### ❗ Attention

#### Cannot be used with eslint-plugin-svelte3

The [svelte-eslint-parser] and the `eslint-plugin-svelte` can not be used with the [eslint-plugin-svelte3].

[svelte-eslint-parser]: https://github.com/sveltejs/svelte-eslint-parser
[eslint-plugin-svelte3]: https://github.com/sveltejs/eslint-plugin-svelte3

#### Experimental support for Svelte v5

We are working on support for Svelte v5, but it is still an experimental feature. Please note that rules and features related to Svelte v5 may be changed or removed in minor versions without notice.
> [!WARNING]
> The [svelte-eslint-parser](https://github.com/sveltejs/svelte-eslint-parser) and `eslint-plugin-svelte` cannot be used alongside [eslint-plugin-svelte3](https://github.com/sveltejs/eslint-plugin-svelte3).
## :book: Usage

@@ -56,7 +21,7 @@ See [User Guide](./user-guide.md).
See [Available Rules](./rules.md).
<!-- prettier-ignore-end -->

## :lock: License
## License

See the [LICENSE](https://github.com/sveltejs/eslint-plugin-svelte/blob/main/LICENSE) file for license rights and limitations (MIT).

56 changes: 41 additions & 15 deletions docs/user-guide.md
View file
Original file line number Diff line number Diff line change
@@ -24,33 +24,59 @@ npm install --save-dev eslint eslint-plugin-svelte svelte

### Configuration

Use `eslint.config.js` file to configure rules. See also: <https://eslint.org/docs/latest/use/configure/configuration-files-new>.
Use the `eslint.config.js` file to configure rules. For more details, see the [ESLint documentation](https://eslint.org/docs/latest/use/configure/configuration-files-new).

Example **eslint.config.js**:

```js
import eslintPluginSvelte from 'eslint-plugin-svelte';
import js from '@eslint/js';
import { includeIgnoreFile } from '@eslint/compat';
import svelte from 'eslint-plugin-svelte';
import globals from 'globals';
import { fileURLToPath } from 'node:url';
const gitignorePath = fileURLToPath(new URL('./.gitignore', import.meta.url));

/** @type {import('eslint').Linter.Config[]} */
export default [
// add more generic rule sets here, such as:
// js.configs.recommended,
...eslintPluginSvelte.configs.recommended,
includeIgnoreFile(gitignorePath),
js.configs.recommended,
...svelte.configs['flat/recommended'],
{
languageOptions: {
globals: {
...globals.browser,
...globals.node // Add this if you are using SvelteKit in non-SPA mode
}
}
},
{
rules: {
// override/add rules settings here, such as:
// Override or add rule settings here, such as:
// 'svelte/rule-name': 'error'
}
}
];
```
This plugin provides configs:
#### Available Configurations
This plugin provides the following configurations:
- **`eslintPluginSvelte.configs.base`**
Enables correct Svelte parsing.
- **`eslintPluginSvelte.configs.recommended`**
Includes `base` configuration, plus rules to prevent errors or unintended behavior.
- **`eslintPluginSvelte.configs.prettier`**
Disables rules that may conflict with [Prettier](https://prettier.io/).
You still need to configure Prettier to work with Svelte manually, for example, by using [prettier-plugin-svelte](https://github.com/sveltejs/prettier-plugin-svelte).
- `eslintPluginSvelte.configs.base` ... Configuration to enable correct Svelte parsing.
- `eslintPluginSvelte.configs.recommended` ... Above, plus rules to prevent errors or unintended behavior.
- `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).).
- `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.
- **`eslintPluginSvelte.configs.all`**
Includes all available rules.
**Note:** This configuration is not recommended for production use, as it changes with every minor and major version of `eslint-plugin-svelte`. Use at your own risk.
See [the rule list](./rules.md) to get the `rules` that this plugin provides.
For more details, see [the rule list](./rules.md) to explore the rules provided by this plugin.
#### Parser Configuration
@@ -228,13 +254,13 @@ export default [
];
```
## :computer: Editor Integrations
## Editor Integrations
### Visual Studio Code
Use the [dbaeumer.vscode-eslint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) extension that Microsoft provides officially.
Use the [dbaeumer.vscode-eslint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) extension provided officially by Microsoft.
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.
You need to configure the `eslint.validate` option in the extension settings to include `.svelte` files, as the extension only targets `*.js` and `*.jsx` files by default.
Example **.vscode/settings.json**:
3 changes: 2 additions & 1 deletion packages/eslint-plugin-svelte/tools/update-readme.ts
View file
Original file line number Diff line number Diff line change
@@ -38,11 +38,12 @@ ${newReadme
)
.replace(/<!--DOCS_IGNORE_START-->[\s\S]*?<!--DOCS_IGNORE_END-->/gu, '')
.replace(
/\(https:\/\/sveltejs.github.io\/eslint-plugin-svelte(.*?)\)/gu,
/\(https:\/\/sveltejs.github.io\/eslint-plugin-svelte\/(.+)\)/gu,
(_ptn, filepath: string) => {
const [hash] = /(?:#.*)?$/u.exec(filepath)!;
const pathWithoutHash = hash ? filepath.slice(0, -hash.length) : filepath;
const normalizePathWithoutHash = pathWithoutHash.replace(/\/$/u, '');
const [file] = /[^/]+$/u.exec(normalizePathWithoutHash)!;
const pathWithoutFile = file
? normalizePathWithoutHash.slice(0, -file.length)

0 comments on commit 53d665b

Please sign in to comment.