ESLint | 중괄호 내 문자 형태({'string'})를 문자로("string") 바꿔주는 플러그인

JSX props, children 에서 중괄호를 추가하거나 제거해주는 eslint 플러그인을 소개합니다.

 

저같은 경우, property 값을 string 타입으로 자동 저장해주는 기능을 갖고 싶었습니다.

property 명 입력 후, '='를 입력하면 자동으로 중괄호 {} 가 생기는데, 이후 따옴표를 입력하고 작성하면 자연스럽게 아래와 같이 작성하게 됩니다.

<App>{'Hello world'}</App>;
<App prop={'Hello world'} attr={"foo"} />;

 

이때 eslint 설정을 통해 자동으로 아래와 같이 바꿔주고 싶었습니다.

<App>Hello world</App>;
<App prop="Hello world" attr="foo" />;

 

jsx-curly-brace-presence 플러그인은 위처럼 가능하게 해줍니다!

 

 

아래는 github 페이지이며,

https://github.com/yannickcr/eslint-plugin-react

GitHub - yannickcr/eslint-plugin-react: React specific linting rules for ESLint

 

eslint-plugin-react rule 중 'jsx-curly-brace-presence' 에 대한 문서를 읽어보시면 됩니다.

https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-curly-brace-presence.md

GitHub - yannickcr/eslint-plugin-react: React specific linting rules for ESLint

 

 

 

위 두번째 문서의 설명처럼 eslint 설정파일 (.eslintrc.js) 에 아래와 같이 입력하면 되는데,

module.exports = {
  ...
  rules: {
    'react/jsx-curly-brace-presence': [<enabled>, { props: <string>, children: <string> }]
  }
}

여기서 enabled 에는 ESLint Rules Configuration 항목을 작성하면 됩니다.

https://eslint.org/docs/user-guide/configuring/rules

"off" or 0 : turn the rule off "warn" or 1 : turn the rule on as a warning (doesn't affect exit code) "error" or 2 - turn the rule on as an error (exit code is 1 when triggered)

 

 

예시는 아래와 같습니다.

// .eslintrc.js
module.exports = {
  ...
  rules: {
    'react/jsx-curly-brace-presence': [1, { props: 'never', children: 'never' }]
  }
}