에디터 확장기능 설정

vscode 플러그인 설치

- Auto Rename Tag
: 열고 닫는 태그명을 동시 변경
- ES7 + React / Redux / React-Native snippets
: 리액트 관련 코드 자동완성제공
- ESLint
: 표준 자바스크립트 코드의 오류 검사
- html tag wrapper
: 여러코드들을 특정 태그로 자동 그룹화
- indent-rainbow
: 코드의 들여쓰기 가독성 향상
- Prettier
: 코드를 보기좋게 정렬
- Tailwind CSS intellisence
: TailwindCSS 코드 자동 완성 및 상세코드 미리보기
- Tailwind Fold
: 인라인 형태의 tailwindCSS 구문을 접어 코드 가독성 향상
- vscode-icon
: 각 폴더 및 파일의 특징에 맞게 아이콘을 가독성

---

tailwindCSS 설정파일 추가

tailwind.config.js (src 파일 동일선상 위치)

/* @type {import ('tailwindcss').Config*/
export default{
	content:["./src/**/*.{html,js,jsx}"]
}

위의 설정 파일이 있어야 리액트에서 tailwind 구문 사용가능

---

프로젝트 폴더 특정에디터 옵션 분리

여러프로젝트 마다 특정 에디터 세팅 변경할 때 사용방법
.vscode > settings.json

/* 프로젝트마다 에디터 세팅 설정파일 - tailwind */

{
	"tailwind-fold.autuFold":false,
	"tailwind-fold.unfoldedTextOpacity":1,
	"tailwind-fold.foldStyle" : "ALL",
	"tailwind-fold.unfoldIfLineSelected" : true,
	“tailwind-fold.showTailwindImage" :true
}
/*
	"tailwind-fold.autuFold":false,
	//자동으로 tailwind 구문 접어서 숨김처리
	"tailwind-fold.unfoldedTextOpacity":1,
	//접히지 않는 tailwind 구문 투명도 1로 설정
	"tailwind-fold.foldStyle" : "ALL",
	//tailwind 구문 접기시 속성명, 속성값 모두 숨김처리
	"tailwind-fold.unfoldIfLineSelected" : true,
	//특정코드가 선택시, 접기기능 해제
	“tailwind-fold.showTailwindImage" :true
	// tailwind 구문 접기시 tailwind 아이콘 출력
*/

.prettierrc로 코드 정렬 설정 따로 관리

프로젝트마다 코드 정렬 설정을 따로 관리 할수 있다.
일반 웹 퍼블리싱 작업할때와 리액트를 활용한 프론트앤드 개발시의 포멧팅 방식이 상이하므로 꽤 유용한 기능중 하나이다.
root > .prettierrc

{
	"printWidth":200,
	"useTabs":true,
	"semi" : true,
	"singleQuote: false,
	"trailingComma":"none",
	"jsxBracketSameLine":true,
	"bracketSpacing":true,
	"arrowParens":"avoid",
	"singleAttributePerLine":false
}