우선 react설치 후 creater-react-app로 리액트 앱 실행까지 완료된 후에 이후 설정들을 해주시면 됩니다.
prettier와 eslint 둘 다 일종의 코드 포맷터라고 생각하시면 됩니다. 개인의 코드를 일정하게 유지+보수할 뿐만 아니라 협업시에도 서로 간의 코드를 통일성있게 작성할 수 있도록 합니다
1. prettier
- 깔끔하고 일관되게 코드를 작성하게 해주는 vscode extension입니다.
- 협업시에도 prettier.json file을 통해 서로간의 코드스타일을 유지할 수 있습니다.
1-1. prettier 설치 및 사용법
[개발환경] vscode prettier 설치 및 사용법
[개발환경] vscode prettier 설치 및 사용법
#VSCode #Prettier #Extension
velog.io
- vscode에서 prettier가 잘 적용되는지 확인하려면 아무 코드나 작성후 save를 눌러보면 됩니다.
1-2. 만약 적용이 안 된다면 구글에 검색
prettier 적용 안됨 - Google Search
prettier 적용 안됨 - Google 검색
2021. 6. 18. · 안녕하세요, 그랩님! 다름이 아니라, 잘 먹히던 prettier가 특정 파일에서만 적용되지 않는 문제점이 있습니다. 1. 프리티어를 지웠다가 다시 설치도 ...
www.google.com
2. eslint
- 코드 작성 중 javascript 문법에 에러가 있는 곳에 표시를 달아줍니다. react역시 javascript 기반이므로 작성해줍시다.
- eslint는 node js 기반이기 때문에 node js가 설치가 되어있어야 합니다.
- eslint의 경우 vscode extension에서 추가로 끝나는 것이 아니라 추가로 npm을 통해 설치를 하셔야 합니다.
2-1. eslint 설치
ESLint 적용하기(+ Prettier)
저는 에디터 VSCode로 TIL이나 알고리즘, 온라인 강의를 자주 정리하는데 표준화된 코딩 컨벤션(Coding Convention)을 매번 정의할 때마다 환경이 다르다는 이유로 검색을 해야하는게 너무 불편했습니
sisparang.tistory.com
*vscode에서도 설명이 잘 되어있습니다. extension설치후 npm으로 설치를 하라고 나옵니다.
3. 공식문서
Getting Started with ESLint
Getting Started with ESLint ESLint is a tool for identifying and reporting on patterns found in ECMAScript/JavaScript code, with the goal of making code more consistent and avoiding bugs. In many ways, it is similar to JSLint and JSHint with a few exceptio
eslint.org
Prettier · Opinionated Code Formatter
Opinionated Code Formatter
prettier.io
4. react에서 eslint와 prettier가 겹칠 때
- 아래 2개 모듈을 설치해 주면 된다.
- npm i eslint-plugin-prettier eslint-config-prettier