2023-01-05 React prettier, eslint 설치 사용추천

강의 정리/React JS

2023-01-05 React prettier, eslint 설치 사용추천

끼록관 2023. 1. 5. 14:59

MERN Stack

외국의 대세 프레임워크

MongoDB

Express JS

React JS

Node JS

조금 수업할 몽고DB가 SQL보다 쉽다.. 걱정 노노

코드를 정리 확인 가능한

Formatting, Linging,Typescript세팅

코드 formatting이란

협업할 때, 같은 if문 이라도 사람마다 다르다.

() { <ㅡ 함수를 찾을때 검색을 이렇게 하는데,

만약 (){ 붙여쓴다면 검색을 할 수 없다.

보통의 회사같은 경우는 파일로 규정한다.

vs확장프로그램으로 prettier를 많이 씁니다.

Formatting

" code의 스타일 통일 " 시켜줌

함수의 소괄호 중괄호는 띄울 것인지? 세미 콜론은 찍을 것인지..?

먼저

새로 폴더를 git 충돌이 나지 않게 다른곳에 파주도록 하자

npx create-react-app "앱이름"

리엑트관련 모듈을 가져와서 폴더 셋팅

"앱이름"으로 폴더가 생긴다.

1. 프리티어 설치

npm install --save-dev prettier
= npm i -D prettier

설치 확인

package.json 파일 가보면

> "devDependencies":
- 빌드할때는 빠짐

- 개발할때 사용하는 부분

설치 셋팅

2. .prettierrc 파일 생성 후

안에 룰을 지정 해줍니다.

vscode도 prettier를 사용할 수 있도록 셋팅 해줍니다.

3. .vscode 폴더를 만들고 그 안에 settings.json 파일을 만들어줍니다.

* 프리티어가 먹힌다면 "[jav" 만 쳐도 자동완성이 될 것입니다.

vscode가 기본적으로 prettier를 먹도록 하는 셋팅을 해줍니다.

Linging

" 에러는 아닌데 문제를 일으킬 수 있는 요소 " 를 제거해주는 작업

포멧팅보다는 많은 규약, 규율을 검사한다.

코드 스멜, 코드 먼지 떼내는 느낌

프론트쪽에서는 에어비앤비가 이런 부분을 많이 리딩 하고 있다.

에어비엔비의 룰이 유명해서 우리도 그것을 쓸 것이다.

1. ESLint 설치

패키지 제이슨에 설치 확인

npm install --save-dev eslint-config-airbnb-base eslint-plugin-import

그리고 .eslintrc.js파일 생성 후

룰 적용 파일 셋팅

module.exports = {
  extends: ['airbnb-base'],
  rules: {
    'linebreak-style': 0,
    'no-console': 'off',
    indent: 'off',
  },
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 'latest',
    sourceType: 'module',
  },
};

사감님이 따로없다..

틀린말없고, 배우기 좋은것 같다.

node main.js 로 하면 1이 뜨고 문제가 없으나.. 빨간줄 봅시다

항상 켜두는게 좋을 것

걸프?에 저장하고 쓰면 좋다

Typescript

ts적으로 코드를 지켜봐주는 패키지 모듈 도우미를 쓰겟다

타입스크립트도 나중에 공부하길...바람

자료형 변환이 복잡하니.... 이 툴의 도움을 받아봅시다.

eslint는 자료형관련 못잡는 부분이 있다

Math.log(문자)..

NAN이 뜸..

npm i -D typescript 설치

사용법

맨위 주석처리로

// @ts-check

로그는 숫자만 파악하는데 너가 문자를 넣었다 라고 오류 표기 해줌

Type 관련 문제는 TS가 처리했으니 안심하너굴!

포멧팅 - 규칙 지키기

문법형 - eslint

자료형 - typescript

총 세개를 하게 된다면, 협업하는데 덜 피해 끼치게 될 것!

vscode로 여러 폴더를 열면 잘 작동이 안된다는 의미는

생성한 리엑트 폴더앱만 열어줘야 한다.

npx create-react-app "앱이름"

앱 이름 폴더가 생성됬을텐데

이 폴더만 열어줘야한다는 의미!!!

확실히 세팅하고 넘어갑시다

.vscode 는 최상위에 두면 하위 폴더의 모든 코드를 관리 합니다!
기존 .vscode 코드와 .prettierrc / .eslintrc.js 파일을 리액트 폴더 최상위로 옮깁시다!

명령어 치기 귀찮으니, package.json 파일을 만들고 위의 코드를 넣어 주 세요!
npm i 를 쳐서 모듈 인스톨!

//package.json 파일

{
  "devDependencies": {
    "eslint-config-airbnb-base": "^15.0.0",
    "eslint-plugin-prettier": "^4.2.1",
    "typescript": "^4.9.3"
  },
  "dependencies": {
    "prettier": "^2.8.1"
  }
}

.gitingnore 파일 > 노드모듈스 제외

git 캐쉬 제거

기본 eslint 모듈로도 jsx 문법을 문제 없이 처 리 할 수 있도록 .eslintrc.js 코드를 이렇게 변경 합시다!

//eslintrc.js

module.exports = {
  extends: ['airbnb-base'],
  rules: {
  'linebreak-style': 0,
  'no-console': 'off',
  indent: 'off',
  },
  parserOptions: {
  ecmaFeatures: {
  jsx: true,
  },
  ecmaVersion: 'latest',
  sourceType: 'module',
  },
  };

이렇게 해도 eslint 빨간줄 그이고... 프리티어도 먹지 않는 오류가 있었다.

오류 해결

eslint와 prettier의 포멧팅 충돌이라고 한다. ㅡ> eslintrc.js에 indent: 'off' 를 추가한다.

빨간줄은 사라졌다. 근데 프리티어가 안먹힌다..

선생님이 .vscode > settings.json 파일에서

"editor.defaultFormatter": "esbenp.prettier-vscode" 이부분을 다시 치고 저장하니 되었다.. 알쏭달쏭

.git 폴더가 안생기도록 리액트 앱 생성! ㅡ> npx create-react-app projectname --skip-git
이제, 매번 리액트 프로젝트 폴더에 세팅을 하실 필요가 없어졌습니다!

잠깐 이거 프리티어 안먹으면 밑에 추가!

+ .vscode 폴더가 보여야, 프리티어가 먹는다고 합니다.