# svelte/valid-compile

disallow warnings when compiling.

  • ⚙️ This rule is included in "plugin:svelte/recommended".

# 📖 Rule Details

This rule uses Svelte compiler to check the source code.

<script>
  /* eslint svelte/valid-compile: "error" */
  let src = 'tutorial/image.gif';
</script>

<!-- ✓ GOOD -->
<img {src} alt="Rick Astley dances." />

<!-- ✗ BAD -->

`<img>` element should have an alt attribute(a11y_missing_attribute) (svelte/valid-compile)
<img {src} />

Note that we exclude reports for some checks, such as missing-declaration, and dynamic-slot-name, which you can check with different ESLint rules.

# Using svelte.config.js

If you want to suppress messages using onwarn like vite-plugin-svelte, Use eslint.config.js and specify the information in svelte.config.js in your parser configuration.

import svelteConfig from './svelte.config.js';
export default [
  // ...
  {
    files: ['**/*.svelte', '*.svelte'],
    languageOptions: {
      parserOptions: {
        svelteConfig: svelteConfig
      }
    }
  }
];

See also User Guide > Specify svelte.config.js

# onwarn

This rule can use onwarn like vite-plugin-svelte.

Example:

// svelte.config.js
export default {
  onwarn: (warning, handler) => {
    if (warning.code === 'a11y-distracting-elements') return;
    if (warning.code === 'a11y_distracting_elements') return; // for Svelte v5

    handler(warning);
  }
};

# 🔧 Options

{
  "svelte/valid-compile": [
    "error",
    {
      "ignoreWarnings": false
    }
  ]
}
  • ignoreWarnings … If set to true, ignores any warnings other than fatal errors reported by the svelte compiler.
<script>
  /* eslint svelte/valid-compile: ["error", { ignoreWarnings: true }] */
  let src = 'tutorial/image.gif';
</script>

<!-- Ignore -->
<img {src} />

# 🚀 Version

This rule was introduced in eslint-plugin-svelte v0.7.0

# 🔍 Implementation