eslint-plugin-solid

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's approaching a 1.0.0 release, and it's well tested and should be helpful in Solid projects today.

Installation

Install eslint and eslint-plugin-solid locally.

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

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

If you're using VSCode, you'll want to install the ESLint extension. If you're using Vite, you may want to install vite-plugin-eslint.

Configuration

Use the "plugin:solid/recommended" configuration to get reasonable defaults as shown below.

{
  "plugins": ["solid"],
  "extends": ["eslint/recommended", "plugin:solid/recommended"]
}

TypeScript

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

{
  "parser": "@typescript-eslint/parser",
  "plugins": ["solid"],
  "extends": ["eslint/recommended", "plugin:solid/typescript"]
}

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.

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

Rules

✔: Enabled in the recommended configuration.

🔧: Fixable with eslint --fix.

✔	🔧	Rule	Description
✔	🔧	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-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-react-specific-props	Disallow usage of React-specific `className`/`htmlFor` props (though they are supported for compatibility).
✔		solid/no-unknown-namespaces	Enforce using only Solid-specific namespaced attribute names (i.e. `'on:'` in `<div on:click={...} />`).
✔	🔧	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-show	Enforce using Solid's `<Show />` component for conditionally showing content.
✔		solid/reactivity	Enforce that reactive expressions (props, signals, memos, etc.) are only used in tracked scopes; otherwise, they won't update the view as expected.
✔	🔧	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 are strings, not numbers with implicit 'px' units.

Versioning

Pre-1.0.0, the rules and the recommended and typescript configuations 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.4.4"
+ "eslint-plugin-solid": "~0.4.4"