React로 더 많은 코딩을 시작하기 전에 React 개발을 간소화하는 데 도움이 되는 도구에 대해 이야기 해 봅시다. 우리는 가능한 한 장비 된 React 개발에 참여하기를 원합니다!

Visual Studio Code는 현재 (그리고 많은 개발자들의) 현재 가장 좋아하는 편집기입니다. 다음과 같은 이유로 많은 사람들에게 인기가 있습니다.

• Speed (속도)
• Ability to autocomplete code with Intellisense (Intellisense로 코드 자동 완성 기능)
• Ability to catch errors and speed up development (오류를 포착하고 개발 속도를 높일 수 있는 능력)
• Built-in git (빌트인 git)
• Built-in terminal (빌트인 터미널)
• Extensibility (확장성)

VS 코드에는 React 및 JavaScript 개발에 활용할 수 있는 많은 훌륭한 확장 기능이 있습니다. 이 기사에서는 React 개발을 위한 중요한 확장에 초점을 맞출 것입니다.

VS 코드를 사용하지 않는다면 다른 편집자가 필요로 하는 플러그인에 익숙하지 않아서 이 게시물을 건너 뛸 수 있습니다.

자바 스크립트 확장 

이들은 일반적으로 JavaScript 작업을 위해 설치해야 하는 확장 기능입니다. 이러한 확장은 바닐라 JS 작품, React work, Vue 및 Angular를 도와줍니다.

여기서 가장 권장하는 확장 기능 중 일부를 나열하고 해당 항목에 대한 전체 기사에 대한 링크를 남깁니다.

확장 기능 

• JavaScript (ES6 코드 스 니펫) : 쓰기 속도를 높이는 유용한 JS 스니펫
• import Cost : JS 파일이 사용하는 것을 기반으로 얼마나 큰지 확인하십시오.
• Prettier : 자동 코드 포매터
• Path Intellisense : 파일에 무엇이 있는지 힌트를 얻으십시오.

Simple React Snippets는 제가 가장 좋아하는 것 중 하나입니다. 나의 주요 용도는 보다 쉬운 import line snippet이다.

Chrome 용 디버거 

디버거 확장을 사용하면 코드에서 버그를 빠르게 찾을 수 있습니다. 이 도구는 Create React App 도구에 익숙하지 않았기 때문에 아직 유용하지는 않지만 앞으로 메모를 남기고 다시 돌아올 수 있습니다. 여기에서 사용 방법에 대한 전체 글을 올렸습니다.

Color Schemes (Themes) 

VS 코드 주제에 대한 훌륭한 기사를 얻었으므로 여기서 너무 깊이 잠입하지 않을 것입니다. 현재 제가 사용하는 것은 Monokai Pro입니다.

Fonts 

필자가 개인적으로 사용하는 글꼴이 몇 가지 있습니다. 두 명은 돈을 받고 다른 두 명은 무료입니다. 모든 것을 선호합니다.

Operator Mono 

이 목록의 값 비싼 글꼴은 $ 400입니다. 몇 시간 동안 글꼴을 보면서, 나는 그런 품질의 글꼴에 대한 지불에 신경 쓰지 않습니다. 필자는 필기체와 이 글꼴에 있는 다른 글꼴만큼 큰 글꼴이 아닌 방식에 감사드립니다.

Dank Mono 

Dank Mono는 새로운 글꼴 중 하나이지만 그 글꼴은 이전에 나온 글꼴에서 많은 것을 배웠습니다. React의 무거운 사용자 인 Phil Pluckthun이 제작 한이 글꼴에는 초 초체 한 글꼴과 합자가 내장되어 있습니다. 40 달러의 가격으로 좋은 글꼴입니다.

Fira Code 

Fira 코드는 이 목록에 있는 무료 글꼴 중 하나입니다. 상자 밖의 합자 및 필기체와 함께 다재다능합니다. Fira 코드는 내 취향에 조금 비싸지 만 골목길에 있을 수 있습니다.

결론 

이것은 VS 코드가 개발자로서 당신을 위해 할 수 있는 모든 위대한 일들의 표면을 긁는 것입니다. 우리가 개발 유형에 맞게 조정 된 VS 코드를 실행하도록 이러한 것들을 설치하는 것이 좋습니다.