A RetroSearch Logo

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Search Query:

Showing content from https://www.npmjs.com/package/@ota-meshi/eslint-plugin-svelte below:

@ota-meshi/eslint-plugin-svelte - npm

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.

📛 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

📖 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:

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.

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:

Security Vulnerability

These rules relate to security vulnerabilities in Svelte code:

Best Practices

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

Stylistic Issues

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

Extension Rules

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

System

These rules relate to this plugin works:

Deprecated 🍻 Contributing

Welcome contributing!

Please use GitHub's Issues/PRs.

Development Tools 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).

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4