|
1 | 1 | # svelte-eslint-parser
|
2 |
| -Svelte parser for ESLint |
| 2 | + |
| 3 | +[Svelte] parser for [ESLint] |
| 4 | + |
| 5 | +***Works In Progress*** |
| 6 | +***This parser is still in an EXPERIMENTAL STATE*** |
| 7 | + |
| 8 | +## ❓ Why? |
| 9 | + |
| 10 | +[Svelte] has the official ESLint plugin [eslint-plugin-svelte3]. [eslint-plugin-svelte3] works well enough to check scripts. However, it does not handle the AST of the template, which makes it very difficult for third parties to create their own [ESLint] rules for [Svelte]. |
| 11 | + |
| 12 | +The `svelte-eslint-parser` aims to make it easy to create your own rules for [Svelte] by allowing the template AST to be used in the rules. |
| 13 | + |
| 14 | +## 💿 Installation |
| 15 | + |
| 16 | +```bash |
| 17 | +npm install --save-dev eslint svelte-eslint-parser |
| 18 | +``` |
| 19 | + |
| 20 | +## 📖 Usage |
| 21 | + |
| 22 | +1. Write `overrides.parser` option into your `.eslintrc.*` file. |
| 23 | +2. Use glob patterns or `--ext .vue` CLI option. |
| 24 | + |
| 25 | +```json |
| 26 | +{ |
| 27 | + "extends": "eslint:recommended", |
| 28 | + "overrides": [ |
| 29 | + { |
| 30 | + "files": ["*.svelte"], |
| 31 | + "parser": "svelte-eslint-parser" |
| 32 | + } |
| 33 | + ] |
| 34 | +} |
| 35 | +``` |
| 36 | + |
| 37 | +```console |
| 38 | +$ eslint "src/**/*.{js,svelte}" |
| 39 | +# or |
| 40 | +$ eslint src --ext .svelte |
| 41 | +``` |
| 42 | + |
| 43 | +## 🔧 Options |
| 44 | + |
| 45 | +`parserOptions` has the same properties as what [espree](https://github.com/eslint/espree#usage), the default parser of ESLint, is supporting. |
| 46 | +For example: |
| 47 | + |
| 48 | +```json |
| 49 | +{ |
| 50 | + "parser": "svelte-eslint-parser", |
| 51 | + "parserOptions": { |
| 52 | + "sourceType": "module", |
| 53 | + "ecmaVersion": 2021, |
| 54 | + "ecmaFeatures": { |
| 55 | + "globalReturn": false, |
| 56 | + "impliedStrict": false, |
| 57 | + "jsx": false |
| 58 | + } |
| 59 | + } |
| 60 | +} |
| 61 | +``` |
| 62 | + |
| 63 | +### parserOptions.parser |
| 64 | + |
| 65 | +You can use `parserOptions.parser` property to specify a custom parser to parse `<script>` tags. |
| 66 | +Other properties than parser would be given to the specified parser. |
| 67 | +For example: |
| 68 | + |
| 69 | +```json |
| 70 | +{ |
| 71 | + "parser": "svelte-eslint-parser", |
| 72 | + "parserOptions": { |
| 73 | + "parser": "@typescript-eslint/parser" |
| 74 | + } |
| 75 | +} |
| 76 | +``` |
| 77 | + |
| 78 | +## :computer: Editor Integrations |
| 79 | + |
| 80 | +### Visual Studio Code |
| 81 | + |
| 82 | +Use the [dbaeumer.vscode-eslint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) extension that Microsoft provides officially. |
| 83 | + |
| 84 | +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. |
| 85 | + |
| 86 | +Example **.vscode/settings.json**: |
| 87 | + |
| 88 | +```json |
| 89 | +{ |
| 90 | + "eslint.validate": [ |
| 91 | + "javascript", |
| 92 | + "javascriptreact", |
| 93 | + "svelte" |
| 94 | + ] |
| 95 | +} |
| 96 | +``` |
| 97 | + |
| 98 | +## :beers: Contributing |
| 99 | + |
| 100 | +Welcome contributing! |
| 101 | + |
| 102 | +Please use GitHub's Issues/PRs. |
| 103 | + |
| 104 | +## :lock: License |
| 105 | + |
| 106 | +See the [LICENSE](LICENSE) file for license rights and limitations (MIT). |
| 107 | + |
| 108 | +[Svelte]: https://svelte.dev/ |
| 109 | +[ESLint]: https://eslint.org/ |
| 110 | +[eslint-plugin-svelte3]: https://github.com/sveltejs/eslint-plugin-svelte3 |
0 commit comments