[Vue] ESLint에서 TypeScript 코드 문법 인식되지 않는 경우

VSCode에서 Vue 프로젝트에 ESLint를 사용할 때, TypeScript 문법이 인식되지 않아 오류로 판단되는 경우가 있다.

 

아래 명령을 실행하여 ESLint 설정 파일을 생성한다.

npx eslint --init

 

질문이 나오면 다음과 같이 답변한다.

• How would you like to use ESLint?
  • To check syntax, find problems, and enforce code style (문법 검사 + 스타일 규칙 적용)
• What type of modules does your project use?
  • JavaScript modules (import/export) (Vue + TypeScript + Vite 프로젝트는 ESM 사용)
• Which framework does your project use?
  • Vue (Vue 프로젝트이므로 Vue 선택)
• Does your project use TypeScript?
  • Yes (TypeScript를 사용하므로 Yes 선택)
• Where does your code run?
  • Browser (Vue는 브라우저에서 실행됨)
• How would you like to define a style for your project?
  • Use a popular style guide (유명한 스타일 가이드 적용)
• Which style guide do you want to follow?
  • Airbnb (Vue + TypeScript 프로젝트에서는 가장 추천)
    Standard
    Google
• What format do you want your config file to be in?
  • JavaScript (설정 파일을 .eslintrc.cjs로 만들기 위해 JavaScript 선택)

 

ESLint를 설치한다.

이미 설치되어 있다면, 기존에 설치된 ESLint 및 관련 패키지를 삭제한다.

npm uninstall eslint eslint-plugin-vue @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-config-airbnb-base eslint-plugin-import

npm install -D eslint@latest eslint-plugin-vue@latest @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest eslint-config-airbnb-base@latest eslint-plugin-import@latest

 

만약 npm 버전 문제로 ERESOLVE 오류가 계속 발생하면, --legacy-peer-deps 옵션을 추가해서 설치한다.

npm install -D eslint@latest eslint-plugin-vue@latest @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest eslint-config-airbnb-base@latest eslint-plugin-import@latest --legacy-peer-deps

 

 

.eslintrc.js 파일을 수정한다.

module.exports = {
  root: true,
  env: {
    browser: true,
    es2021: true,
    node: true
  },
  extends: [
    'eslint:recommended',
    'plugin:vue/vue3-recommended',
    'airbnb-base', // Airbnb 스타일 가이드 적용
    '@vue/eslint-config-typescript'
  ],
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
    parser: '@typescript-eslint/parser'
  },
  plugins: ['vue', '@typescript-eslint'],
  rules: {
    'vue/multi-word-component-names': 'off', // 단일 단어 컴포넌트 허용
    '@typescript-eslint/no-unused-vars': ['warn'], // 사용하지 않는 변수 경고
    'vue/no-multiple-template-root': 'off', // Vue 3에서는 필요 없음
    'import/no-extraneous-dependencies': 'off', // devDependencies 관련 경고 끄기
    'no-console': 'warn' // console.log() 경고 처리
  }
};

 

 

VSCode의 settings.json을 수정해서 ESLint가 .vue와 .ts 파일을 분석할 수 있도록 설정한다.

{
  "editor.codeActionsOnSave": {
    "source.fixAll": true,
    "source.fixAll.eslint": true
  },
  "eslint.validate": ["javascript", "typescript", "vue"],
  "editor.formatOnSave": true,
  "typescript.tsdk": "node_modules/typescript/lib"
}

 

 

 

---

 

 

 

ESLint 검사 실행

npx eslint "src/**/*.{js,ts,vue}"

 

코드 자동 수정

npx eslint "src/**/*.{js,ts,vue}" --fix

 

 

---

 

 

ESLint 검사 실행 시 다음과 같은 오류가 발생하는 경우, 버전에 따른 문제로 한가지 수정이 필요하다.

$ npx eslint "src/**/*.{js,ts,vue}" --fix

Oops! Something went wrong! :(

ESLint: 9.22.0

ESLint couldn't find an eslint.config.(js|mjs|cjs) file.

From ESLint v9.0.0, the default configuration file is now eslint.config.js.
If you are using a .eslintrc.* file, please follow the migration guide
to update your configuration file to the new format:

https://eslint.org/docs/latest/use/configure/migration-guide

If you still have problems after following the migration guide, please stop by
https://eslint.org/chat/help to chat with the team.

 

ESLint 9.x 버전부터 기본 설정 파일 이름이 eslint.config.js로 변경된 문제로,

이전에 사용하던 .eslintrc.js, .eslintrc.cjs 등의 파일을 eslint.config.js 파일로 변경해야 한다.

 

파일명 변경 이후 파일 내용도 다음과 같이 변경한다.

import js from "@eslint/js";
import vue from "eslint-plugin-vue";
import tseslint from "@typescript-eslint/eslint-plugin";
import tsparser from "@typescript-eslint/parser";
import airbnbBase from "eslint-config-airbnb-base";

export default [
  js.configs.recommended,
  vue.configs["vue3-recommended"],
  airbnbBase,
  {
    files: ["**/*.ts", "**/*.vue"],
    languageOptions: {
      parser: tsparser,
      sourceType: "module"
    },
    plugins: {
      "@typescript-eslint": tseslint
    },
    rules: {
      "vue/multi-word-component-names": "off", // 단일 단어 컴포넌트 허용
      "@typescript-eslint/no-unused-vars": ["warn"], // 사용하지 않는 변수 경고
      "vue/no-multiple-template-root": "off", // Vue 3에서는 필요 없음
      "import/no-extraneous-dependencies": "off", // devDependencies 관련 경고 끄기
      "no-console": "warn" // console.log() 경고 처리
    }
  }
];

 

 

---

 

 

ESLint 9.x 버전은 아직 지원되지 않는 게 많아 8.x 버전을 권장한다고 한다..

npm uninstall eslint eslint-plugin-vue @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-config-airbnb-base eslint-plugin-import vue-eslint-parser

npm install -D eslint@8.57.1 eslint-plugin-vue @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-config-airbnb-base@15.0.0 eslint-plugin-import vue-eslint-parser

 

 

 

 

.eslintrc.cjs

module.exports = {
  root: true,
  env: {
    browser: true,
    es2021: true,
    node: true
  },
  extends: [
    "eslint:recommended",
    "plugin:vue/vue3-recommended",
    "airbnb-base",
    "plugin:@typescript-eslint/recommended"
  ],
  parserOptions: {
    ecmaVersion: "latest",
    sourceType: "module",
    parser: "@typescript-eslint/parser"
  },
  plugins: ["vue", "@typescript-eslint"],
  rules: {
    "vue/multi-word-component-names": "off", // 단일 단어 컴포넌트 허용
    "@typescript-eslint/no-unused-vars": ["warn"], // 사용하지 않는 변수 경고
    "vue/no-multiple-template-root": "off", // Vue 3에서는 필요 없음
    "import/no-extraneous-dependencies": "off", // devDependencies 관련 경고 끄기
    "no-console": "warn" // console.log() 경고 처리
  }
};

 

eslint-plugin-vue 10버전과 충돌이 발생할 수 있다.

 

npm uninstall eslint eslint-plugin-vue eslint-config-airbnb-base eslint-plugin-import

npm install -D eslint@8.57.1 eslint-plugin-vue@9 eslint-config-airbnb-base eslint-plugin-import

 

.eslintrc.cjs 수정

module.exports = {
  root: true,
  env: {
    browser: true,
    es2021: true,
    node: true
  },
  extends: [
    "eslint:recommended",
    "plugin:vue/vue3-recommended",
    "airbnb-base",
    "plugin:@typescript-eslint/recommended"
  ],
  parser: "vue-eslint-parser",
  parserOptions: {
    ecmaVersion: "latest",
    sourceType: "module",
    parser: "@typescript-eslint/parser",
    extraFileExtensions: [".vue"]
  },
  plugins: ["vue", "@typescript-eslint"],
  settings: {
    "import/resolver": {
      alias: {
        map: [["@", "./src"]],
        extensions: [".js", ".ts", ".vue"]
      }
    }
  },
  rules: {
    "vue/multi-word-component-names": "off",
    "vue/no-multiple-template-root": "off",
    "import/no-unresolved": "off",
    "import/extensions": "off",
    "import/order": "off",
    "no-console": "off",
    "no-use-before-define": ["error", { "functions": false }],
    "@typescript-eslint/no-explicit-any": "off",
    "no-restricted-syntax": "off",
    "no-await-in-loop": "off"
  }
};

npm install -D eslint-import-resolver-alias