Solid ESLint Plugin

This package contains Solid-specific linting rules for ESLint. It can ease Solid's learning curve by finding and fixing problems around Solid's reactivity system, and can migrate some React patterns to Solid code.

It supports both Solid 1.x and Solid 2.0 APIs, requires ESLint v9 or v10 and Node.js 22+, and also runs under Oxlint as a JS plugin.

• Solid ESLint Plugin
  • Installation
  • Configuration
    • TypeScript
    • Solid 2.0
    • Manual Configuration
    • Oxlint
  • Rules
  • Troubleshooting
  • Versioning

Installation

Install eslint and eslint-plugin-solid locally.

npm install --save-dev eslint eslint-plugin-solid
# or
pnpm add --save-dev eslint eslint-plugin-solid
yarn add --dev eslint eslint-plugin-solid

# optional, to create an ESLint config file
npx eslint --init
# or
pnpm eslint --init
yarn eslint --init

If you're using VSCode, you'll want to install the ESLint extension. You're encouraged to enable auto-fixing problems on save by adding the following to your settings.json file.

{
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  }
}

If you're using Vite, you may want to install vite-plugin-eslint.

You may also want to check out eslint-plugin-jsx-a11y, which provides useful rules for writing accessible HTML.

Configuration

Create an eslint.config.js file at the root of your project (flat config is the only configuration system supported by ESLint v9+, and by this plugin as of v0.15.0), and use the recommended configuration to get reasonable defaults as shown below.

import js from "@eslint/js";
import solid from "eslint-plugin-solid/configs/recommended";

export default [
  js.configs.recommended, // replaces eslint:recommended
  solid,
];

TypeScript

If you're using TypeScript, use the typescript configuration instead. This disables some features that overlap with type checking.

import js from "@eslint/js";
import solid from "eslint-plugin-solid/configs/typescript";
import * as tsParser from "@typescript-eslint/parser";

export default [
  js.configs.recommended,
  {
    files: ["**/*.{ts,tsx}"],
    ...solid,
    languageOptions: {
      parser: tsParser,
      parserOptions: {
        project: "tsconfig.json",
      },
    },
  },
];

Solid 2.0

If your project targets Solid 2.0, use the v2 configuration. It sets settings: { solid: { version: 2 } }, which switches the version-aware rules (reactivity, imports, no-unknown-namespaces, event-handlers, jsx-no-undef) to strict 2.0 semantics, and enables the 2.0-specific rules: removed-api, no-single-arg-create-effect, no-accessor-as-prop, no-boolean-enumerated-attribute, no-store-mutation-outside-setter, no-write-in-pure-computation, and the server function rules (valid-use-server, require-async-server-function, no-invalid-server-capture, no-browser-globals-in-server-function) as errors, with prefer-structured-class and no-unused-signal as warnings. This is the config the official Solid 2.0 templates ship with.

import js from "@eslint/js";
import solid from "eslint-plugin-solid/configs/v2";

export default [js.configs.recommended, solid];

There is also a v2-strict configuration with the plugin's strongest opinions: everything in v2 plus no-module-scope-reactive-primitive and no-restated-default-options as errors, prefer-onSettled-for-side-effects as a warning, and prefer-structured-class and no-unused-signal promoted to errors.

The settings.solid.version setting also works in any custom config; version-aware rules read it directly, so you can opt individual rule configurations into 2.0 semantics without using the presets.

If your project imports Solid's primitives from a custom renderer or a re-exporting wrapper module instead of solid-js, add those module names to settings.solid.moduleSources (exact names, matched whole) so the import-gated rules recognize them:

{
  settings: { solid: { moduleSources: ["my-custom-renderer"] } },
}

All configs are also available on the plugin's root export, as solid.configs.recommended, solid.configs.typescript, solid.configs.v2, and solid.configs["v2-strict"], after using import solid from 'eslint-plugin-solid'. (The configs["flat/recommended"] and configs["flat/typescript"] names from v0.14.x still work as aliases.)

These configurations do not configure global variables in ESLint. You can do this yourself manually or with a package like globals by creating a configuration with a languageOptions.globals object. We recommend setting up global variables for Browser APIs as well as at least ES2015.

Manual Configuration

If you don't want to use a preset, you can configure rules individually. Add the solid plugin, enable JSX with the parser options (or use the equivalent options for @typescript-eslint/parser or @babel/eslint-parser), and configure the rules you would like to use. Some rules have additional options you can set.

import solid from "eslint-plugin-solid";

export default [
  {
    plugins: { solid },
    languageOptions: {
      parserOptions: {
        ecmaFeatures: { jsx: true },
      },
    },
    rules: {
      "solid/reactivity": "warn",
      "solid/no-destructure": "warn",
      "solid/jsx-no-undef": "error",
    },
  },
];

Oxlint

The plugin's rules are AST-based, so they run under Oxlint's JS plugin support without modification. Add the plugin to jsPlugins in your .oxlintrc.json and enable the rules you want:

{
  "jsPlugins": ["eslint-plugin-solid"],
  "rules": {
    "solid/reactivity": "warn",
    "solid/no-destructure": "error",
    "solid/jsx-no-undef": "error"
  }
}

For Solid 2.0 projects, add "settings": { "solid": { "version": 2 } } to activate the version-aware rule behavior, and enable the 2.0 rules (solid/removed-api, solid/no-single-arg-create-effect, solid/no-accessor-as-prop, solid/no-store-mutation-outside-setter, solid/no-write-in-pure-computation, solid/no-unused-signal, solid/prefer-structured-class, and the server function rules solid/valid-use-server, solid/require-async-server-function, solid/no-invalid-server-capture, and solid/no-browser-globals-in-server-function).

Rules

✔: Enabled in the recommended configuration.

🔧: Fixable with eslint --fix/IDE auto-fix.

| ✔ | 🔧 | Rule | Description | | :---: | :---: | :--- | :--- | | ✔ | 🔧 | solid/components-return-once | Disallow early returns in components. Solid components only run once, and so conditionals should be inside JSX. | | ✔ | 🔧 | solid/event-handlers | Enforce naming DOM element event handlers consistently and prevent Solid's analysis from misunderstanding whether a prop should be an event handler. | | ✔ | 🔧 | solid/imports | Enforce consistent imports from "solid-js", "solid-js/web", and "solid-js/store". | | ✔ | | solid/jsx-no-duplicate-props | Disallow passing the same prop twice in JSX. | | ✔ | | solid/jsx-no-script-url | Disallow javascript: URLs. | | ✔ | 🔧 | solid/jsx-no-undef | Disallow references to undefined variables in JSX. Handles custom directives. | | ✔ | | solid/jsx-uses-vars | Prevent variables used in JSX from being marked as unused. | | | | solid/no-accessor-as-prop | Disallow passing uncalled signal accessors or other functions as value-typed DOM element attributes. | | | | solid/no-array-handlers | Disallow usage of type-unsafe event handlers. | | | 🔧 | solid/no-boolean-enumerated-attribute | Disallow boolean values on enumerated attributes like draggable and tristate aria-*, which take string tokens — a boolean false removes the attribute instead of writing "false". | | | | solid/no-browser-globals-in-server-function | Disallow browser-only globals inside server functions, which run exclusively on the server. | | ✔ | 🔧 | solid/no-destructure | Disallow destructuring props. In Solid, props must be used with property accesses (props.foo) to preserve reactivity. This rule only tracks destructuring in the parameter list. | | ✔ | 🔧 | solid/no-innerhtml | Disallow usage of the innerHTML attribute, which can often lead to security vulnerabilities. | | | | solid/no-invalid-server-capture | Disallow server functions from capturing variables in enclosing non-module scopes, mirroring the compiler's build-time validation. | | | | solid/no-module-scope-reactive-primitive | Disallow reactive primitives at module scope, where state is shared across SSR requests. | | | | solid/no-proxy-apis | Disallow usage of APIs that use ES6 Proxies, only to target environments that don't support them. | | ✔ | 🔧 | solid/no-react-deps | Disallow usage of dependency arrays in createEffect and createMemo. | | ✔ | 🔧 | solid/no-react-specific-props | Disallow usage of React-specific className/htmlFor props, which were deprecated in v1.4.0. | | | 🔧 | solid/no-restated-default-options | Disallow restating a prop or option value that is already the default. | | | | solid/no-single-arg-create-effect | Require the two-argument createEffect(compute, effect) form used by Solid 2.0. | | | | solid/no-store-mutation-outside-setter | Disallow mutating a store's read proxy; store state changes only through the setter's mutable draft. | | ✔ | | solid/no-unknown-namespaces | Enforce using only Solid-specific namespaced attribute names (i.e. 'on:' in <div on:click={...} />). | | | | solid/no-unused-signal | Disallow signals that are never written (use a plain value) or never read (dead state). | | | | solid/no-write-in-pure-computation | Disallow writing signals or stores inside createMemo, the compute half of createEffect, or a component body, which are pure owned scopes. | | | 🔧 | solid/prefer-classlist | Enforce using the classlist prop over importing a classnames helper. The classlist prop accepts an object { [class: string]: boolean } just like classnames. | | ✔ | 🔧 | solid/prefer-for | Enforce using Solid's <For /> component for mapping an array to JSX elements. | | | | solid/prefer-onSettled-for-side-effects | Enforce running side-effectful setup (timers, global listeners, observers) inside onSettled instead of the component body. | | | 🔧 | solid/prefer-show | Enforce using Solid's <Show /> component for conditionally showing content. Solid's compiler covers this case, so it's a stylistic rule only. | | | | solid/prefer-structured-class | Enforce using the structured array/object forms of the class prop over manually-built class strings. | | ✔ | | solid/reactivity | Enforce that reactivity (props, signals, memos, etc.) is properly used, so changes in those values will be tracked and update the view as expected. | | | 🔧 | solid/removed-api | Disallow Solid 1.x APIs that were removed or renamed in Solid 2.0, with migration guidance. | | | 🔧 | solid/require-async-server-function | Require server functions to be async, matching their client-side contract. | | ✔ | 🔧 | solid/self-closing-comp | Disallow extra closing tags for components without children. | | ✔ | 🔧 | solid/style-prop | Require CSS properties in the style prop to be valid and kebab-cased (ex. 'font-size'), not camel-cased (ex. 'fontSize') like in React, and that property values with dimensions are strings, not numbers with implicit 'px' units. | | | | solid/valid-use-server | Enforce that "use server" directives are placed where the compiler honors them, and that module-level directive files export working server functions. |

Troubleshooting

The rules in this plugin provide sensible guidelines as well as possible, but there may be times where you know better than the rule and want to ignore a warning. To do that, add a comment like the following:

// eslint-disable-next-line solid/reactivity
const [editedValue, setEditedValue] = createSignal(props.value);

Please note: there may also be times where a rule correctly warns about a subtle problem, even if it looks like a false positive at first. With solid/reactivity, please look at the reactivity docs before deciding to disable the rule.

When in doubt, feel free to file an issue.

Versioning

Pre-1.0.0, the rules and the recommended, typescript, v2, and v2-strict configurations will be stable across patch (0.0.x) versions, but may change across minor (0.x) versions. If you want to pin a minor version, use a tilde in your package.json.

- "eslint-plugin-solid": "^0.18.0"
+ "eslint-plugin-solid": "~0.18.0"