EsLint 적용 불가 문의드립니다.

Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"

작성

1.1K

안녕하세요 강의 보고 실습 중, ESLint가 정상 작동하지 않는 것으로 보여

문의 드립니다.

현재 상황 (버전)

npm Version : 9.6.4

Vue Version : 3.2.47

VsCode Version : 1.77.3

설치된 확장 플러그인

Auto Rename Tag
CSS Peek
ESLint
HTML CSS Support
HTML to CSS autocompletion
indent-rainbow
Korean Language Pack For visual Studio Code
Vue Language Features (Volar)
Vue VSCode Snippets

플러그인 충돌이 발생 할 수 있어, 기존 VS Code 전체 초기화 후 재 설치 하였습니다.

강의에 나온 내용으로 .eslintrc.cjs 수정 및 Eslint.validate도 변경하였으며,

오타가 있을 수 있어서 노션에 있는 코드를 그대로 복사 붙여 넣기 하였습니다.

Format on save 도 체크 해제 되어 있습니다.

현재 문제점이라고 생각하는 부분은

npm run lint 커맨드 실행 시

PS > npm run lint

> learn@0.0.0 lint

> eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore

Oops! Something went wrong! :(

ESLint: 8.39.0

ReferenceError: Cannot read config file: \.eslintrc.cjs

Error: OfflineAudioCompletionEvent is not defined

at Object.<anonymous> (\.eslintrc.cjs:15:70)

at Module._compile (node:internal/modules/cjs/loader:1254:14)

at Module._extensions..js (node:internal/modules/cjs/loader:1308:10)

at Module.load (node:internal/modules/cjs/loader:1117:32)

at Module._load (node:internal/modules/cjs/loader:958:12)

at Module.require (node:internal/modules/cjs/loader:1141:19)

at module.exports [as default] (node_modules\import-fresh\index.js:32:59)

at loadJSConfigFile (\node_modules\@eslint\eslintrc\dist\eslintrc.cjs:2562:47)

at loadConfigFile (\node_modules\@eslint\eslintrc\dist\eslintrc.cjs:2646:20)

at ConfigArrayFactory.loadInDirectory (\node_modules\@eslint\eslintrc\dist\eslintrc.cjs:2856:34)

에러가 출력 됩니다.

구글 검색하여 npm install eslint 등 추가로 모듈을 설치 하였으나, 실행이 되지 않습니다.

이 이외에는 사실상 Error Line, Warn Line 등 소스 코드에 노란 줄이나 붉은 줄은 나오지 않아

사용에는 큰 불편함은 없으나, 자동 줄 정렬이 되지 않아 소스가 상당히 지저분하며, 복습 시 소스 분석에 어려움을 겪고 있어 질문 드립니다.

항상 좋은 강의 감사드립니다.

요약

npm run lint 커맨드 사용 불가
소스 자체에 붉은 색, 노란 색 줄은 생기지 않으나 코드가 자동 정렬 되지 않음

입니다.

vue.js eslint

답변 1

짐코딩

지식공유자

안녕하세요 :)

[프로젝트 구성] 해당 회차 강의를 그대로 따라 하신거죠?
package.json 파일을 보여주실 수 있으세요?

푸른하늘

질문자

빠른 답변 감사드립니다 ! 오전에 제가 회사에 있었어서 ㅠ 답변이 늦었습니다.
packge.json

{
  "name": "learn",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore",
    "format": "prettier --write src/"
  },
  "dependencies": {
    "bootstrap": "^5.2.3",
    "vue": "^3.2.47"
  },
  "devDependencies": {
    "@rushstack/eslint-patch": "^1.2.0",
    "@vitejs/plugin-vue": "^4.0.0",
    "@vue/eslint-config-prettier": "^7.1.0",
    "eslint": "^8.39.0",
    "eslint-plugin-vue": "^9.9.0",
    "prettier": "^2.8.4",
    "vite": "^4.1.4"
  },
  "description": "This template should help get you started developing with Vue 3 in Vite.",
  "main": "vite.config.js",
  "keywords": [],
  "author": "",
  "license": "ISC"
}

입니다 !

부가적으로 현재 지하철에서 기초편 집에서 실전편을 하고 있는데, 실전편에서는 ESLint가 정상 작동합니다

짐코딩

지식공유자

패키지 설치는 문제가 없어 보이는데요 ^^
기본편과 실전편 Workspace Settings (.vscode/settings.json)를 비교해 보시겠어요?

인프런 커뮤니티 질문&답변

EsLint 적용 불가 문의드립니다.