eslint-plugin-jsx-dollar

Eslint plugin that check JSXText's unnecessary template literal $ character.

Install

npm add -D @grawl-ru/eslint-plugin-jsx-dollar

.eslintrc.js

module.exports = {
    'plugins': [
        'jsx-dollar',
    ],
    'rules': {
        'jsx-dollar/jsxDollar': 'error',
    },
}

eslint.config.js

import jsxDollar from '@grawl-ru/eslint-plugin-jsx-dollar';
import { fixupPluginRules } from '@eslint/compat';

export default {
  plugins: { 'jsx-dollar': fixupPluginRules(jsxDollar) },
  rules: {
    'jsx-dollar/jsxDollar': 'error',
  },
}

Example

When using JavaScript template literals, use `${expression}`. But, we rarely typo ${} in JSX text.

Details are shown below.

const text = "sample";

export const Success: React.FC = () => {
  return (
    <span>{`${text}`}</span>
    // Equals <span>sample</span>
  );
};

export const Failed: React.FC = () => {
  return (
    <span>${text}</span>
    // Equals <span>$sample</span>
  );
};

Lisence

MIT