-
카테고리
-
세부 분야
프론트엔드
-
해결 여부
미해결
EsLint 적용 불가 문의드립니다.
23.04.23 14:18 작성 조회수 895
0
안녕하세요 강의 보고 실습 중, 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 커맨드 사용 불가
소스 자체에 붉은 색, 노란 색 줄은 생기지 않으나 코드가 자동 정렬 되지 않음
입니다.
답변을 작성해보세요.
1
푸른하늘
질문자2023.04.24
빠른 답변 감사드립니다 ! 오전에 제가 회사에 있었어서 ㅠ 답변이 늦었습니다.
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가 정상 작동합니다
짐코딩
지식공유자2023.04.25
패키지 설치는 문제가 없어 보이는데요 ^^
기본편과 실전편 Workspace Settings (.vscode/settings.json
)를 비교해 보시겠어요?
답변 1