Visual Studio Code 를 사용해 React 코드를 간편하게 완성시키는 방법이 있습니다. className 이나 태그를 입력하면 자동완성 시키는 방법인데 플러그인 설치 없이 설정에 들어가서 간단히 수정만으로 가능합니다.
▼ 1. 우선 VS Code의 하단 설정을 선택합니다. ▼ 2. 설정을 텍스모드로 변경합니다. 다음 코드를 삽입합니다.
이제 부터는 h2.test.ok 이렇게 하고 탭키를 누르면 다음과 같은 코드를 볼 수 있습니다. Greetings, friends! Have you ever been working with JSX in your React code, wishing VS Code would autocomplete it for you like it does HTML? It's a super easy configuration in VS Code! In case you haven't heard, VS Code supports Emmet snippets by default. Emmet is a plugin for many text editors and IDEs such as VS Code. It helps you write HTML and CSS faster by giving you autocompletion support. If you create a new By default, VS Code isn't configured to recognize JSX with Emmet. In the image above, there's no autocomplete showing up when I type How do we fix this? It's actually super simple! If you type json Copied! ⭐
By adding these two lines, Emmet will be enabled in JSX and let you autocomplete element tags in files that are recognized as "javascriptreact" or "typescriptreact" in VS Code. You may have to restart VS Code for your changes to take effect. The "typescriptreact" option will help Emmet recognize JSX within your Now, when you try to type You can use your normal Emmet shortcuts as if you were in an After hitting Now, I like to go a step further and add another line to our
json Copied! ⭐
This line will automatically enclose square brackets and curly brackets. Why is this useful? We can do cool tricks like this: This is a type of Emmet shortcut that is already built into VS Code.
After hitting I've noticed that curly brackets have a hard time autocompleting in JSX. By telling VS Code to always close brackets as we start typing, it provides a small convenience of not having to type as much every time we create an element. ConclusionThis entire post was about improving the developer experience regarding typing in JSX. You'll find that you'll be writing JSX code much faster with these tricks! Happy coding! |