📍prettier 설치prettier 설치eslint-config-prettier eslint-plugin-prettier 등은 설치할 필요 없음 yarn add -D prettier 루트 경로에 .prettierrc 파일을 만들고 아래 내용을 추가한다 { "tabWidth": 2, "semi": true, "singleQuote": false, "trailingComma": "all", "printWidth": 90, "useTabs": false, "endOfLine":"auto"} 사용중인 IDE에서 prettier 설정을 켜준다 📍eslint 설치원래는 cli 를 통해 간편하게 eslint를 설치했지만..yarn create @eslint/config 터미널에서 Vue.js를 선..

📍Q1. Yarn Berry로 프로젝트를 시작하려면? 일반적인 Yarn은 클래식 (1.X) Yarn Berry 는 2.X 버전 이상을 말한다 - Node.js 18.15.0 - Yarn 3.5.0 기준 yarn init -2 생성된 프로젝트 구조가 꽤 달라서 당황.. Yarn Berry의 핵심인 zero-install 및 plug-n-play 에 대해서 나중에 알아봐야겠다 zero-install 덕분에 - 커밋, 푸쉬하는데 시간이 오래 걸림 ㅠㅠ - zero-install 기능을 해제하려면 .yarn/cache 를 .gitignore에 추가하면 됨. 단 이는 node_modules 처럼 초기에 yarn install 필요 (현재는 !가 붙어서 gitignore의 부정 상태) ⭐zero-install 덕분..

내가 쓰려고 만든 ESLint & Prettier 사용법 (for React & TypeScript) ESLint 1. package.json 확인 - eslint 관련 패키지가 설치되어 있는지 확인 - CRA의 경우 eslint config도 내장되어 있음 - Vite의 경우 내장 X (230824 현재는 내장되어 있음) 2. (없는 경우)패키지 설치 및 CLI 설정 실행 npm i -D eslint npm init @eslint/config // 또는 yarn create @eslint/config CLI 방식으로 설정하는 이유 - React나 TS를 사용할 때 필요한 플러그인도 함께 다 설치해줌 3. 순서대로 아래처럼 입력 4. rule 추가 (널리 쓰이는 rule) "@typescript-esli..

출처 - 리액트를 다루는 기술(김민준 지음) 1. Prettier란? 코드 스타일을 간편하게 커스터마이징하고 수정해주는 VS Code 확장도구 2. Prettier 설정하기 먼저 VS Code 확장도구 Prettier를 설치한다. 그리고 프로젝트의 루트 디렉터리에서 .prettierrc 라는 파일을 생성한 후 다음 내용을 입력한다 // .prettierrc { "singleQuote": true, // 큰 따옴표 대신 작은 따옴표 사용 "semi": true, // 세미콜론 자동으로 붙임 "useTabs": false, // 들여쓰기 할 때 탭 대신 공백 "tabWidth": 2 // 공백 2칸 사용 } 이후 저장할 때 자동으로 코드 정리되도록 format on save 를 설정해준다