ESLint plugin for Panda CSS
pnpm add -D @pandacss/eslint-pluginAdd @pandacss/eslint-plugin to the plugins section of your .eslintrc configuration file. You can omit the /eslint-plugin suffx:
{ "plugins": ["@pandacss"] }Then configure the rules you want to use under the rules section.
{ "rules": { "@pandacss/no-debug": "error" } }You can also enable the recommended rules in extends:
{ - "plugins": ["@pandacss"] + "extends": ["plugin:@pandacss/recommended"] }Or enable all rules in extends:
{ - "plugins": ["@pandacss"] + "extends": ["plugin:@pandacss/all"] }Warning
This is not recommended. You should only enable the rules you need.
If you use the flat config format, you can import the plugin and rules from @pandacss/eslint-plugin and put it into your config.
import typescriptParser from '@typescript-eslint/parser' import panda from '@pandacss/eslint-plugin' export default [ { files: ['**/*.js', '**/*.jsx', '**/*.ts', '**/*.tsx'], ignores: ['**/*.d.ts', 'styled-system'], plugins: { '@pandacss': panda, }, languageOptions: { parser: typescriptParser, }, rules: { // Configure rules here '@pandacss/no-debug': 'error', // You can also use the recommended rules ...panda.configs.recommended.rules, // Or all rules ...panda.configs.all.rules, }, }, ]You can see an example using typescript-eslint at sandbox/v9/eslint.config.mjs.
Rules with ⚙️ have options. Click on the rule to see the options.
Where rules are included in the configs recommended, or all it is indicated below.
You can tell eslint to use a custom panda config file by setting the configPath option in your .eslintrc.js file.
By default we find the nearest panda config to the linted file.
const path = require('path') module.exports = { plugins: ['@pandacss'], settings: { '@pandacss/configPath': path.join('PATH-TO/panda.config.js'), }, }import panda from '@pandacss/eslint-plugin' import path from 'node:path' export default [ { plugins: { '@pandacss': panda, }, settings: { '@pandacss/configPath': path.join('PATH-TO/panda.config.js'), }, }, ]