코드의 규칙 정하기

우리는 협업시에 팀단위로 코딩을 하게 됩니다. 따라서 각자의 코드 스타일이 다르게 됩니다.

이렇게 다양한 사람들고 협업을 하게 되면서 일정한 규칙을 정하게 되면, 일이 조금 더 수월하게 진행이 가능합니다.

코드린터와 코드 포멧터

• 코드 린터 는 문법에서 에러는 아니지만 에러로 약속하자고 규칙을 정하는 것 입니다.

에러는 아니라 규칙에 어긋나는가를 검사하기 때문에 vscode에서 빨간 줄이 그여도 실행하는데는 아무 문제가 없습니다.

**코드린터 : eslint**

eslint 의 규칙으로는 import 순서, ==금지 등이 있을 수 있습니다. 또한 eslint자체에 포메터 기능도 어느정도 가지고 있습니다.

• 코드 포메터는 코드를 보기 좋게 만들어주는 것 입니다.

**코드 포메터 : prettier**

prettier의 규칙으로는 띄어쓰기 2칸,-길이 넘으면 줄바꿈 하기 등이 있습니다.

---

eslint / prettier 설치하기

eslint 설치하기

eslint 설치 링크

next.js는 packge.json에 들어가 보시면 eslint가 이미 설치되어있는 것을 보실 수 있습니다.

eslint 설정 파일을 만들기 위한 실행 명령어 입니다. 사용하시는 패키지 매니저에 맞게 사용하시면 됩니다.

npx eslint --init
yarn run eslint --init

설정파일을 만들고 나면 몇가지 질문이 있습니다. 키보드를 이용해 움직여 선택합니다.

How would you like to use ESlint ? => syntax, problems, style

Waht type of modiles does your project use? => Javascript modules (import/export)

Which framework does your project use? => react

Does your project use TypeScript? => Yes

Where does your code run? => Browser

How would you like to define a style for your project? => Use a popular style guide

Which style guide do you want to follow? => standard

What format do you want your config file to be in? => Javascript
Checking...
...
Would you like to install them now with npm? => yes

위의 규칙들은 각 프로젝트의 상황마다 다르게 설정할 수 있습니다. 우리는 지금 Codecamp에 맞추고 있습니다.

앞으로 여러분들이 하는 프로젝트, 회사마다 설정이 다를 수 있습니다.

설치가 완료되면, eslint.js 파일이 생성된 것을 보실 수 있습니다.

또한, 설치가 완료되시면 vscode를 종료 후 다시 켜주시길 바랍니다.

ESLint Extention 설치

추가로 VS code extension에서 ESLint를 설치해주세요

ESLint 오류 확인하기

아래 명령어를 사용하면 여러분들의 모든 파일을 eslint가 검사하여 어떤 부분이 잘못된 부분이 있는지 체크해줍니다.

// 모든 파일을 보여주라는 뜻입니다.
npx eslint .

//. 이 안될경우 아래 코드를 입력해보세요
// ""안의 형태로 끝나는 파일을 말합니다.
npx eslint "**/*.js" 

prettier 설치

prettier 설치 링크

prettier 설치 명령어 입니다.

yarn add --dev --exact prettier

아래의 명령어로 .prettierrc.json 설정파일을 생성합니다.

혹은 + 버튼을 눌러서 직접 파일을 만들어주셔도 됩니다.

echo {}> .prettierrc.json

만들게 되시면 prettierrc.json파일에 비어있는 객체를 보실 수 있습니다.

ESLint와 Prettier 연결

exlint-config-prettier 설치 링크

각 패키지 매니저에 따라 아래의 명령어로 eslint-config-prettier를 설치합니다.

npm install --save-dev eslint-config-prettier
yarn add eslint-config-prettier --dev

eslint와 같이 사용하는 방법

.eslintrc.js 파일 안에서 "extends" 배열에 "prettier"를 추가해줍니다.

{
  "extends": [
    "plugin:react/recommended", 
		"standard",
    "prettier"
  ]
}

VSCode Prettier Extention 설치

ESLint 규칙 정하기

Next JS에서는 리액트를 따로 import 하지 않아도 사용할 수 있기 때문에 .eslintrc.js 파일에 규칙을 추가해줍니다. 또한 타입스크립트를 사용하고 있기 때문에 prop-types 규칙도 사용하지 않도록 규칙을 추가해줍니다.

// 필요없는 규칙은 off해서 꺼주세요
rules: {
    'react/react-in-jsx-scope': 'off',
		'react/prop-types': 'off'
 }