From 2b643656eb3e8e29aa5ea73ac149e95bc666e468 Mon Sep 17 00:00:00 2001 From: baseballyama Date: Sun, 9 Feb 2025 16:06:31 +0900 Subject: [PATCH 1/2] chore: update README --- README.md | 222 +++++++++++++++++++++++------------------------------- 1 file changed, 95 insertions(+), 127 deletions(-) diff --git a/README.md b/README.md index a8529a3f..78704209 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,3 @@ -# svelte-eslint-parser - -[Svelte] parser for [ESLint]. -You can check it on [Online DEMO](https://sveltejs.github.io/svelte-eslint-parser/playground). - -> [!NOTE] -> This README is in development.\ -> Please refer to the README for the version you are using.\ -> For example, - [![NPM license](https://img.shields.io/npm/l/svelte-eslint-parser.svg)](https://www.npmjs.com/package/svelte-eslint-parser) [![NPM version](https://img.shields.io/npm/v/svelte-eslint-parser.svg)](https://www.npmjs.com/package/svelte-eslint-parser) [![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 [![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) [![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) -## ⤴️ Motivation +
+ +# svelte-eslint-parser + +## [Svelte](https://svelte.dev/) parser for [ESLint](https://eslint.org/). + +[Live DEMO](https://sveltejs.github.io/svelte-eslint-parser/playground) • +[Discord](https://svelte.dev/chat) + +
-The [svelte-eslint-parser] aims to make it easy to create your own ESLint rules for [Svelte]. +## Motivation -The [`eslint-plugin-svelte`] is an ESLint plugin that uses the [svelte-eslint-parser]. I have already [implemented some rules]. +The `svelte-eslint-parser` aims to make it easy to create your own ESLint rules for [Svelte](https://svelte.dev/). -[`eslint-plugin-svelte`]: https://github.com/sveltejs/eslint-plugin-svelte -[implemented some rules]: https://sveltejs.github.io/eslint-plugin-svelte/rules/ +[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/). ### ESLint Plugins Using svelte-eslint-parser #### [eslint-plugin-svelte](https://sveltejs.github.io/eslint-plugin-svelte/) ESLint plugin for Svelte. -It provides many unique check rules by using the template AST. +Provides a variety of template-based checks using the Svelte AST. #### [@intlify/eslint-plugin-svelte](https://github.com/intlify/eslint-plugin-svelte) -ESLint plugin for internationalization (i18n) with Svelte. -It provides rules to help internationalization your application created with Svelte. +ESLint plugin for internationalization (i18n) in Svelte applications, offering helpful i18n-related rules. -## 💿 Installation +--- + +## Installation ```bash npm install --save-dev eslint svelte-eslint-parser ``` -## 📖 Usage +--- + +## Usage -1. Write `parser` option into your ESLint Config file. -2. Use glob patterns or `--ext .svelte` CLI option. +1. In your ESLint config, set the `parser` option to `svelte-eslint-parser`. +2. Use glob patterns or the `--ext .svelte` CLI option to include `.svelte` files. ### ESLint Config (`eslint.config.js`) ```js import js from "@eslint/js"; import svelteParser from "svelte-eslint-parser"; + export default [ js.configs.recommended, { - files: ["**/*.svelte", "*.svelte"], + files: [ + "**/*.svelte", + "*.svelte", + // Need to specify the file extension for Svelte 5 with rune symbols + "**/*.svelte.js", + "*.svelte.js", + "**/*.svelte.ts", + "*.svelte.ts", + ], languageOptions: { parser: svelteParser, }, @@ -68,23 +78,29 @@ export default [ ### CLI -```console -$ eslint "src/**/*.{js,svelte}" +```bash +eslint "src/**/*.{js,svelte}" # or -$ eslint src --ext .svelte +eslint src --ext .svelte ``` -## 🔧 Options +--- + +## Options + +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. -[`parserOptions`] has the same properties as what [espree](https://github.com/eslint/espree#usage), the default parser of ESLint, is supporting. For example: ```js import svelteParser from "svelte-eslint-parser"; + export default [ // ... { - files: ["**/*.svelte", "*.svelte"], + files: [ + // Set .svelte/.js/.ts files. See above for more details. + ], languageOptions: { parser: svelteParser, parserOptions: { @@ -101,20 +117,18 @@ export default [ ]; ``` -[`parserOptions`]: https://eslint.org/docs/latest/use/configure/parser#configure-parser-options - ### parserOptions.parser -You can use `parserOptions.parser` property to specify a custom parser to parse `