Code style linter configuration presets
npm install @itcase/lintPresets of linter configurations
``bash`
$ npm i -D @itcase/lint eslint stylelint prettier
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:
`js
const groups = [
'className',
'key',
'callback',
]
const customRulesForGroups = {
callback: '^on.*',
}
`
Create a eslint.config.mjs configuration file in the root of your project with the following content:
`js
import eslint from '@itcase/lint/eslint/index.js'
export default eslint
`
Create a eslint.config.mjs configuration file in the root of your project with the following content:
`js
import eslint from '@itcase/lint/eslint/index.js'
import eslintMobx from '@itcase/lint/eslint/mobx/index.js'
export default [...eslint, ...eslintMobx]
`
Create a eslint.config.mjs configuration file in the root of your project with the following content:
`js
import eslint from '@itcase/lint/eslint/index.js'
import eslintReactNative from '@itcase/lint/eslint/react-native/index.js'
export default [...eslint, ...eslintReactNative]
`
Create a eslint.config.mjs configuration file in the root of your project with the following content:
`js
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]
`
data-test-id-plugin accepts these options:
`ts`
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):
`js
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:
`js
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'],
},
],
},
},
]
`
Create a eslint.config.mjs configuration file in the root of your project with the following content:
`js`
export default {
extends: ['@itcase/lint/stylelint/index.js'],
}
Create a prettier.config.mjs configuration file in the root of your project with the following content:
`js
import prettier from '@itcase/lint/prettier/index.js'
export default prettier
`
1. Use husky and lint-staged
`bash`
npm i -D husky lint-staged
2. Create a .lintstagedrc configuration file in the root of your project with the following content:
`json`
{
"*.css": ["npx stylelint --fix"],
"*.(js|jsx|ts|tsx)": ["npx eslint --fix"]
}
3. Add pre-commit hook in .husky/pre-commit
`bash
#!/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
``