Next 사용 시 import 오류 해결(eslint vscode에서 설정하기)

 

* Nuxt, Next, Nest 차이 설명한 글

https://velog.io/@jsleemaster/Nuxt-Next-Nest-%EB%AC%B4%EC%97%87%EC%9D%B4-%EB%8B%A4%EB%A5%B8%EA%B0%80

Nuxt, Next, Nest? 무엇이 다른가

▶ Nuxt – 범용 렌더링을 지원하는 Vue 애플리케이션을 만드는 프레임워크

▶ Next – 범용 렌더링을 지원하는 React 애플리케이션을 만드는 프레임워크

▶ Nest – 추가 구조 및 지원을 갖춘 노드 애플리케이션 개발을 위한 프레임워크

 

 

* 상황

- Next 설정 중 eslint 설치 중 AppLayout.js에서 import 에러 발생

- vscode eslint 설치 참고 

- 출처글의 경우 setting.json 이후에 .eslintrc에서 다시 수정하나 수정하지 않아도 문제는 없었음

 

https://steadyzest.tistory.com/20

VSCode ESlint 설정

AppLayout.js에서 에러남

 

 

1. package.json에 설치된 eslint

//devDependencies에 설치하기 위해선 npm i -D를 붙일 것
//npm i -D eslint
//npm i -D eslint-plugin-import
//npm i -D eslint-plugin-react
//npm i -D eslint-plugin-react-hooks

"devDependencies": {
    "eslint": "^8.24.0",
    "eslint-plugin-import": "^2.26.0",
    "eslint-plugin-react": "^7.31.8",
    "eslint-plugin-react-hooks": "^4.6.0"
  }

 

 

2. .eslintrc 파일 생성

{
    "parserOptions": {
        "ecmaVersion": 2020,
        "sourceType": "module",
        "ecmaFeatures": {
            "jsx": true
        },
        "env": {
            "browser": true,
            "node": true,
            "es6": true
        },
        "extends": [
            "eslint:recommended",
            "plugin:react/recommended"
        ],
        "plugins": [
            "import",
            "react-hooks"
        ],
        
    }
}

 

 

3. F1 눌러 "기본설정:사용자 설정 열기"

▶ 검색창에 setting 입력

▶ setting.json에서 편집 클릭(노랑색 표시)

 

 

4. setting.json에서 아래 코드 입력

"eslint.validate": [
  {"language": "javascript"},
  {"language": "html"},
],