All Projects → ota-meshi → eslint-plugin-svelte

ota-meshi / eslint-plugin-svelte

Licence: MIT license
ESLint plugin for Svelte using AST

Programming Languages

typescript
32286 projects
Svelte
593 projects
javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to eslint-plugin-svelte

svelte-eslint-parser
Svelte parser for ESLint
Stars: ✭ 30 (+36.36%)
Mutual labels:  eslint, svelte, sveltejs
svelte-intl
Internationalize your Svelte apps using format-message and Intl object
Stars: ✭ 48 (+118.18%)
Mutual labels:  svelte, sveltejs
eslint-plugin-rulesdir
An ESLint plugin to load project-specific ESLint rules
Stars: ✭ 28 (+27.27%)
Mutual labels:  eslint, eslint-plugin
its-ok-i-guess
🧐 Guess the game from the Steam review!
Stars: ✭ 41 (+86.36%)
Mutual labels:  svelte, sveltejs
svelte-accessible-dialog
An accessible dialog component for Svelte apps
Stars: ✭ 24 (+9.09%)
Mutual labels:  svelte, sveltejs
html-eslint
ESLint plugin for linting HTML
Stars: ✭ 72 (+227.27%)
Mutual labels:  eslint, eslint-plugin
svelte-quotes
A small app to demonstrate use of SvelteJS
Stars: ✭ 16 (-27.27%)
Mutual labels:  svelte, sveltejs
svelte-material
Modular and customizable Material Design UI components for Svelte.js
Stars: ✭ 30 (+36.36%)
Mutual labels:  svelte, sveltejs
eslint-plugin-editorconfig
An ESLint plugin to enforce EditorConfig rules
Stars: ✭ 22 (+0%)
Mutual labels:  eslint, eslint-plugin
svelte-toy
A toy for svelte data stores
Stars: ✭ 73 (+231.82%)
Mutual labels:  svelte, sveltejs
svelteWeb3
A simple, dependency minimized package for building modern dApps with Svelte
Stars: ✭ 14 (-36.36%)
Mutual labels:  svelte, sveltejs
generator-jhipster-svelte
Generate Svelte powered JHipster web applications
Stars: ✭ 44 (+100%)
Mutual labels:  svelte, sveltejs
svelte-undoable
Memento design pattern in Svelte
Stars: ✭ 39 (+77.27%)
Mutual labels:  svelte, sveltejs
15puzzle
A super simple PWA for 15 Puzzle game. Built with Svelte.
Stars: ✭ 29 (+31.82%)
Mutual labels:  svelte, sveltejs
eslint-plugin-pug
An ESLint plugin for linting inline scripts in Pug files
Stars: ✭ 17 (-22.73%)
Mutual labels:  eslint, eslint-plugin
nomie5
Nomie v5 Source Code
Stars: ✭ 528 (+2300%)
Mutual labels:  svelte, sveltejs
ModalFileManager
A file manager built using Svelte and Wails. It has hotkeys that are modal just like Vim and NeoVim.
Stars: ✭ 21 (-4.55%)
Mutual labels:  svelte, sveltejs
svelte-typewriter
A simple and reusable typewriter effect for your Svelte applications
Stars: ✭ 204 (+827.27%)
Mutual labels:  svelte, sveltejs
svelte-simple-icons
📦 This package provides the Simple Icons packaged as a set of Svelte components.
Stars: ✭ 27 (+22.73%)
Mutual labels:  svelte, sveltejs
eslint-plugin-disable
Disable ESLint plugins using file path patterns and inline comments
Stars: ✭ 51 (+131.82%)
Mutual labels:  eslint, eslint-plugin

Introduction

@ota-meshi/eslint-plugin-svelte is ESLint plugin for Svelte.
It provides many unique check rules by using the template AST.
You can check on the Online DEMO.

NPM license NPM version NPM downloads NPM downloads NPM downloads NPM downloads NPM downloads Build Status

📛 What is this plugin?

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

Why?

Svelte has the official ESLint plugin the eslint-plugin-svelte3. The 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 the ESLint rules for the Svelte.

The svelte-eslint-parser aims to make it easy to create your own rules for the Svelte by allowing the template AST to be used in the rules.

Attention

The svelte-eslint-parser and the @ota-meshi/eslint-plugin-svelte can not be used with the eslint-plugin-svelte3.

📖 Documentation

See documents.

💿 Installation

npm install --save-dev eslint @ota-meshi/eslint-plugin-svelte svelte

Requirements

  • ESLint v7.0.0 and above
  • Node.js v12.22.x, v14.17.x, v16.x and above

📖 Usage

Configuration

Use .eslintrc.* file to configure rules. See also: https://eslint.org/docs/user-guide/configuring.

Example .eslintrc.js:

module.exports = {
  extends: [
    // add more generic rule sets here, such as:
    // 'eslint:recommended',
    "plugin:@ota-meshi/svelte/recommended",
  ],
  rules: {
    // override/add rules settings here, such as:
    // '@ota-meshi/svelte/rule-name': 'error'
  },
}

This plugin provides configs:

  • plugin:@ota-meshi/svelte/base ... Configuration to enable correct Svelte parsing.
  • plugin:@ota-meshi/svelte/recommended ... Above, plus rules to prevent errors or unintended behavior.

See the rule list to get the rules that this plugin provides.

::: warning Attention

The @ota-meshi/eslint-plugin-svelte can not be used with the eslint-plugin-svelte3. If you are using eslint-plugin-svelte3 you need to remove it.

  "plugins": [
-   "svelte3"
  ]

:::

Parser Configuration

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

For example, if you are using the "@babel/eslint-parser", configure it as follows:

module.exports = {
  // ...
  extends: ["plugin:@ota-meshi/svelte/recommended"],
  // ...
  parser: "@babel/eslint-parser",
  // Add an `overrides` section to add a parser configuration for svelte.
  overrides: [
    {
      files: ["*.svelte"],
      parser: "svelte-eslint-parser",
    },
    // ...
  ],
  // ...
}

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.

module.exports = {
  // ...
  extends: ["plugin:@ota-meshi/svelte/recommended"],
  // ...
  parser: "@typescript-eslint/parser",
  parserOptions: {
    // ...
    project: "path/to/your/tsconfig.json",
    extraFileExtensions: [".svelte"], // This is a required setting in `@typescript-eslint/parser` v4.24.0.
  },
  overrides: [
    {
      files: ["*.svelte"],
      parser: "svelte-eslint-parser",
      // Parse the `<script>` in `.svelte` as TypeScript by adding the following configuration.
      parserOptions: {
        parser: "@typescript-eslint/parser",
      },
    },
    // ...
  ],
  // ...
}

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

module.exports = {
  // ...
  overrides: [
    {
      files: ["*.svelte"],
      parser: "svelte-eslint-parser",
      parserOptions: {
        parser: {
          // Specify a parser for each lang.
          ts: "@typescript-eslint/parser",
          js: "espree",
          typescript: "@typescript-eslint/parser",
        },
      },
    },
    // ...
  ],
  // ...
}

See also https://github.com/ota-meshi/svelte-eslint-parser#readme.

settings["@ota-meshi/svelte"]

You can change the behavior of this plugin with some settings.

  • ignoreWarnings (optional) ... Specifies an array of rules that ignore reports in the template.
    For example, set rules on the template that cannot avoid false positives.
  • compileOptions (optional) ... Specifies options for Svelte compile. Effects rules that use Svelte compile. The target rules are @ota-meshi/svelte/valid-compile and @ota-meshi/svelte/no-unused-svelte-ignore. Note that it has no effect on ESLint's custom parser.
    • postcss (optional) ... Specifies options related to PostCSS. You can disable the PostCSS process by specifying false.
      • configFilePath (optional) ... Specifies the path of the directory containing the PostCSS configuration.

e.g.

module.exports = {
  // ...
  settings: {
    "@ota-meshi/svelte": {
      ignoreWarnings: [
        "@typescript-eslint/no-unsafe-assignment",
        "@typescript-eslint/no-unsafe-member-access",
      ],
      compileOptions: {
        postcss: {
          configFilePath: "./path/to/my/postcss.config.js",
        },
      },
    },
  },
  // ...
}

Running ESLint from the command line

If you want to run eslint from the command line, make sure you include the .svelte extension using the --ext option or a glob pattern, because ESLint targets only .js files by default.

Examples:

eslint --ext .js,.svelte src
eslint "src/**/*.{js,svelte}"

💻 Editor Integrations

Visual Studio Code

Use the dbaeumer.vscode-eslint extension that Microsoft provides officially.

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.

Example .vscode/settings.json:

{
  "eslint.validate": ["javascript", "javascriptreact", "svelte"]
}

Rules

The --fix option on the command line automatically fixes problems reported by rules which have a wrench 🔧 below.
The rules with the following star are included in the configs.

Possible Errors

These rules relate to possible syntax or logic errors in Svelte code:

Rule ID Description
@ota-meshi/svelte/no-dupe-else-if-blocks disallow duplicate conditions in {#if} / {:else if} chains
@ota-meshi/svelte/no-dupe-style-properties disallow duplicate style properties
@ota-meshi/svelte/no-dynamic-slot-name disallow dynamic slot name 🔧
@ota-meshi/svelte/no-not-function-handler disallow use of not function in event handler
@ota-meshi/svelte/no-object-in-text-mustaches disallow objects in text mustache interpolation
@ota-meshi/svelte/no-shorthand-style-property-overrides disallow shorthand style properties that override related longhand properties
@ota-meshi/svelte/no-unknown-style-directive-property disallow unknown style:property
@ota-meshi/svelte/valid-compile disallow warnings when compiling.

Security Vulnerability

These rules relate to security vulnerabilities in Svelte code:

Rule ID Description
@ota-meshi/svelte/no-at-html-tags disallow use of {@html} to prevent XSS attack
@ota-meshi/svelte/no-target-blank disallow target="_blank" attribute without rel="noopener noreferrer"

Best Practices

These rules relate to better ways of doing things to help you avoid problems:

Rule ID Description
@ota-meshi/svelte/button-has-type disallow usage of button without an explicit type attribute
@ota-meshi/svelte/no-at-debug-tags disallow the use of {@debug}
@ota-meshi/svelte/no-unused-svelte-ignore disallow unused svelte-ignore comments
@ota-meshi/svelte/no-useless-mustaches disallow unnecessary mustache interpolations 🔧
@ota-meshi/svelte/require-optimized-style-attribute require style attributes that can be optimized

Stylistic Issues

These rules relate to style guidelines, and are therefore quite subjective:

Rule ID Description
@ota-meshi/svelte/first-attribute-linebreak enforce the location of first attribute 🔧
@ota-meshi/svelte/html-quotes enforce quotes style of HTML attributes 🔧
@ota-meshi/svelte/indent enforce consistent indentation 🔧
@ota-meshi/svelte/max-attributes-per-line enforce the maximum number of attributes per line 🔧
@ota-meshi/svelte/mustache-spacing enforce unified spacing in mustache 🔧
@ota-meshi/svelte/prefer-class-directive require class directives instead of ternary expressions 🔧
@ota-meshi/svelte/prefer-style-directive require style directives instead of style attribute 🔧
@ota-meshi/svelte/shorthand-attribute enforce use of shorthand syntax in attribute 🔧
@ota-meshi/svelte/shorthand-directive enforce use of shorthand syntax in directives 🔧
@ota-meshi/svelte/spaced-html-comment enforce consistent spacing after the <!-- and before the --> in a HTML comment 🔧

Extension Rules

These rules extend the rules provided by ESLint itself to work well in Svelte:

Rule ID Description
@ota-meshi/svelte/no-inner-declarations disallow variable or function declarations in nested blocks

System

These rules relate to this plugin works:

Rule ID Description
@ota-meshi/svelte/comment-directive support comment-directives in HTML template
@ota-meshi/svelte/system system rule for working this plugin

Deprecated

  • ⚠️ We're going to remove deprecated rules in the next major release. Please migrate to successor/new rules.
  • 😇 We don't fix bugs which are in deprecated rules since we don't have enough resources.
Rule ID Replaced by
@ota-meshi/svelte/dollar-prefixed-store-uses-vars (no replacement)
@ota-meshi/svelte/no-non-optimized-style-attributes @ota-meshi/svelte/require-optimized-style-attribute

🍻 Contributing

Welcome contributing!

Please use GitHub's Issues/PRs.

Development Tools

  • npm test runs tests and measures coverage.
  • npm run update runs in order to update readme and recommended configuration.

Working With Rules

This plugin uses svelte-eslint-parser for the parser. Check here to find out about AST.

🔒 License

See the LICENSE file for license rights and limitations (MIT).

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].