ESLint rule: react/jsx-curly-brace-presence
Tags: devbugsmash, react, javascript
Published: 2021-09-03 19:05:39

I like to read engineering and technology related articles shared by wonderful folks our various platform like Medium, Dev.to, Twitter, etc. One day while scrolling through my feed I stumbled upon [#bugsmash program](https://dev.to/devteam/bug-smash-is-back-join-the-challenge-g41). 
I looked into the open issues and picked **Add eslint rule for formatting redundant curly braces in jsx [#12643](https://github.com/forem/forem/issues/12643)**. During this time I was reading about ASTs, learning how linters work so I thought it would be a good issue to tackle.

### About the bug

{% github https://github.com/forem/forem/issues/12643 %}

The task was to be set up ESLint rule to catch the following formatting/code style issues in react

```jsx
<MyComponent type={ 'exampleType' }>{ 'Hello world' }</MyComponent>
```
Would be corrected to:
```jsx
<MyComponent type="exampleType">Hello world</MyComponent>
```
As, you can see below, I ran the linter on all JavaScript files and it found and fixed 1 issue here -> 
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/smt0mwxofe1lyaytwcdo.png)

### How I Smashed It

{% github https://github.com/forem/forem/pull/14592 %}

The solution was as easy as adding any other existing rule. Since `eslint-plugin-react` was already added as a dev dependency in the project, I followed the guide here https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-curly-brace-presence.md
```js
// .eslintrc.js
rules: {
    /* 
        Existing rules
    */
    'react/jsx-curly-brace-presence': [
      'error',
      { props: 'never', children: 'never' },
    ],
  },
```

Before reaching to above solution, I explored https://astexplorer.net/ and how to work with rules. I also learned how to write my very own ESLint rule.

```js
<MyComponent type={ 'exampleType' }>{ 'Hello world' }</MyComponent>
```

The above jsx in AST have following structure:

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h8axqxgpsm9je2fbxsfu.png)

So, we can have a following function which apply on all `JSXExpressionContainer` using visitor pattern and check if `typeof node.expression.value is a string` then we can replace the expression with a fixer by replacing it with `node.expression.raw`

```js
function (context) {
    return {
      JSXExpressionContainer(node) {
        if (typeof node.expression.value === "string") {
          context.report({
            node,
            message: "Do not use redundant curly braces",
            suggest: [
              {
                desc: "Replace `{ 'string' }` with `'string'`",
                fix: function (fixer) {
                  return [fixer.replaceText(node, node.expression.raw)];
                },
              },
            ],
          });
        }
      },
    };
  }
```
You can see the whole thing in action
https://astexplorer.net/#/gist/b146b6ba734c554f51e4d5bb53023dda/e4077cfc126335c9468cca9eba01c675addf177d


### Reflection

It was great experience building forem's source code and I like that the DEV team really appreciated my PR however small it was.