Nuxt3 프로젝트에 ESLint, Prettier 적용하기
·
✏️ Study/⛰️ Vue.js & Nuxt
📍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를 선..
QDD 1-1. Yarn Berry & Next.js 설치, ESLint & Prettier 설치
·
✒️Notes/🎥활동
📍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
·
✏️ Study/Front-end ETC
내가 쓰려고 만든 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..