01-3. Create Next.js app (ESLint)

ESLint 설치

ESLint라고 하는 것... 짜증 그 자체이다.

나혼자 나만의 프로젝트를 코딩할 때는 절대 설치하지 않는다.

하지만 ESLint보다 더 참을 수 없는 것은 여러 명이 한 프로젝트를 같이 코딩할 때 일어나는 다양한 일들이다.

그래서 이런 불편함을 감수하고 ESLint의 적용하는지도 모른다.

 

문제는 인터넷 강의에도 잘 나와있지 않고, 공식 문서에 설명도 제대로 안 되어있다.

그러나 분명한 것은 아직까지는 팀 프로젝트에서 가장 많이 쓰이므로 핵심적인 것은 확실히 알고 넘어가야한다.

 

참조: https://nextjs.org/docs/pages/building-your-application/configuring/eslint  

Next.js는 바로 사용할 수 있는 통합 ESLint 환경을 제공한다고 하니 공식문서를 참조해본다.

package.json에 다음 한 줄 추가

"scripts": {
 	...
 	"lint": "next lint --no-cache"
},

그리고 pnpm run lint를 실행하면

$ pnpm run lint
? How would you like to configure ESLint? https://nextjs.org/docs/basic-features/eslint
❯  Strict (recommended)
   Base
   Cancel

 

엔터치고나면 package.json에 보면 자동으로 다음 두 패키지가 설치된 것을 볼 수 있다. (이것 외에 변경된 사항은 없다 - 버그 같음)

"devDependencies": {
	...
	"eslint": "8.48.0",
	"eslint-config-next": "13.4.19",

이제 터미널에서 다음을 실행한다.

$ npx eslint --init

질문들이 줄줄이 나오는데 다음처럼 선택하자.

 

You can also run this command directly using 'npm init @eslint/config'.
? How would you like to use ESLint? … 
  To check syntax only
  To check syntax and find problems
❯ To check syntax, find problems, and enforce code style

? What type of modules does your project use? … 
❯ JavaScript modules (import/export)
  CommonJS (require/exports)
  None of these

? Which framework does your project use? … 
❯ React
  Vue.js
  None of these

? Does your project use TypeScript? No / Yes

? Where does your code run? …  (Press <space> to select, <a> to toggle all, <i> to invert selection)
> Browser
   Node

? How would you like to define a style for your project? … 
❯ Use a popular style guide
  Answer questions about your style

? Which style guide do you want to follow? … 
❯ Standard: https://github.com/standard/eslint-config-standard-with-typescript
  XO: https://github.com/xojs/eslint-config-xo-typescript

? What format do you want your config file to be in? … 
  JavaScript
  YAML
❯ JSON

Checking peerDependencies of eslint-config-standard-with-typescript@latest
Local ESLint installation not found.
The config that you've selected requires the following dependencies:

eslint-plugin-react@latest eslint-config-standard-with-typescript@latest @typescript-eslint/eslint-plugin@^6.4.0 eslint@^8.0.1 eslint-plugin-import@^2.25.2 eslint-plugin-n@^15.0.0 || ^16.0.0  eslint-plugin-promise@^6.0.0 typescript@*
? Would you like to install them now? › No / Yes

마지막 질문에 무조건 No 를 택한다. Yes를 누르면 쓸데없는 것을 엄청나게 많이 깐다. 

---

사실... 글 처음부터 여기까지를 요약하면 (위에 글 다 무시하고)

1. root에 .eslintrc.json이라는 empty 파일을 생성하고,

2. 다음처럼 eslint와 eslint-config-next 설치,

$ pnpm add eslint eslint-config-next

3. package.json에 "lint" 한 줄 추가.

"scripts": {
 	...
 	"lint": "next lint --no-cache"
},

이렇게 3가지만 해주면 된다. 

길게 돌려서 쓴 이유는 공식문서가 얼마나 이상해서 삽질했는지를 보여주기 위함이고, 나 혼자만 삽질할 수 할 수 없다는 억울함...)

 

여기서부터는 ESLint를 본격적으로 설치해보자.

 

우선 필요한 패키지 다음을 설치한다.

$ pnpm add --save-dev @next/eslint-plugin-next @typescript-eslint/eslint-plugin eslint-plugin-react

처음부터 이 글을 따라왔다면 현재 .eslintrc.json이 다음과 같이 되어있을텐데

{
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "standard-with-typescript",
        "plugin:react/recommended"
    ],
    "parserOptions": {
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "plugins": [
        "react"
    ],
    "rules": {
    }
}

 

싹 다 지우고 다음 코드로 대체하자. (왜냐하면 위에 extends: 에 있는 2개가 좀 이상한 게 많다.)

{
  "env": {
    "browser": true,
    "node": true,
    "es2021": true
  },
  "extends": [
    "next/core-web-vitals", 
    "plugin:@next/next/recommended"
  ],
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module",
    "project": "./tsconfig.json" // tell ESLint where to find our typescript config
  },
  "plugins": ["react", "@typescript-eslint"],
  "rules": {}
}

간혹가다가 여기서 parser option error가 나는 경우가 있는데

tsconfig.json에 "include"부분에 다음을 추가해준다.

  "include": [
    ".eslintrc.json",

 

Airbnb ESLint

사실 여태까지의 위 작업들은 본래 목적인 Airbnb ESLint를 설치하기 위한 warm-up 작업이었다.

이제 본격적으로 Airbnb ESLint를 설치해보자.

Airbnb가 좋은 것은 예전 ES6부터 없앤 var 라는 것도 못 쓰게 막아준다.

참조한 페이지 : https://www.npmjs.com/package/eslint-config-airbnb 

위 페이지대로 npm을 쓰면 너무 느리다.

다음 명령어로 설치

pnpm add --save-dev eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react-hooks eslint-config-airbnb

Typescript을 위한 ESLint는 또 따로 있다.

참조한 페이지 : https://www.npmjs.com/package/eslint-config-airbnb-typescript

이것도 위 페이지말고 pnpm으로 다음과 같이 설치해준다.

pnpm add --save-dev eslint-config-airbnb-typescript @typescript-eslint/parser

이제 .eslintrc.json 파일로 가서 다음 3개를 추가해준다.

{
  "extends": [
  	...
    "airbnb", 
    "airbnb-typescript",  
    "airbnb/hooks"
    ],

위를 추가해주고 저장해주는 순간, 이제 기존 파일들에 빨간줄이 좍좍 가있을 것이다.

만약 빨간줄이 없다면 VS code에서

- Windows는 Ctrl + Shift + P

- Mac은 Cmd + Shift + P

를 누르고 'ESLint'를 검색하여 

Restart ESLint Server를 선택하면 보인다.

 

이제 터미널에서 

$ pnpm run lint

를 실행하면

많은 에러가 보인다.

직접 코드로 가서 빨간줄에 mouse hover를 하면 어떤 것에서 에러가 났는지 보여준다.

문법으로 문제가 없는 arrow function을 사용했는데 ESLint에서 싫어하나보다.

개인적으로는 javascript에서 this 의 문제점을 해결하는 가장 좋은 방법이 arrow function인데 이걸 못 쓰게 하는 것을 rule에서 제외를 하고 싶다.

위 에러 메세지에서 파란색 글씨, 즉, arrow-body-style을 .eslintrc.json에서 'off' 혹은 '0'으로 놓으면 없어진다.

(0은 예외시키는 것, 1로 놓으면 warning만 해달라는 옵션)

즉, .eslintrc.json에서

  "rules": {
    "arrow-body-style": 0
  }

 

이렇게 코딩을 하면서 하나씩 하나씩 추가해주면 된다.

우선은 다음 항목 정도를 더 추가해준다.

  "rules": {
	"arrow-body-style": 0,
    "@typescript-eslint/prefer-nullish-coalescing": "off",
    "@typescript-eslint/strict-boolean-expressions": "off",
    "react/function-component-definition": "off",
    "@typescript-eslint/explicit-function-return-type": "off",
    "@typescript-eslint/triple-slash-reference": "off",
    "react/react-in-jsx-scope": "off", // React 17부터 import 안 해도 되서 끔
    "jsx-quotes": ["error", "prefer-double"],
    "react/jsx-props-no-spreading": "off",
    "react/require-default-props": "off",
    "no-useless-catch": "off" // 불필요한 catch 못쓰게 하는 기능 끔
  }

 

Prettier

VS code에서 extension 2가지를 설치한다.

하나는 Prettier

또 하나는 ESLint

그리고 Prettier와 ESLint 충돌방지용 패키지를 설치해준다.

$ pnpm add prettier eslint-config-prettier eslint-plugin-prettier --save-dev

그리고 이미 있는 .eslintrc.json 파일에 다음 항목들을 추가해준다.

"extends": [
	"prettier"
],
"plugins": [
	"prettier"
]
"rules": {
	"prettier/prettier": [
		"error",
		{
			"endOfLine": "off"
		}
	]
}

 

주의: 항상 prettier 철자 주의. → t를 한 개 빼먹거나 ie 위치 바꿔서 오타시 원인 못 찾고 한참 고생함.

 

코드를 보면 여전히 빨간줄이 있다.

원인을 보면 Prettier는 double quote, ESLint는 single quote를 선호해서 그렇다.

Airbnb ESLint 스타일인 single quote로 Prettier를 수정해줄 필요가 있다.

root directory에 .prettierrc 를 생성한다. (철자 주의)

"singleQuote": true 이외에도 다음 사항들도 같이해서 복사/붙이기 해준다.

{
  "printWidth": 80,
  "trailingComma": "all",
  "singleQuote": true,
  "tabWidth": 2,
  "semi": true,
  "jsxSingleQuote": false,
  "quoteProps": "as-needed",
  "bracketSpacing": true,
  "arrowParens": "avoid"
}

이제 빨간줄이 없어졌을 것이다. 남아있다면 다시 Cmd(Ctrl) + Shift + P로 ESLint 서버를 restart 해준다.

 

semi-colon을 안 썼다던지, double quote를 썼다던지 하는 자잘한 것은 자동 수정 기능으로 고치는 게 가능하다.

터미널에서

$ pnpm lint --fix

를 하면 된다.

그리고 모든 ESLint에 문제가 없는지 확인하기 위해서는

$ pnpm run lint

이제 에러가 없어졌을 것이다.

혹시를 위해 .eslintrc.json 파일 전체를 여기 다시 쓴다.

{
  "env": {
    "browser": true,
    "node": true,
    "es2021": true
  },
  "extends": [
    "prettier", // eslint-config-prettier prettier와 중복된 eslint 규칙 제거
    "next/core-web-vitals",
    "plugin:@next/next/recommended",
    "plugin:prettier/recommended", // eslint의 포매팅을 prettier로 사용.
    "airbnb",
    "airbnb/hooks",
    "airbnb-typescript"
  ],
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module",
    "project": "./tsconfig.json" // tell ESLint where to find our typescript config
  },
  "plugins": ["react", "@typescript-eslint", "prettier"],
  "rules": {
    "prettier/prettier": [
      "error",
      {
        "endOfLine": "auto"
      }
    ],
    "arrow-body-style": 0,
    "@typescript-eslint/prefer-nullish-coalescing": "off",
    "@typescript-eslint/strict-boolean-expressions": "off",
    "@typescript-eslint/explicit-function-return-type": "off",
    "@typescript-eslint/triple-slash-reference": "off",
    "react/react-in-jsx-scope": "off", // React 17부터 import 안 해도 되서 끔
    "jsx-quotes": ["error", "prefer-double"],
    "react/jsx-props-no-spreading": "off",
    "react/require-default-props": "off",
    "no-useless-catch": "off", // 불필요한 catch 못쓰게 하는 기능 끔
    "react/function-component-definition": "off"
  }
}

 

ESLint 테스트 해보기

app/page.tsx에 다음 코드를 추가해본다.

const Home = () => {
  var a = 1;   // const a = 1;이 ES6 이후
  const item = new Object();   // const item = {}; 이 더 간소화된 읽기편한 코드

빨간줄이 그어져 있을 것이다.

이제 .eslintrc.json에서 airbnb 관련 3개를 주석처리하고 저장해보자

다시 app/page.tsx로 오면 빨간줄이 사라졌을 것이다.

즉, airbnb ESLint는 옛날 코딩 방식인 var도 허용하지 않는다. (아주 좋아)

다시 airbnb 주석 해제시켜놓는다.

 

Husky 설치

코딩하다보면 ESLint에서 빨간줄 긋는 것이 짜증나다보니,

pnpm run lint를 실행하지 않고 그냥 그대로 git commit 하는 프로그래머들이 생긴다.

그들에게 족쇄를 채우는 도구가 있으니 그것이 바로 Husky이다.

요약하면 ESLint 전부 통과하지 않으면 아예 git commit 가 안 되게 하는 것이다.

우선 테스트를 위해 git init을 아직 하지 않았다면 

$ git init

을 한다.

mrm이란, 오픈소스 프로젝트의 환경 설정을 동기화 하기 위한 도구이다. mrm을 이용하면 lint-staged와 husky를 간편하게 설정해줄 수 있다. 다음을 터미널에서 실행

$ npx mrm lint-staged

위 명령어를 실행하면 .husky 폴더가 자동으로 생기고, package.json 파일에 다음 코드가 추가된다.

{
  "scripts": {
    "prepare": "husky install"
  },
  "devDependencies": {
		"husky": ">=7",
    "lint-staged": ">=10",
  },
  "lint-staged": {
    "*.js": "eslint --cache --fix"
  }
}

위의 lint-stage부분은 typescript를 이용할 것이므로 다음과 같이 수정한다.

  "lint-staged": {
    "*.js": "eslint --cache --fix",
    "*.{ts,tsx}": [
      "prettier --write",
      "eslint --fix"
    ]
  }

이제 코드에 syntax 에러를 의도적으로 넣고

$ git add .
$ git commit -m '1st'

하게 되면 에러가 뜨면서 commit이 안 되게 한다.

 

저장 시 자동 fix 설정

물론 Prettier에 단축 키 설정해줄 수도 있지만

파일 저장할 때마다 자동 ESLint fix가 되게 설정해준다.

VS code메뉴에서 > 기본설정 > 설정 > settings.json을 찾아서 편집

다음 코드를 끝에 추가해준다.

// ESLint
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  },
  "eslint.validate": ["javascript", "typescript"]

 

여기까지해서 ESLint 설정이 끝났다.