Editor integration

It is Good know

You can jump to definitions from styles even if they are not written in JSX command or Alt + click.

ESLint

It is the plumeria Linter eslint-plugin-zss-lint package

Terminal

npm i --save-dev eslint-plugin-zss-lint

eslint.config.mjs

import eslint from '@eslint/js';
import tseslint from 'typescript-eslint';
import zsslint from 'eslint-plugin-zss-lint';
 
const eslintConfig = tseslint.config(
  eslint.configs.recommended,
  ...tseslint.configs.strict,
  zsslint.flatConfigs.recommended,
 
  {
    files: ['**/*.{ts,tsx}'],
  }
);
 
export default eslintConfig;

className snippets

Creates a shortcut for object expansion of className.

{
  "React className": {
    "prefix": "cn",
    "body": "className={$1}",
    "description": "React className with curly braces",
  }
}

Editor integration

ESLint

className snippets

See more about eslint-plugin-zss-lint

On this page