[NextJs] 2. create-next-app 에 Eslint & prettier적용하기

개발 tool은 vsocde로 사용을합니다. 개발을 할때 eslint와 &  prettier 적용을 안하면 정말 많이 불편합니다. 설정을 제대로 하면 개발 시간이 2배이상 증가 할 거라고 생각될 만큼 저한테는 정말 중요한 설정입니다. 

 

1. yarn add  해주세요 . (제가 사용하는 것들입니다.)

yarn add --dev eslint eslint-config-prettier eslint-plugin-import eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-hooks prettier @typescript-eslint/eslint-plugin @typescript-eslint/parser

 

2. 로컬에 .eslintrc 파일을 추가합니다.

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "baseUrl": ".",
    "paths": {
    "@src/*": ["./src/*"]
  }
},
  "exclude": ["node_modules"],
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"]
}

 

3. 로컬에 .prettierrc파일을 추가합니다. 

{
  "singleQuote": false,
  "semi": true,
  "useTabs": true,
  "tabWidth": 2,
  "trailingComma": "all",
  "printWidth": 80
}

 

모두 적용을 하고 /pages/_app.tsx 파일을 보시면 아래 이미지와 같이 빨간줄이 생성되어있습니다. 

 

해당 파일을 저장 하시면 

 

 

적용완료입니다.