Portfolio

생성 npx create-next-app@latest --typescript

개발모드실행: npm run dev
eslint default로 가짐, lint 검사: npx eslint .

저장했을 때 eslint 오류 자동 수정, 저장시 포매팅, prettier를 default로 사용: .vscode/settings.json


// .vscode/settings.json
// 기존 local의 vscode 설정과 겹친다면 이게 덮어씀
{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
	"editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

eslint 패키지 추가 설치: npm i -D @typescript-eslint/eslint-plugin


//.eslintrc.json
{
  "plugins": ["@typescript-eslint"],
  "extends": ["next/core-web-vitals", "plugin:@typescript-eslint/recommended"]
  // 후에 필요에 따라 덮어쓸 게 있다면 rules 추가하면 됨
	// "rules": {
  //   "prefer-const": "off"
  // }
}

prettier 설치: npm i -D prettier eslint-config-prettier

prettier는 .prettierrc 위한 패키지, eslint-config-prettier는 eslint랑 충돌 방지 패키지


// .prettierrc.json
{
  "semi": false,
  "trailingComma": "none", // 맨끝 콤마
  "singleQuote": true,
  "tabWidth": 2,
  "useTabs": false,
  "printWidth": 80,
	"bracketSpacing": true,
  "endOfLine": "lf"
}


// .eslintrc.json
{
  "plugins": ["@typescript-eslint"],
  "extends": [
    "next/core-web-vitals", // next 기본 rule set, https://nextjs.org/docs/basic-features/eslint#core-web-vitals
		"eslint:recommended",    
		"plugin:@typescript-eslint/recommended",
    "prettier" // prettier를 가장 마지막에 추가
  ]
}

.prettierignore: prettier 설정 제외


.next
.cache
package-lock.json
public
node_modules
next-env.d.ts
next.config.ts
yarn.lock

parser: 기본 parser인 espree 대신 사용하는 parser, typescript 구문을 분석

npm i --save-dev typescript @typescript-eslint/parser
https://www.npmjs.com/package/@typescript-eslint/parser
https://eslint.org/docs/latest/user-guide/configuring/plugins


// .eslintrc.json
{
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": 2022, // 최신 문법 지원
    "sourceType": "module", // 모듈 시스템 사용시
    "ecmaFeatures": {
      "jsx": true // react jsx parsing
    }
  },
	"plugins": ["@typescript-eslint"],
  "extends": [
    "next/core-web-vitals",
		"eslint:recommended"
    "plugin:@typescript-eslint/recommended",
    "prettier"
  ]
}

husky: commit을 실수로 하지 않게 방지(위 설정에 어긋나는데 커밋 시도했을 때 에러)

npm i -D husky, npx husky install
git hook 추가 예시: npx husky add .husky/pre-commit "npx tsc --noEmit && npx eslint . && npx prettier --write .”

git hook? 여기서는 commit이 일어나기 전에 실행되는 스크립트

lint-staged: staged된 애들에게 linter 실행, npx lint-staged하면 불필요한 거 지워지고 잘못된 부분 검사


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

  // Lint then format TypeScript and JavaScript files
  '**/*.(ts|tsx|js)': (filenames) => [
    `npx eslint --fix ${filenames.join(' ')}`,
  ],

  // Format MarkDown and JSON
  '**/*.(md|json)': (filenames) =>
    `npx prettier --write ${filenames.join(' ')}`,
}

husky가 pre-commit 시에 lint-staged를 하도록 수정


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

npx lint-staged

전체적인 참고: https://paulintrognon.fr/blog/typescript-prettier-eslint-next-js

프로젝트 초기 세팅