@bubblydoo/eslint-plugin-uxp

Custom ESLint plugin for UXP development with Photoshop.

Installation

pnpm add -D @bubblydoo/eslint-plugin-uxp

Usage

ESLint Flat Config (ESLint 9+)

import uxpPlugin from '@bubblydoo/eslint-plugin-uxp';

export default [
  {
    plugins: {
      uxp: uxpPlugin,
    },
    rules: {
      'uxp/no-unsupported-css': 'error',
      'uxp/no-unsupported-css-tailwind': 'error',
      'uxp/prefer-adobe-protocol': 'error',
    },
  },
  // Or use the recommended config
  uxpPlugin.configs.recommended,
];

Legacy ESLint Config

{
  "plugins": ["@bubblydoo/uxp"],
  "rules": {
    "@bubblydoo/uxp/no-unsupported-css": "error",
    "@bubblydoo/uxp/no-unsupported-css-tailwind": "error",
    "@bubblydoo/uxp/prefer-adobe-protocol": "error"
  }
}

Rules

prefer-adobe-protocol

Requires adobe: protocol for Adobe UXP native module specifiers.

❌ Incorrect:

import { app } from 'uxp';

const { app } = require('photoshop');

✅ Correct:

import { app } from 'adobe:uxp';

const { app } = require('adobe:photoshop');

no-unsupported-css

Disallows CSS gap usage, because it is unsupported in UXP.

❌ Incorrect:

const style = { gap: 8 };

const css = `
  .row {
    gap: 1rem;
  }
`;

no-unsupported-css-tailwind

Disallows Tailwind gap-* utilities, because they map to CSS gap.

❌ Incorrect:

<div className="flex gap-2" />

<div className={`grid gap-x-4`} />

License

MIT