@tkc-fe/eslint-plugin-tkc-linting

INTERNAL DEVELOPER GUIDE

TKC Linting

Introduction

This package contains a whole host of ESLint rules for the different packages on the frontend. Install the core package below then enable the rules that pertain to the type of package that is being developed.

Installation 🛠

yarn add @tkc-fe/eslint-plugin-tkc-linting or npm i @tkc-fe/eslint-plugin-tkc-linting

Add tkc-eslint to the plugins section of your .eslintrc configuration file. You can omit the eslint-plugin- prefix:

{
    "plugins": [
        "@tkc-fe/tkc-linting"
    ]
}

Then configure the rules you want to use under the rules section.

{
    "rules": {
        "@tkc-fe/tkc-linting/<rule-name>": 'warn' || ['error', ...args]
    }
}

---

Supported Rules ✍️

HEX Code Restriction 🎨

Limit HEX codes to a specific file to enforce usage of the theming hooks.

"@tkc-fe/tkc-linting/no-hex-codes": [
    'error'         // Warning Type
    'colors.ts'     // File name allowed to contain HEX values
]

TODO: Monday Ticket Link 🎟

Enforce TODO: Comments to contain a Monday.com ticket ID reference.

"@tkc-fe/tkc-linting/todo-monday-tickets": 'error' // Warning type

Force Translations over Text 📚

This forces, and also suggests translation options rather than using string literals within react projects.

"@tkc-fe/tkc-linting/force-translation-text": 'error' // Warning type