지금까지는 webstorm을 사용해서 개발을 진행해왔다. 이번에 프로젝트를 진행하면서 visual studio code를 사용해보기로 했다. 먼저 마켓 플레이스에서 필요한 extension들을 설치하였다.
💚 Prettier-Code formatter
prettier는 우리가 작성한 코드를 예쁘게 정렬해주는 역할을 한다. 이로 인해 코드의 가독성을 높일 수 있다는 장점이 있다.
prettier를 사용하기 위해서는 몇 가지 설정이 필요한다.
먼저, 파일 > 기본 설정 > 설정 (또는 ctrl+,)에서 format on save을 검색하여 체크해준다.
그런후에 settings.json 에 "editor.defaultFormatter": "esbenp.prettier-vscode" 을 추가하여준다.
{
"workbench.iconTheme": "eq-material-theme-icons-darker",
"workbench.colorTheme": "Community Material Theme",
"editor.formatOnSave": true,
"editor.codeActionsOnSave": null,
"editor.defaultFormatter": "esbenp.prettier-vscode" }
"workbench.colorTheme": "Community Material Theme",
"editor.formatOnSave": true,
"editor.codeActionsOnSave": null,
"editor.defaultFormatter": "esbenp.prettier-vscode" }
그럼 아래와 같이 못생긴 코드를 예쁘게 정렬시킬 수 있다.
.gif)
💛 ESLint
ESLint는 자바스크립트의 문법을 체크해주는 역할을 한다.
💚 Simple React Snippets
snippet 은 자주 사용되는 코드를 단축키로 만들어 간편하게 쓸 수 있게 해주는 기능이다. 아래 예시와 같이 imr을 입력하면 다음과 같이 react를 import 할 수 있다.
마켓 플레이스에서 설치하여 사용할 수 있지만snippet은 직접 만들어 사용할 수 있다.
이 외에도 아래와 같이 다양한 extensions들이 많이 있다.
💛 Auto Close Tag
이름 그대로 자동으로 태그를 닫아주는 extension이다.
💚 Babel Javascript
바벨 문법을 체크해준다.
💛 Code Spell Checker
중간중간 잘못된 단어를 사용하면 바로 잡아준다.
💚 Material Theme
기본 테마 외에도 다양한 테마 사용이 가능하다.
개발 기록💻