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.
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.
Use the "plugin:solid/recommended"
configuration to get reasonable defaults as shown below.
{
"plugins": ["solid"],
"extends": ["eslint/recommended", "plugin:solid/recommended"]
}
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"]
}
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"
}
}
โ: 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. |
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"