ITCase Lint

Presets of linter configurations

Installation

 $ npm i -D @itcase/lint eslint stylelint prettier

Setting up sorting configuration

The sorting configuration is located in the perfectionist folder along the path: eslint/perfectionist.

Example: Setting up sortJSXProps

Sorting rules are defined in eslint/perfectionist/sortJSXProps.js.

Here's how to set up the order and rules:

1. groups:

• This array defines the order in which the props will be sorted.
• Add the prop names in the order you want them to be.

2. customRulesForGroups:

• If the prop sort order depends on the template (rather than the exact name), set up the rule here.

• For example:

const groups = [
  'className',
  'key',
  'callback',
]

const customRulesForGroups = {
  callback: '^on.*',
}

Usage

ESLint

Create a eslint.config.mjs configuration file in the root of your project with the following content:

import eslint from '@itcase/lint/eslint/index.js'

export default eslint

ESLint with MobX

Create a eslint.config.mjs configuration file in the root of your project with the following content:

import eslint from '@itcase/lint/eslint/index.js'
import eslintMobx from '@itcase/lint/eslint/mobx/index.js'

export default [...eslint, ...eslintMobx]

ESLint with React Native

Create a eslint.config.mjs configuration file in the root of your project with the following content:

import eslint from '@itcase/lint/eslint/index.js'
import eslintReactNative from '@itcase/lint/eslint/react-native/index.js'

export default [...eslint, ...eslintReactNative]

ESLint with MobX, React Native

Create a eslint.config.mjs configuration file in the root of your project with the following content:

import eslint from '@itcase/lint/eslint/index.js'
import eslintMobx from '@itcase/lint/eslint/mobx/index.js'
import eslintReactNative from '@itcase/lint/eslint/react-native/index.js'

export default [...eslint, ...eslintMobx, ...eslintReactNative]

ESLint with data-test-id-plugin

data-test-id-plugin accepts these options:

appendElementNamesToCheck?: string[] | null
overrideElementNamesToCheck?: string[] | null
overrideElementNamesToIgnore?: string[] | null

Defaults

• overrideElementNamesToIgnore: ['IgnoredElement', 'Html']
• overrideElementNamesToCheck: ['Group', 'Modal', 'Drawer', 'ModalSheetBottom', 'Grid', 'Flex']
• appendElementNamesToCheck: []

Behavior

• overrideElementNamesToIgnore: replaces the default ignore list.
• overrideElementNamesToCheck: replaces the default check list.
• appendElementNamesToCheck: adds to the current check list (default or overridden).
• null or undefined: keep the default behavior for that option.

Minimal setup (defaults):

import eslint from '@itcase/lint/eslint'

export default [
  ...eslint,
  {
    ignores: ['./**/*.stories.*'],
    files: ['./packages/*.{ts,tsx,js,jsx}'],
    rules: {
      'data-test-id-plugin/data-test-id': 'warn',
    },
  },
]

Customized setup:

import eslint from '@itcase/lint/eslint'

export default [
  ...eslint,
  {
    ignores: ['./**/*.stories.*'],
    files: ['./packages/*.{ts,tsx,js,jsx}'],
    rules: {
      'data-test-id-plugin/data-test-id': [
        'warn',
        {
          overrideElementNamesToIgnore: ['IgnoredElement', 'Html', 'SkipMe'],
          overrideElementNamesToCheck: ['Modal', 'Drawer'],
          appendElementNamesToCheck: ['Card', 'Panel'],
        },
      ],
    },
  },
]

Stylelint

Create a eslint.config.mjs configuration file in the root of your project with the following content:

export default {
  extends: ['@itcase/lint/stylelint/index.js'],
}

Prettier

Create a prettier.config.mjs configuration file in the root of your project with the following content:

import prettier from '@itcase/lint/prettier/index.js'

export default prettier

git-hook

1. Use husky and lint-staged

npm i -D husky lint-staged

2. Create a .lintstagedrc configuration file in the root of your project with the following content:

{
  "*.css": ["npx stylelint --fix"],
  "*.(js|jsx|ts|tsx)": ["npx eslint --fix"]
}

3. Add pre-commit hook in .husky/pre-commit

#!/bin/bash

if grep --include=*.{json,css,html} --exclude-dir={dist,node_modules,.git} -nri --color -B 1 -A 1 '<\{7\} HEAD\|^\=\.{7\}\|>\.{7\}' .; then
  echo 'Fix conflicts'
  exit 1
else ./node_modules/lint-staged/bin/lint-staged.js; fi