맥mac에 vscode(비주얼스튜디오코드) 설치 , 플러그인 설치

 

https://code.visualstudio.com/

Visual Studio Code - Code Editing. Redefined

위의 링크에서 Downloads for macOS 버튼 눌러서 설치 진행하면 됨

비주얼 스튜디오 코드 : 윈도우, 리눅스, macOS 등 대부분의 운영 체제와 호환되는 편집기. 

플러그인 설치하기 (vscode > Extensions 에서 설치할 플러그인 검색 후 install 하면 됨)

• Reactjs code sippets 플러그인 설치하기
  •  리액트에서 자주 사용하는 코드 뭉치를 자동으로 완성해줌

키워드	설명
RCC	기본 리액트 컴포넌트 코드를 생성한다.
RCCP	리액트 컴포넌트를 프로퍼티 타입과 함께 생성한다.
RCFC	리액트 컴포넌트를 생명주기 함수와 함께 생성한다.
RPC	리액트 퓨어 컴포넌트를 생성한다.
RSC	함수형 컴포넌트를 생성한다.
RSCP	함수형 컴포넌트를 프로퍼티 타입과 함께 생성한다.

• Prettier 플러그인 설치하기
  • 코드의 줄바꿈 등의 스타일을 자동으로 변환해주는 Prettier - Code formatter이다. 프로젝트의 코드 입력 스타일을 동일하게 유지시키므로 현업에서 자주 사용한다.
  • 프로젝트 폴더 내에 .prettierr파일명소문자 프리티어 설정 파일을 생성 한 후 아래와 같이 설정해줄 수 있다. 

{
  "useTabs": false, 
  "printWidth": 100,  
  "tabWidth": 2, 
  "trailingComma": "all", 
  "semi": true, 
  "singleQuote": true
}

1. 탭 사용할 때 빈칸으로 채우겠다.
2. 파일 최대 길이를 100칸으로 지정하겠다.
3. 탭의 빈칸을 두칸으로 지정하겠다.
4. 나열 항목의 마지막에 항상 (,)쉼표를 붙이겠다.
5. 실행 줄 마지막에 항상(;)세미콜론을 붙이겠다.
6. 문자 따옴표를 작은 따옴표('')로 통일하겠다. 
   • 파일명.jsx 파일을 연 상태에서 Ctrl + Shift + P 를 눌러서 명령어 팔레트를 연다 
   • Format 검색 후 Format Document라는 명령어를 찾은 후 엔터를 눌러 실행한다. 
   • 자동 설정 적용은 Preferences > Settings 에서 검색창에 formatOnsave입력 후에 User 탭에 Text Editor > Formatting Format On Save 체크박스 체크해주면 됨. 

설정해두면 파일 저장할때 마다 자동으로 코드 입력 스타일이 변경됨.