-
Notifications
You must be signed in to change notification settings - Fork 78
/
.eslintrc.json
139 lines (139 loc) · 8.58 KB
/
.eslintrc.json
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
{
"extends": [
"next",
"plugin:@typescript-eslint/recommended",
"prettier",
"plugin:storybook/recommended"
],
"parser": "@typescript-eslint/parser",
"plugins": ["@typescript-eslint", "prettier"],
"root": true,
"rules": {
"prettier/prettier": [
"error",
{
"tabWidth": 2,
"semi": true,
"endOfLine": "auto",
"singleQuote": false,
"trailingComma": "es5"
}
],
"@typescript-eslint/ban-types": "off",
"@typescript-eslint/no-namespace": "off",
"array-callback-return": "error",
"eqeqeq": "error",
"no-alert": "error",
"no-return-assign": "error",
"no-restricted-syntax": [
"error",
{
"selector": "CallExpression[callee.name=watch], MemberExpression[object.name=methods][property.name=watch]",
"message": "\"watch\" re-render the whole form component. Use hook \"useWatch\" instead."
},
{
"selector": "VariableDeclarator > ObjectPattern > Property[key.name=formState]",
"message": "\"formState\" re-render the whole form component. Use hook \"useFormState\" instead."
},
{
"selector": "VariableDeclarator[init.callee.name=useFormState][id.type=Identifier]",
"message": "Use destructuring assignment for \"useFormState\". Example: \"const { isDirty } = useFormState()\". Returned formState is wrapped with Proxy to improve render performance and skip extra computation if specific state is not subscribed, so make sure you deconstruct or read it before render in order to enable the subscription. More info here https://react-hook-form.com/docs/useformstate#rules"
},
{
"selector": "MemberExpression[object.name=control]",
"message": "Do not access any of the properties inside this object directly. It's for internal usage only. More info here: https://react-hook-form.com/docs/useform/control"
},
{
"selector": "VariableDeclaration[declarations.0.init.callee.name=useForm] ~ VariableDeclaration[declarations.0.init.callee.name=useWatch]",
"message": "\"useWatch\" in main form component (which use \"useForm\") will re-render the whole form component. Move your useWatch's logic to separate component."
},
{
"selector": "VariableDeclaration[declarations.0.init.callee.name=useForm] ~ VariableDeclaration[declarations.0.init.callee.name=useFieldArray]",
"message": "\"useFieldArray\" in main form component (which use \"useForm\") will re-render the whole form component. Move your useFieldArray's logic to separate component."
},
{
"selector": "VariableDeclaration[declarations.0.init.callee.name=useForm] ~ VariableDeclaration[declarations.0.init.callee.name=useController]",
"message": "\"useController\" in main form component (which use \"useForm\") will re-render the whole form component. Move your useController's logic to separate component."
},
{
"selector": "VariableDeclaration[declarations.0.init.callee.name=useForm] ~ VariableDeclaration[declarations.0.init.callee.name=useFormContext]",
"message": "\"useFormContext\" in main form component (which use \"useForm\") will re-render the whole form component. Move your useFormContext's logic to separate component."
},
{
"selector": "VariableDeclaration[declarations.0.init.callee.name=useForm] ~ VariableDeclaration[declarations.0.init.callee.name=useFormState]",
"message": "\"useFormState\" in main form component (which use \"useForm\") will re-render the whole form component. Move your useFormState's logic to separate component."
},
{
"selector": "CallExpression[callee.name=useForm][arguments.length=0], CallExpression[callee.name=useForm][arguments.length=1]:not(:has(Property[key.name=defaultValues]))",
"message": "Pass object with \"defaultValues\" for correct \"formState\" behavior. More info here: https://react-hook-form.com/api/useform/formstate#main"
},
{
"selector": "VariableDeclaration[declarations.0.init.callee.name=useState] ~ ReturnStatement JSXIdentifier[name=Controller]",
"message": "Don't use \"Controller\" with \"useState\". Move you \"useState\" and another logic to separate component and wrap this component via Controller. Reason: This approach will rise wrong logic for handle input field. Example: \"src/components/form/text-input/form-text-input.tsx\""
},
{
"selector": "VariableDeclaration[declarations.0.init.callee.name=useState] ~ VariableDeclaration[declarations.0.init.callee.name=useController], VariableDeclaration[declarations.0.init.callee.name=useController] ~ VariableDeclaration[declarations.0.init.callee.name=useState]",
"message": "Don't use \"useController\" with \"useState\". Move you \"useState\" and another logic to separate component and wrap this component into another component with useController. Reason: This approach will rise wrong logic for handle input filed"
},
{
"selector": "CallExpression[callee.name=useForm][arguments.length=1] Property[key.name=defaultValues][value.properties.length=0]",
"message": "\"defaultValues\" can not be empty object for correct \"formState\" behavior. More info here: https://react-hook-form.com/api/useform/formstate#main"
},
{
"selector": "MemberExpression[object.name=React][property.name=/^use/]",
"message": "Use hooks without \"React\" prefix. For avoid using both import styles. Example: \"useEffect\" instead of \"React.useEffect\"."
},
{
"selector": "CallExpression[callee.type=MemberExpression][callee.property.name=forEach]:has(AwaitExpression)",
"message": "Do not use in forEach \"async\" code, because logic will not be awaited. use \"map\" with \"Promise.all\", for example \"await Promise.all(ARRAY_OF_ITEM.map(...))\" or use regular \"for\" loop."
},
{
"selector": "ConditionalExpression[consequent.type=Literal][consequent.value=true][alternate.type=Literal][alternate.value=false]",
"message": "Do not use \"condition ? true : false\". Simplify \"someVariable === 42 ? true : false \" to \"someVariable === 42\""
},
{
"selector": "JSXElement[openingElement.name.property.name=Provider] JSXElement[openingElement.name.name]",
"message": "Do not put your regular components inside Context \".Provider\". Create new component, for example ComponentProvider. Put Provider's logic to ComponentProvider. Render \"{children} instead of regular component. Wrap regular component via new ComponentProvider \". Example: \"src/services/auth/auth-provider\""
},
{
"selector": "Property[key.name=/^(padding|margin|paddingLeft|paddingRight|paddingTop|paddingBottom|paddingVertical|marginLeft|marginRight|marginTop|marginBottom|marginVertical)$/][value.type=/^(Literal|UnaryExpression)$/]:not([value.value=\"0 !important\"]):not([value.value=\"0\"]):not([value.value=\"0 auto\"]):not([value.value=\"auto\"])",
"message": "Use theme.spacing() instead of literal."
},
{
"selector": "CallExpression[callee.name=/^(useQuery|useInfiniteQuery)$/] Property[key.name=queryKey]:not(:has(Identifier[name=key]))",
"message": "Use key created via createQueryKeys function instead of your solution"
},
{
"selector": "CallExpression[callee.name=refresh]",
"message": "Do not use refresh() function for update or change result in react-query. Use \"queryClient.resetQueries\" or pass new filter data to queryKey."
},
{
"selector": "ExpressionStatement[expression.callee.object.name=JSON][expression.callee.property.name=parse][expression.arguments.0.callee.object.name=JSON][expression.arguments.0.callee.property.name=stringify]",
"message": "Do not use JSON.parse(JSON.stringify(...)) for deep copy. Use structuredClone instead."
},
{
"selector": "CallExpression[callee.name=test][arguments.0.value!=/^should/]",
"message": "\"test\" should start with \"should\""
}
],
"no-restricted-imports": [
"error",
{
"paths": [
{
"name": "@mui/material",
"message": "Please use \"import ComponentName from '@mui/material/ComponentName'\" instead."
},
{
"name": "@mui/icons-material",
"message": "Please use \"import IconName from '@mui/icons-material/IconName'\" instead."
},
{
"name": "next/link",
"message": "Please use \"import Link from \"@/components/link\"\" instead. This is need for \"leave page\" logic"
}
]
}
]
}
}