eslint-plugin-pattakit

Made with the help of P' Yee (Korbboon Thuswongsa)

ESLint plugin with custom rules for Pattakit projects. This plugin helps enforce internationalization best practices by preventing raw text in JSX components.

Installation

Install the plugin as a dev dependency:

npm install --save-dev eslint-plugin-pattakit

yarn add --save-dev eslint-plugin-pattakit

Usage

Basic Configuration

Add pattakit to the plugins section of your .eslintrc configuration file:

{
  "plugins": ["pattakit"],
  "rules": {
    "pattakit/no-raw-jsx-text": "warn",
    "pattakit/no-literal-in-expression-container": "warn"
  },
  "overrides": [
    {
      "files": ["src/**/*.test.*"],
      "rules": {
        "pattakit/no-raw-jsx-text": "off",
        "pattakit/no-literal-in-expression-container": "off"
      }
    }
  ]
}

Using Recommended Configuration

You can use the recommended configuration which includes all plugin rules with their recommended settings:

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

Advanced Configuration

For JavaScript configuration files (.eslintrc.js):

module.exports = {
  plugins: ["pattakit"],
  rules: {
    "pattakit/no-raw-jsx-text": "warn",
    "pattakit/no-literal-in-expression-container": "warn",
  },
};

Or with the recommended preset:

module.exports = {
  extends: ["plugin:pattakit/recommended"],
};

Available Configurations

This plugin provides the following configurations:

• recommended: Includes all rules with their recommended settings
• all: Includes all available rules (same as recommended for now)

Rules

Rule	Description	Fixable	Config
no-raw-jsx-text	Disallow raw text in JSX. Use t('label') instead.	❌	✅

no-raw-jsx-text

Disallows raw text in JSX elements to enforce the use of internationalization functions like t().

❌ Incorrect

const Component = () => <div>Hello World</div>;

const Button = () => <button>Click me</button>;

const App = () => (
  <div>
    <h1>Welcome</h1>
    <p>This is some text</p>
  </div>
);

✅ Correct

const Component = () => <div>{t("hello_world")}</div>;

const Button = () => <button>{t("click_me")}</button>;

const App = () => (
  <div>
    <h1>{t("welcome")}</h1>
    <p>{t("description_text")}</p>
  </div>
);

// Variables and expressions are allowed
const Component = () => (
  <div>
    {userName}
    {getValue()}
    {isLoggedIn ? t("welcome_back") : t("please_login")}
  </div>
);

Development

Testing

Run the test suite:

npm test

Run tests with coverage:

npm test -- --coverage

Linting

Lint the codebase:

npm run lint

Requirements

• Node.js >= 12.0.0
• ESLint >= 7.0.0

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

This project is licensed under the MIT License - see the LICENSE file for details.

Changelog

v1.0.1

• Initial release
• Added no-raw-jsx-text rule
• Added recommended configuration

Support

If you encounter any issues or have questions, please open an issue on GitHub.

Related

• ESLint - The pluggable linting utility for JavaScript
• eslint-plugin-react - React specific linting rules for ESLint
• react-i18next - Internationalization framework for React