From 88f0c65e576ce83ba5b6a4a326289af327c4408f Mon Sep 17 00:00:00 2001 From: baseballyama Date: Sun, 26 Jan 2025 12:27:28 +0900 Subject: [PATCH] wip --- README.md | 359 +++++++++--------- docs/README.md | 47 +-- docs/user-guide.md | 274 +++++++------ .../tools/update-readme.ts | 3 +- 4 files changed, 317 insertions(+), 366 deletions(-) diff --git a/README.md b/README.md index 9ebcfd462..30550c9e3 100644 --- a/README.md +++ b/README.md @@ -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, -> and + [![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]. +
-### ❗ 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 +
-#### 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. +# Introduction - +`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. + ## 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 - -See [documents](https://sveltejs.github.io/eslint-plugin-svelte/). +## Installation -## :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 - ## :book: Usage @@ -79,198 +65,194 @@ npm install --save-dev eslint eslint-plugin-svelte svelte ### Configuration -Use `eslint.config.js` file to configure rules. See also: . +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**: +Example **eslint.config.js** for JavaScript project: ```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'; +import svelteConfig from './svelte.config.js'; + +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.recommended, + { + languageOptions: { + globals: { + ...globals.browser, + ...globals.node // Add this if you are using SvelteKit in non-SPA mode + } + } + }, + { + files: [ + '**/*.svelte', + '*.svelte', + '**/*.svelte.ts', + '*.svelte.ts', + '**/*.svelte.js', + '*.svelte.js' + ], + languageOptions: { + parserOptions: { + // We recommend importing and specifying svelte.config.js. + // By doing so, some rules in eslint-plugin-svelte will automatically read the configuration and adjust their behavior accordingly. + // While certain Svelte settings may be statically loaded from svelte.config.js even if you don’t specify it, + // explicitly specifying it ensures better compatibility and functionality. + svelteConfig + } + } + }, { rules: { - // override/add rules settings here, such as: + // Override or add rule settings here, such as: // 'svelte/rule-name': 'error' } } ]; ``` -This plugin provides configs: - -- `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. +Example **eslint.config.js** for TypeScript project: -See [the rule list](https://sveltejs.github.io/eslint-plugin-svelte/rules/) to get the `rules` that this plugin provides. - -#### Parser Configuration +```bash +npm install --save-dev typescript-eslint +``` -If you have specified a parser, you need to configure a parser for `.svelte`. +```js +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'; +import ts from 'typescript-eslint'; +import svelteConfig from './svelte.config.js'; -For example, if you are using the `"@typescript-eslint/parser"`, and if you want to use TypeScript in `