ESLint 설치하기

ESLint 공식 홈페이지
❗️next.js는 package.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

위의 규칙들은 각 프로젝트의 상황마다 다르게 설정할 수 있습니다.
설치가 완료되면, eslint.js 파일이 생성된 것을 볼 수 있습니다.
설치가 완료되면 vscode를 종료 후 다시 켜주면 됩니다.

ESLint

추가로 VScode 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 연결하기

eslint-config-prettier 설치

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

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

ESLint와 같이 사용하는 방법

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

VSCode Prettier Extension 설치하기

ESLint 규칙 정하기

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

// 필요없는 규칙은 여기서 off
rules: {
  'react/react-in-jsx-scope': 'off',
  'react/prop-types': 'off',
}