Orchemi

Orchemi

I start where others stop.

[VSCode/ESLint] VSCode tsx 컴포넌트 props 자동완성시 중괄호 생성하기

작성:    

업데이트:

카테고리:

태그:

문제 상황

  • React jsx/tsx 컴포넌트에서 컴포넌트에 props를 넣을 때 컴포넌트 props 타입을 지정해놓는다면 자동완성을 활용할 수 있다.
  • 그런데 이 props 자동추천으로 props를 추가하면 중괄호가 생기지 않는 것이 불편했다.
  • 참고로 intelliJ에서는 잘 됐다. VSCode 문제라고 생각이 들었다.
<App prop='' />;
//        ~~
// 중괄호가 나왔으면 좋겠다.


문제 해결

  • stackoverflow의 어떤 질문글(VSCode adds curly braces on autocomplete)에서 힌트를 얻을 수 있었다.
  • VSCode의 사용자 설정에 옵션을 추가해주면 된다.


적용 방법

settings.json 파일을 열어준다.

image


아래와 같이 설정을 추가해준다.

{
  ...	
  "javascript.preferences.jsxAttributeCompletionStyle": "braces", // jsx 속성 자동완성시 {}로 감싸기
  "typescript.preferences.jsxAttributeCompletionStyle": "braces" // tsx 속성 자동완성시 {}로 감싸기
}

“auto”, “braces”, “none” 중 “braces”를 특정 지정해주었더니, props 자동완성시 ={}가 나오게 되었다.


ESLint

  • 문제를 해결하는 과정에서 이를 rule로 지정해 저장시 자동변경시켜주는 eslint plugin을 발견할 수 있었다.
  • react/jsx-curly-brace-presence 라는 rule을 사용하면 된다.
{
  "rules": {
    "react/jsx-curly-brace-presence": ["error", { "props": "never", "children": "never" }]
  }
}


첫 번째 인자는 규칙을 어겼을 경우 어떻게 처리할 지에 대한 설정이다.

- "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)


References

댓글남기기

참고