Portfolio


npx create-next-app@latest # ts, eslint - yes


npm install --save-dev @typescript-eslint/eslint-plugin


{
  "plugins": ["@typescript-eslint"],
  "extends": [
    "next/core-web-vitals",
    "plugin:@typescript-eslint/recommended",
  ],
  "rules": {
    "@typescript-eslint/no-unused-vars": [
      "warn",
      {
        "varsIgnorePattern": "^_",
        "args": "all",
        "argsIgnorePattern": "^_",
        "caughtErrors": "all"
      }
    ]
  }
}


{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}


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


{
  "semi": true,
  "trailingComma": "all",
  "singleQuote": true,
  "tabWidth": 2,
  "printWidth": 120,
  "endOfLine": "lf"
}


{
	...,
	"extends": [
    "next/core-web-vitals",
    "plugin:@typescript-eslint/recommended",
    "prettier" // 가장 마지막에 추가
  ],
}


{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
	// 아래 두 줄 추가
  "editor.formatOnSave": true, // Tell VSCode to format files on save
  "editor.defaultFormatter": "esbenp.prettier-vscode" // Tell VSCode to use Prettier as default file formatter
}


npm install --save-dev lint-staged


{
	...,
	"lint-staged": { 	// 추가
    "**/*.{js,jsx,ts,tsx}": [
      "eslint --fix",
      "prettier --write"
    ]
  }
}


npx lint-staged


npm install --save-dev husky


npx husky install


{
	...,
	"scripts": {
    "prepare": "husky install" // 추가
  },
	...
}


npx husky add .husky/pre-commit "npx lint-staged"


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

npx lint-staged


npm install --save @emotion/react @emotion/styled


npm install react-query

뽀모 프로젝트 초기 세팅 과정목차

📝 목차

🍅 사용 기술

🔥 설정 과정

next.js

eslint

prettier

lint-staged

husky

Emotion

React Query