Next.js+Typescript+eslint(air-bnb style guide)+prettier 세팅

Next.js 프레임워크 기반에서 환경세팅 하기 위한 방법을 기재해본다. 

 

일단 Nextjs 를 설치한다.

 

설치하기 전 공홈에서 system requirement를 확인한다. 

 

(https://nextjs.org/docs/getting-started/installation )

 

그리고 

npx create-next-app@latest

 

입력하여 nextjs를 깐다 ( 설치 시 조건은 아래와 같이 진행 )

 

TypeScript, Eslint는 사용하기 때문에 무조건 Yes 하고 나머지는 사용자 기호에 맞게 사용하면 될 듯 싶다. 

 

자 이제 air-bnb lint 규칙을 적용하여 코드를 짜고 싶기 때문에 

 

1. eslint-config-airbnb 와 관련 dependency

2. eslint-config-airbnb-typescript 와 관련 dependency ( 타입스크립트 안 쓸시 사용안해도 될 것으로 보임 )

 

둘다 설치하면 된다. 

 

1. eslint-config-airbnb 와 관련 dependency 를 한번에 깔기 위해 나는 

npx install-peerdeps --dev eslint-config-airbnb

 

를 입력하였다. ( 위 명령이 잘 먹히지 않는다면 직접 관련 deppendency를 일일히 install 해야 한다. )

 

해당 command 입력 후 확인결과 

eslint-config-aribnb

eslint-plugin-import

eslint-plugin-jsx-a11y

eslint-plugin-react-hooks

eslint-plugin-react 

가 깔림을 확인 할 수 있다. 

 

2. eslint-config-airbnb-typescript 와 관련 dependency를 깔려고 https://www.npmjs.com/package/eslint-config-airbnb-typescript 를 확인 결과 아래와 같은 명령어를 입력했다.

npm install eslint-config-airbnb-typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser --save-dev

 

위 명령어를 입력 시 

 

eslint-config-airbnb-typescript

@typescript-eslint/eslint-plugin

@typescript-eslint/parser 

가 깔림을 확인 할 수 있다.

 

그 후 eslint config file의 extends에 우리가 설치한 'airbnb'와 'airbnb-typescript'를 추가하면 된다.

그리고 동시에 parseOptions을 추가하고 ./tsconfig.json을 바라 보도록 지정한다. 

그 결과 아래와 같이 작성했다. 여기서 parserOption이란 lint가 우리가 적은 코드를 parsing 해서 옳고/그름을 파악 할때의 옵션이라고 생각하면 된다. 그 옵션들이 적힌 파일이 ./tsconfig.json이란 뜻으로 보인다.

{
    "extends": ["airbnb", "airbnb-typescript", "next/core-web-vitals", "next/typescript"],
    "parserOptions": {
        "project": "./tsconfig.json"
    }
}

 

자 이제 프리티어를 깔아보자 

https://prettier.io/docs/en/install

Prettier · Opinionated Code Formatter

위 공홈을 기반으로 작성한다.

 

npm install --save-dev --save-exact prettier

 

 

를 입력하여 prettier를 설치한다. 그리고 root directory 위치에 .prettierrc 라는 file을 생성한다. 이 file이 prettier의 config file이다.

 

prettier config는 기호에 맞게 작성하면 된다. 그리고 vscode에서 prettier config 파일을 인식하지 못하면 vscode에서 아래 값을 체크 해주면 된다.

 

다음으로 우리는 eslint를 쓰고 있으므로 prettier와 eslint가 충돌하지 않도록 하는 eslint-config-prettier를 설치해야 한다.

 

npm install --save-dev eslint-config-prettier​

 

를 통해 설치하자 그리고 https://github.com/prettier/eslint-config-prettier#installation 에서 안내하는 대로 eslintrc.jon의 extends의 맨 마지막에 "prettier"를 추가한다.  

 

이제 prettier 까지 설치가 완료 됐다.