Create react-ts project

PPiing / PPoong

for PingPong SPA

MIT License

7 stars 1 forks source link

Create react-ts project #14

Closed HyeonsikBae closed 2 years ago

HyeonsikBae commented 2 years ago

수정 및 작업 내용

react-ts project 생성 및 환경 설정

사유

.eslintrc.json 설정
package.json 설정

HyeonsikBae commented 2 years ago

vite, ESLint 사용을 위한 설정 #13

joohongpark commented 2 years ago

로컬에 클론받아서 실행해보았는데 아래와 같이 npm run lint 명령어 실행시에 오류가 발생합니다.

packages.json 파일 내에 devDependencies 항목에 eslint-plugin-react 모듈이 없어서 lint를 구동시킬 때 에러가 나는 것으로 보입니다. 해당 이슈를 해결하려면 npm install eslint-plugin-react@latest --save-dev 명령어를 사용해 devDependencies 항목에 eslint-plugin-react 모듈을 추가한 후 다시 커밋해야 할 듯 합니다.

subin195-09 commented 2 years ago

npm run lint 를 실행하였을 때 위와 같은 에러가 발생합니다. "eslint-plugin-jsx-a11y" 플러그인을 찾지 못하는 에러같은데, "npm install eslint-plugin-jsx-a11y@latest --save-dev"로 모듈을 설치하면 에러가 사라지고 잘됩니다!

에러는 아니지만...

front_end 폴더와 frontend 폴더가 같이 존재해요!
package.json 스크립트 부분에 lint와 별개로 lint:fix 을 추가하시면 좋을거 같아요 :) "lint:fix": "eslint --ext .tsx --ext .ts src --fix"

joohongpark commented 2 years ago

음 저도 도커 컨테이너 상에서 구동시켜보았는데 @subin195-09 님의 오류 (디펜던시 관련)는 발생하지 않았습니다. 저 모듈은 검색해보니 jsx 앨리먼트에 대한 accessibility를 검사하는 것이라고 하는데 아마 .eslintrc.json 파일에 jsx-a11y 관련 룰이 들어가게 되어 종속성이 생긴것이 아닌가 하는 생각이 드네요 @HyeonsikBae 님 환경 (윈도우, 인텔)과 제 환경 (맥/도커, 인텔) 에서 구동할 때는 오류가 발생하지 않았는데 rules에 jsx-a11y 관련 룰을 제외하거나 해당 디펜던시를 명시적으로 추가하는 정도의 해결 방법이 있는거 같습니다.

HyeonsikBae commented 2 years ago

최종 커밋 내용

front_end directory 삭제
jsx-a11y 플러그인 설치
lint:fix 적용

추가로 vscode 내 settings.json에 아래 내용 추가되었다면 파일 저장 시 lint:fix와 동일한 기능이 동작됩니다.

"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true
},
"editor.formatOnSave": true,
"eslint.run": "onSave"