Awesome

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

• Installation
• Configuration
  • TypeScript
  • Manual Configuration
  • Flat Configuration
• 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

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. Some rules have additional options you can set.

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

Flat Configuration

ESLint's new configuration system, Flat Configuration, is available starting in ESLint v8.23.0. To use it, create an eslint.config.js file at the root of your project, instead of .eslintrc.* and/or .eslintignore.

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

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

For TypeScript:

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",
      },
    },
  },
];

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.

Note for the ESLint VSCode Extension: Enable the "Use Flat Config" setting for your workspace to enable Flat Config support.

Flat configs are also available as plugin.configs['flat/recommended'] and plugin.configs['flat/typescript'], after using import plugin from 'eslint-plugin-solid'.

Rules

✔: Enabled in the recommended configuration.

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

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 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.14.5"
+ "eslint-plugin-solid": "~0.14.5"