[Vite] ESlint 와 Prettier, Package.json 초기설정

https://velog.io/@navyjeongs/vite%EB%A1%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EC%B4%88%EA%B8%B0-%EC%84%B8%ED%8C%85%ED%95%98%EA%B8%B0-1-with.-typescript-eslint-prettier-husky-%EC%A0%88%EB%8C%80%EA%B2%BD%EB%A1%9C

위 블로그를 참고해서 초기설정을 해보자~

 

절대경로 설정 간에 트러블 슈팅

 

1. eslint의 설치 과정에서 에러

test용 project에서 절대경로 설정이 성공하였다.

차이점: eslint 설정 간에 차이가 있다. 

성공작 : eslint를 설정하는 과정에서 npx eslint --init을 사용해서 eslint를 설정하고 format 형태를 json으로 설정을 하였다.

실패작 : .eslintrc.cjs 형태로 되어있고 내부 코드도 다름.

2. package.json 에 script 설정의 차이

성공작 : script를 따로 설정을 해줌

"scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview",
    "lint": "eslint ./src/**/*.{ts,tsx,js,jsx}",
    "lint:fix": "eslint --fix ./src/**/*.{ts,tsx,js,jsx}",
    "format": "prettier --write --cache ."   // 이건 prettier 관련
  },

실패작 : 안해줌 그냥 쓰여있는 그대로 사용함

 

3. tsconfig.json 설정만 해도 dev에서는 사용이 가능해야함

vite.config.ts에 설정을 하기 전에도 절대경로 설정을 하면 사용이 가능하다. 

tsconfig.json을 설정을 완료를 하고 vite.config.json을 건드리자

 

4.  '@vitejs/plugin-react' 모듈 또는 해당 형식 선언을 찾을 수 없습니다.

vite.config.ts에서 이러한 오류가 나타나게 되는데 간단하게 vscode를 재시작하니 사라졌다.