ESLint 9 버전 eslint.config.js 설정하기 ( .eslintrc.js 오류발생 )

Vue 프로젝트를 시작했는데,

eslint 를 적용하려하니 발생하는 오류에 대한 로그다.

 

 

1. package.json

{
  "name": "webpack-template",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack-dev-server --mode development",
    "build": "webpack --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.24.4",
    "@babel/plugin-transform-runtime": "^7.24.3",
    "@babel/preset-env": "^7.24.4",
    "@vue/compiler-sfc": "^3.4.23",
    "autoprefixer": "^10.4.19",
    "babel-loader": "^9.1.3",
    "copy-webpack-plugin": "^12.0.2",
    "css-loader": "^7.1.1",
    "eslint": "^9.0.0",
    "eslint-plugin-vue": "^9.25.0",
    "file-loader": "^6.2.0",
    "html-webpack-plugin": "^5.6.0",
    "postcss": "^8.4.38",
    "postcss-loader": "^8.1.1",
    "sass": "^1.75.0",
    "sass-loader": "^14.2.1",
    "style-loader": "^4.0.0",
    "vue-loader": "^17.4.2",
    "vue-style-loader": "^4.1.3",
    "webpack": "^5.91.0",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^5.0.4"
  },
  "type": "module",
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ],
  "dependencies": {
    "vue": "^3.4.23"
  }
}

 

2. eslint 패키지 설치

npm i -D eslint eslint-plugin-vue @babel/eslint-parser

 

이 것을 수행하고 1번 package.json에 보이는 것처럼 eslint 가 9.0.0 버전으로 설치가 되었다.

 

3. VS Code

VS Code에서 extensions로 ESLint를 설치했고, 기존에 사용하려던 .eslintrc.js 파일을 읽지 못하여

ESLint 설정파일을 발견할 수 없다는 오류가 발생했다.

 

[Error - 오후 5:40:21] An unexpected error occurred:
[Error - 오후 5:40:21] Error: Could not find config file.
    at locateConfigFileToUse (D:\study\vue-template\node_modules\eslint\lib\eslint\eslint.js:349:21)

 

4. 해결 기록

 

1) 일단 eslint.config.js 를 프로젝트 폴더 루트 경로에 만들었다.

이전과 같은 eslint 설정파일을 못 찾는다는 오류는 사라졌다.

 

2) 아래와 같이 eslint.config.js를 작성한다.

import pluginVue from 'eslint-plugin-vue'
export default [
  // add more generic rulesets here, such as:
  // js.configs.recommended,
  ...pluginVue.configs['flat/recommended'],
  // ...pluginVue.configs['flat/vue2-recommended'], // Use this if you are using Vue.js 2.x.
  {
    rules: {
      // override/add rules settings here, such as:
      // 'vue/no-unused-vars': 'error'
    }
  }
]

 

내가 하고 싶은 일은  eslint-plugin-vue를 이용해서 vue3에 맞는 ruleset을 가져와서 쓰고 싶은 거였다. 아래 공식 도큐먼트 user guide를 참고하였다.

https://eslint.vuejs.org/user-guide/

User Guide | eslint-plugin-vue

 

3) 그랬을때 발생하는 새로운 오류 import 구문을 쓸수 없다.

import pluginVue from 'eslint-plugin-vue'

SyntaxError: Cannot use import statement outside a module
    at internalCompileFunction (node:internal/vm:73:18)
    at wrapSafe (node:internal/modules/cjs/loader:1185:20)
    at Module._compile (node:internal/modules/cjs/loader:1227:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1326:10)
    at Module.load (node:internal/modules/cjs/loader:1126:32)
    at Module._load (node:internal/modules/cjs/loader:967:12)
    at c._load (node:electron/js2c/node_init:2:13672)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:171:29)
    at ModuleJob.run (node:internal/modules/esm/module_job:194:25)

 

그 이유는 package.json에 아래와 같이 추가를 해주어야하기 때문이다.

{

"type": "module",
}

 

 

4) 이렇게 추가한 뒤에도 동일한 오류가 발생한다.

구글링을 해도 아직 마땅한 해결책을 찾지 못했고, 대부분 import 구문을 피하고

module.exports = [

 

Common JS 구문 방식을 사용하는 것으로 임시조치를 취하는 것 같다.

module.exports = {
  extends: [
    // add more generic rulesets here, such as:
    // 'eslint:recommended',
    'plugin:vue/vue3-recommended',
    // 'plugin:vue/recommended' // Use this if you are using Vue.js 2.x.
  ],
  rules: {
    // override/add rules settings here, such as:
    // 'vue/no-unused-vars': 'error'
  }
}

 

하지만 이렇게 CommonJS 구문 방식으로도 아래와 같은 오류가 발생하였다. 이유는 extends 자체가 eslintrc 포맷에서 유효하기 때문이다.

[Error - 오후 5:31:30] An unexpected error occurred:
[Error - 오후 5:31:30] ConfigError: Config (unnamed): Key "extends": This appears to be in eslintrc format rather than flat config format.
    at rethrowConfigError (D:\study\vue-template\node_modules\@humanwhocodes\config-array\api.js:225:8)
    at D:\study\vue-template\node_modules\@humanwhocodes\config-array\api.js:1018:5
    at Array.reduce (<anonymous>)
    at FlatConfigArray.getConfig (D:\study\vue-template\node_modules\@humanwhocodes\config-array\api.js:1014:39)
    at ESLint.calculateConfigForFile (D:\study\vue-template\node_modules\eslint\lib\eslint\eslint.js:1175:24)
    at async ESLint.isPathIgnored (D:\study\vue-template\node_modules\eslint\lib\eslint\eslint.js:1197:24)
    at async ESLint.lintText (D:\study\vue-template\node_modules\eslint\lib\eslint\eslint.js:1034:33)
    at async c:\Users\KBS\.vscode\extensions\dbaeumer.vscode-eslint-2.4.4\server\out\eslintServer.js:1:24954
    at async E (c:\Users\KBS\.vscode\extensions\dbaeumer.vscode-eslint-2.4.4\server\out\eslintServer.js:1:19114)
    at async c:\Users\KBS\.vscode\extensions\dbaeumer.vscode-eslint-2.4.4\server\out\eslintServer.js:1:220290

 

 

5) 그렇다면 결국 eslint.config.js 파일로 오류가 나지 않도록 수정해야하는데, 하루동안의 삽질 결과 찾지 못하였다.

 

여기서 방향은 두가지인데

 

1번. 끝까지 해결한다.

2번. eslint-plugin-vue를 포기한다. (eslint를 쓰지 않는다)

3번. webpack 으로 처음부터 vue 프로젝트를 시작하지 말고, vue-cli로 vue 프로젝트를 만든다음 거기에서 eslint를 추가한다.

 

지금 상황으로는 이것을 계속 시도해보기 보다는 우선 2번으로 남은 실습을 진행하는것이 나을 것 같다.

 

해결되지 못한 vue + webpack + eslint 프로젝트 이슈는 아래 git에 남겨놓았다...

https://github.com/hui3363/vue-template/issues/1#issue-2247605548

TO-DO : ESLint 설정 추가하기 · Issue #1 · hui3363/vue-template