npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

eslint-plugin-svelte3-new

v1.0.0

Published

An ESLint plugin for Svelte v3 components.

Downloads

3

Readme

eslint-plugin-svelte3

An ESLint plugin for Svelte v3 components.

Features

  • Svelte compiler errors and warnings are exposed as ESLint messages
  • Variable references in your template or in store auto-subscriptions are handled when linting for unused variables
  • Self-assignments are always allowed, as this is an official pattern for manually triggering reactive updates
  • Unused labels called $ are always allowed, as this is the syntax for reactive assignments
  • Experimental opt-in linting of template expressions in addition to the script blocks

Installation

Install the plugin package:

npm install eslint-plugin-svelte3

Then add svelte3 to the plugins array in your .eslintrc.*.

For example:

{
  "parserOptions": {
    "ecmaVersion": 2019,
    "sourceType": "module"
  },
  "env": {
    "es6": true,
    "browser": true
  },
  "plugins": [
    "svelte3"
  ],
  "rules": {

  },
  "settings": {

  }
}

This plugin needs to be able to require('svelte/compiler'). If ESLint, this plugin, and Svelte are all installed locally in your project, this should not be a problem.

Important! Make sure you do not have eslint-plugin-html enabled on the files you want linted as Svelte components, as the two plugins won't get along.

Configuration

Some settings work best with a function as their value, which is only possible using a CommonJS .eslintrc.js file, and not a JSON or YAML configuration file. Using overrides in the configuration file for specific globs will also give you more control over the configuration.

svelte3/enabled

This can be true or false or a function that accepts a file path and returns whether this plugin should process it.

The default is to lint all files that end in .svelte. This can be changed by passing a new function, or by using ESLint overrides for this setting for specific globs.

svelte3/ignore-warnings

This can be true or false or an array of Svelte compiler warning codes or a function that indicates whether to ignore it in the linting. The function will be passed two arguments - the warning code and the full warning object - and should return a boolean.

The default is to not ignore any warnings.

svelte3/compiler-options

Most compiler options do not affect the validity of compiled components, but a couple of them can. If you are compiling to custom elements, or for some other reason need to control how the plugin compiles the components it's linting, you can use this setting.

This can be an object of compiler options or a function that accepts a file path and returns an object of compiler options.

The default is to compile with { generate: false }.

svelte3/ignore-styles

If you're using some sort of preprocessor on the component styles, then it's likely that when this plugin calls the Svelte compiler on your component, it will throw an exception. In a perfect world, this plugin would be able to apply the preprocessor to the component and then use source maps to translate any warnings back to the original source. In the current reality, however, you can instead simply disregard styles written in anything other than standard CSS. You won't get warnings about the styles from the linter, but your application will still use them (of course) and compiler warnings will still appear in your build logs.

This can be true or false or a function that accepts an object of attributes on a <style> tag (like that passed to a Svelte preprocessor) and returns whether to ignore the style block for the purposes of linting.

The default is to not ignore any styles.

svelte3/lint-template

Experimental! Requires at least Svelte 3.2.0!

This can be true or false or a function that accepts a file path and returns whether this plugin should also lint its template expressions.

The default is to not lint any expressions in the template.

Using the CLI

It's probably a good idea to make sure you can lint from the command line before proceeding with configuring your editor.

Using this with the command line eslint tool shouldn't require any special actions. Just remember that if you are running eslint on a directory, you need to pass it the --ext flag to tell it which nonstandard file extensions you want to lint.

Integrations

See INTEGRATIONS.md for how to use this plugin with your text editor.

License

MIT