● Nextjs, TypeScript 프로젝트에 ESlint, Stylelint, Prettier, Husky 설정하기 + (Next.js emotion 적용이 어려운 이유)

● Next, TypeScript 프로젝트 생성

npx create-next-app@latest

저는 타입스크립트 적용하고 tailwind는 적용하지 않고 프로젝트를 생성하였습니다. eslint도 적용햇읍니다.

 

● ESLint

npm install --save-dev @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-plugin-simple-import-sort

• @typescript-eslint/eslint-plugin : typescript 코드에 규칙들을 제공하는 플러그인 (recommended)
• @typescript-eslint/parser : eslint가 typescript 코드를 lint 할 수 있도록 typescript estree를 활용하는 eslint parser (린트가 타입스크립트를 모르니까 파싱해주는 것 같아요)
• @eslint-plugin-simple-import-sort :  자동으로 import 구문들을 정렬할 수 있게 도와주는 플러그인

 

● eslintrc.json

{
  "settings": {
    "react": {
      "version": "detect"
    }
  },
  "extends": [
    "next/core-web-vitals",
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:@typescript-eslint/recommended-requiring-type-checking",
    "prettier"
  ],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 12,
    "sourceType": "module",
    "project": "./tsconfig.json"
  },
  "plugins": ["react", "@typescript-eslint", "prettier", "simple-import-sort"],
  "rules": {
    "react/react-in-jsx-scope": "off", // import React from 'react' 안해도 되게 만들어줌.
    "simple-import-sort/imports": "error", // import 구문 순서 엉망이면 에러 냄.
    "simple-import-sort/exports": "error", // export 구문도 순서 엉망이면 에러 냄.
    "@typescript-eslint/no-unused-vars": "error", // 안 쓰는 변수 그대로 두면 에러 냄.
    "@typescript-eslint/no-explicit-any": "error" // any 쓰면 에러 냄.
  }
}

 

일단 위처럼 설정하고 나면, next.config.js에서 파싱에러가 뜨게됩니다.

그럼 루트폴더에서 .eslintignore 파일을 하나 만든 뒤, 파일에 아래 코드를 추가해주세요.

next.config.js

 

● Prettier 설정

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

설치 후, prettier 설정을 해줍니다.

● .prettierrc 설정

{
  "jsxSingleQuote": true,  // jsx에서도 따옴표로 활용되게
  "bracketSameLine": true,
  "bracketSpacing": true,  // { 안녕 } 이런식으로 bracket 스페이싱 들어가게
  "singleQuote": true,  // 쌍따옴표, 따옴표 사용하는거
  "printWidth": 80,
  "tabWidth": 2,  // 탭누르면 spacing이 얼만큼되게 할건지
  "semi": true,  // 세미콜론을 붙이는 것
  "trailingComma": "all",
  "arrowParens": "avoid",
  "endOfLine": "auto"
}

개인적으로 제가 좋아하는 식으로 설정했는데, 원하면 커스텀해서 설정해도 좋슴다.

아래는 prettier 옵션확인하는 공식문서

Prettier · Opinionated Code Formatter

 

 

● Husky  + Lint-Staged 적용하기

공식문서에서는 아래와 같이 설치하기를 권장해하고 있다. (npm 사용시)

아래 명령어 실행 이전에, 먼저 git init 을 해주거나 아니면 디렉토리와 깃레포지토리의 연결을 해줘야한다.

아래와 같이 차례대로 명령어를 실행해준다. (공식문서그대로따왓읍니다)

npm install --save-dev husky lint-staged

npx husky install

npm pkg set scripts.prepare="husky install"

그러면 package.json에 아래와 같이 scripts가 추가되어있을 것이다.

{
  "scripts": {
    "prepare": "husky install" 
  }
}

이후 아래 코드를 추가해준다. (lint-staged)

{
  "scripts": {
    "prepare": "husky install",
    "lint-staged": "lint-staged"
  }
}

다음 루트디렉토리에 만들어진 Husky 폴더에 들어가 pre-commit 파일에 아래와 같이 코드를 입력해준다.

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npm run lint-staged

다음으로는 .lintstagedrc.js 파일을 만들어 다음 코드를 작성해주자

module.exports = {
  // Type check TypeScript files
  '**/*.(ts|tsx)': () => 'npx tsc --noEmit',

  // Lint & Prettify TS and JS files
  '**/*.(ts|tsx)': filenames => {
    return [
      `npx eslint --fix ${filenames.join(' ')}`,
      `npx prettier --write ${filenames.join(' ')}`,
    ];
  },
};

 

그럼 셋팅 끝 !! 머박적!! 꺄악

참고 블로그

Nextjs, TypeScript 프로젝트에 ESlint, Stylelint, Prettier, Husky, Lint-Staged, nvmrc 설정하기

CSS-in-JS에서 Stylelint 사용하기 (feat. emotion, styled-components)

 

● Stylelint를 적용을 못하게 되었다.

위에서 공유된 블로그들을 통해서 emotion을 통해서 stylelint를 적용하려고 했으나, use client를 사용해라.. 뭐 그런 에러메시지를 마주하게 되었었는데요, 아래 길종님의 블로그를 통해서 원인 및 파악점을 알게 되었스빈다.. css-in-js를 런타임에 스타일을 생성하기 때문에 완성본을 만들어서 건네줘야하는 SSR은 좀 복잡하다.. 어느정도 일리가 있는 말이라고 생각합니다.

왜 emotion같은 css-in-js 프레임워크들은 ssr이 힘든걸까?

이외에도 styled-components도 아직 완벽히 지원하고 있지 않다고 하고있어서 next.js측에서는 tailwind 사용을 권장하고 있는 것 같습니다. 또한 제가 생각햇을때는 Next.js + emotion사용 시에, 다른 블로그들을 확인해보니 babel 플러그인을 통해서 컴파일 설정을 해주더라구요. 근데 Next.js 12버전부터는 SWC를 적용하고 있기 때문에, babel 설정이 되지 않아서 그런 점도 있지 않을까..? 라는 생각도 했습니다.

swc 관련해서도 또 블로깅을 해봐야겟네요, 아래는 제가 참고했었던 카카오 기술블로그 입니다.

초보 웹 개발자를 위한 자바스크립트 빌드 툴과 SWC | 카카오엔터테인먼트 FE 기술블로그