React JS / VScode for React, Prettier 세팅하기(Javascript, Vanila JS, React)

 

VScode 사용자들은 Prettier의 편리함에 익숙할 것이다. (Javascript)

 

Vanila JS만 공부하다가 이번에 React JS를 같이 보는데

React JSX 라는 좀더 단순하고, 새로운 방식의 코드 작성법을 만나는 순간 같이 찾아온 "Error"아닌 Error.. 

---

기존 Prettier는 예로 "h1"을 한번 치면 아래와 같이 자동으로 태그를 완성해주었다.

<h1></h1>

 

그런데 ReactJS에서는 이 완성기능이 온전히 작동을 하지않고 ( <h1> 시작 태그를 쓰면 닫아주긴 한다...)

그래도 시작태그만 적으면 자동으로 닫아주니 참고 쓰려했는데 input 같은 태그들은 엉뚱하게 먹히는 문제를 직면한다.

예를들어, <input> 을 작성하면 아래와 같이 이상하게 tag를 닫아버리기 시작한다.

<input></input>

input 태그는 link, img ... 등과 같이 셀프클로징(Self closing) 태그이다.  

<input />
<link />
<img />

---

이제 빠르게 해결하고 넘어갑시다. 

 

1. Vscode 에서 CTRL + , 눌러서 Setting 화면으로 진입

2. emmet include languages 검색

3. Item: javascript, Value: javascriptreact 각각 입력

4. Add Item 입력

이제 React JSX를 좀더 빠르고, 편안하게 즐길수 있게 되었을 것이다.

 

그럼 이만,  Bye!