Linting

@bamboocss/eslint-plugin checks how your code uses Bamboo CSS, in the editor and in CI, against the config your build reads: a token path that does not exist, a value the build cannot resolve, a hardcoded color where a token belongs, a recipe the build cannot name.

Installation

pnpm add -D @bamboocss/eslint-plugin

Configuration

ESLint 9 and later read flat config, eslint.config.js. Add the recommended rules:

// eslint.config.js
import bamboo from '@bamboocss/eslint-plugin'
import tsParser from '@typescript-eslint/parser'
 
export default [{ files: ['**/*.{ts,tsx}'], languageOptions: { parser: tsParser } }, bamboo.configs['flat/recommended']]

bamboo.configs['flat/all'] turns on every rule instead, except prefer-shorthand-properties, the opposite of prefer-longhand-properties: with both on, each would undo the other's fixes. With defineConfig, the same is extends: ['bamboo/flat/recommended'] beside plugins: { bamboo }.

The configs name no parser: TypeScript files take the one your project configures — the line above, or typescript-eslint's configs — and .vue, .svelte and .astro files keep their own. In a file ESLint lints as another language — CSS through @eslint/css, JSON through @eslint/json — the rules stand aside.

To choose the rules yourself, register the plugin and set them:

export default [
  {
    plugins: { bamboo },
    rules: {
      'bamboo/no-invalid-token-paths': 'error',
      'bamboo/no-hardcoded-color': 'warn',
    },
  },
]

In eslint.config.ts, the plugin and its configs type-check as ESLint's own ESLint.Plugin and Linter.Config.

Legacy .eslintrc

For the config system ESLint 9 deprecated, recommended and all are .eslintrc configs. They name @typescript-eslint/parser, which has to be installed:

{
  "extends": ["plugin:bamboo/recommended"]
}

Settings

The rules read the bamboo.config.ts found from the file being linted. To read another, name the file — or the directory holding it — relative to ESLint's working directory. For a path relative to eslint.config.js instead, make it absolute:

import path from 'node:path'
 
export default [
  {
    settings: { '@bamboocss/configPath': path.join(import.meta.dirname, 'bamboo.config.ts') },
  },
]

Rules

✅ marks the rules in flat/recommended and recommended.