Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/karlhorky/eslint-tricks
A collection of useful ESLint tricks
https://github.com/karlhorky/eslint-tricks
eslint linting
Last synced: about 2 months ago
JSON representation
A collection of useful ESLint tricks
- Host: GitHub
- URL: https://github.com/karlhorky/eslint-tricks
- Owner: karlhorky
- Created: 2023-06-10T12:38:32.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-04-25T09:31:37.000Z (9 months ago)
- Last Synced: 2024-10-26T01:21:19.946Z (3 months ago)
- Topics: eslint, linting
- Homepage:
- Size: 5.86 KB
- Stars: 42
- Watchers: 3
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# ESLint Tricks
A collection of useful ESLint tricks
## React: Enforce Specific Children Component Types
To enforce the component type of all children in a specific component, use [the `no-restricted-syntax` built-in rule](https://eslint.org/docs/latest/rules/no-restricted-syntax):
`eslint.config.js`
```js
import tseslint from 'typescript-eslint';
export default tseslint.config({
rules: {
'no-restricted-syntax': [
'warn',
{
selector:
"JSXElement[openingElement.name.name='List'] JSXElement:not([openingElement.name.name='ListItem'])",
message:
'The List component must contain only elements as children',
},
],
},
});
```
Examples of **incorrect** code for this rule config:
```js
```
Examples of **correct** code for this rule config:
```js
```
- [`typescript-eslint` Playground](https://typescript-eslint.io/play/#ts=5.3.3&fileType=.tsx&code=GYVwdgxgLglg9mABAGRgZygCgJSIN4C%2BAUKJLAiulAJJQCmAtjvsUQDwB8RiibqGXHjzYATGADdEAekFC%2BVWo2my2U-lC7de62cPWKGyrXoX1DMrap3sLRO-YcOgA&eslintrc=N4KABGBEBOCuA2BTAzpAXGUEKQHYHsBaaFAF2gEsBjUxAE0OQE9dSBDAD3TAG1xscAdzbRckADT8BWAdkjJESGvmjdIAKQDKADQCiSALaJWPfAAdjFXAHN9iI6wB0uNkeevEAXgDkAGQrIpN4AumBaeobGpGgEpAAUpha4VraRTi5uGV5%2BAaQAkrQGIQCUElKykEbIyGzWiOjlslAAKgAWiGD%2BgWBU%2BAZm%2BLhRYAaw3b2sbFZgg-BMYAA8XfmFYAD0AHxgivZRyGBs%2B1StFPB0JGKNYAC%2B5cH8t9dAA&tsconfig=N4KABGBEDGD2C2AHAlgGwKYCcDyiAuysAdgM6QBcYoEEkJemy0eAcgK6qoDCAFutAGsylBm3TgwAXxCSgA&tokens=false)
- [AST explorer](https://astexplorer.net/#/gist/d6366a9a786f34682ba023163d3834c8/bc2e151e077502f597ee51eabb718c6fc4ee493b)
## React: Enforce Specific Children Component Types and Order
To enforce both the component type and order of children in a specific component, use [the `no-restricted-syntax` built-in rule](https://eslint.org/docs/latest/rules/no-restricted-syntax) and reference the index of the children by odd numbers starting at `1` (`1` is first child, `3` is second child, `5` is third child, etc):
`eslint.config.js`
```js
import tseslint from 'typescript-eslint';
export default tseslint.config({
rules: {
'no-restricted-syntax': [
'warn',
{
selector:
"JSXElement[openingElement.name.name='TwoColumnLayout']:not([children.1.openingElement.name.name='Meta']), JSXElement[openingElement.name.name='TwoColumnLayout']:not([children.3.openingElement.name.name='main']), JSXElement[openingElement.name.name='TwoColumnLayout']:not([children.5.openingElement.name.name='aside'])",
message:
'The TwoColumLayout component must contain only , and elements as children, in exactly this order',
},
],
},
});
```
Examples of **incorrect** code for this rule config:
```js
```
Examples of **correct** code for this rule config:
```js
```
- [`typescript-eslint` Playground](https://typescript-eslint.io/play/#ts=5.3.3&fileType=.tsx&code=GYVwdgxgLglg9mABAFQO5wMJwDYgLZgAyAhgJ5whQAUAlIgN4C%2BAUKJLAogLICmUxtBi2YAeAHzNEiEWkw58RMhSgB6CZOmysuAiXKUJUkSq3zdSg8w0z02hXuWGp0vMRhI1Go8QDOMACY8iJ5GJrZmivpQ6kamOpGOXtK8-MFORq7uaUkivgFBIdJhcvEOlsbqVlXV1UA&eslintrc=N4KABGBEBOCuA2BTAzpAXGUEKQHYHsBaaFAF2gEsBjUxAE0OQE9dSBDAD3TAG1xscAdzbRckADT8BWAdkjJESGvmjdIAKQDKADQCiSALaJWPfAAdjFXAHN9iI6wB0uNkeevEAXgDkAFUH4AML48LAGuAAybEz4sKTeALpoBKQAFDxUABYU8HQkuI4AjI7mljZ2DqTubi5GPgCyiOyJAJTiYFp6hsakpha4VrbdTrWI1V5%2BAcGh4VExcYnJ%2BGkZ2bn5jgDMJf2DFT3j4z4GbFat7Z37JqUD5cNVo0eTQSFhkdGx8Ukp6Vk5ecZHABWHZlIb2A6PUY%2BNjICh0RCtCRSWSQIzIZBsayIdAo2RQXyZRBgfwvGZzT5gKj4AxmfC4HpgAywZCkKn09hWMD0%2BBMMAAHka7DAAHoAHztfknKxisBsXB0AWw%2BGIWWKCGsZByrV-dbGdpcxAcNg0XlgUjZLUqBGqPFgAC%2BKIS-Ed9qAA&tsconfig=N4KABGBEDGD2C2AHAlgGwKYCcDyiAuysAdgM6QBcYoEEkJemy0eAcgK6qoDCAFutAGsylBm3TgwAXxCSgA&tokens=false)
- [AST explorer](https://astexplorer.net/#/gist/0c94bae9f735b6e337c1b49ea348de02/09b550f2f5029dec9787b77635d8e0f7e9cd0554)