인프런 영문 브랜드 로고
인프런 영문 브랜드 로고

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

김지영님의 프로필 이미지

작성한 질문수

따라하며 배우는 리액트, 파이어베이스 - 채팅 어플리케이션 만들기[2023.12 리뉴얼]

ESLint 설정하기

ESlint

작성

·

62

0

vs code가 업데이트 되어서 그런지.. eslint.config.js로 바뀌었는데 어떻게 설정해야할지 잘 모르겠습니다.

일단 gpt에서 말하는대로 바꾸어보긴 했는데 작동을 안하더라고요.. 어케 해야할까요

 

import globals from "globals";
import pluginJs from "@eslint/js";
import pluginReact from "eslint-plugin-react";


/** @type {import('eslint').Linter.Config[]} */
export default [
  {files: ["**/*.{js,mjs,cjs,jsx}"],
   languageOptions: { 
    globals: globals.browser,
    sourceType: "module",
    ecmaVersion: "latest"
   },
   plugins: {
    react: pluginReact
   },
   rules:{
    ...pluginJs.configs.recommended.rules,
    ...pluginReact.configs.recommended.rules,
    "react/prop-types": "off",
   },
  },
  {
    files:[".eslintrc.{js,cjs}"],
    languageOptions:{
      sourceType:"script",
    },
    environment: {
      node:true,
    }
  }

]

답변 1

0

인프런 AI 인턴님의 프로필 이미지

안녕하세요, 인프런 AI 인턴입니다.

김지영님, ESLint 설정이 VS Code 업데이트로 인해 문제가 발생할 수 있습니다. 김지영님의 eslint.config.js 설정파일을 살펴보겠습니다. 일단 작성해주신 설정을 기반으로 몇 가지 사항을 점검해 보세요:

  1. 설정 형식: 주어진 설정은 배열로 내보내고 있습니다. 보통은 객체 형식으로 내보내게 됩니다. 대신, 다중 파일 설정 관리가 필요 없는 경우 객체 리터럴로 하나의 구성만 내보내는 것을 고려해 보세요.

  2. import/export vs require/module.exports: import 문법을 사용하고 계시므로, 파일 내보내는 방식 역시 export default가 올바르지만, ESLint에 직접 설정을 적용할 때는 모듈화 방식(module.exports = {...})을 사용하는 것도 방법입니다.

  3. 환경 설정 누락: ‘react’의 경우 환경 설정이 추가로 필요할 수 있습니다. environment 내에 browser: truees6: true를 추가하세요.

예시로 아래와 같이 수정할 수 있습니다:

// eslint.config.js
import globals from "globals";
import pluginJs from "@eslint/js";
import pluginReact from "eslint-plugin-react";

// ESLint configuration object
const config = {
  languageOptions: {
    globals: globals.browser,
    sourceType: "module",
    ecmaVersion: "latest",
  },
  plugins: [pluginReact],
  rules: {
    ...pluginJs.configs.recommended.rules,
    ...pluginReact.configs.recommended.rules,
    "react/prop-types": "off",
  },
  environments: {
    browser: true,
    es6: true,
  },
};

export default config;

위의 설정을 사용한 후에도 문제가 지속된다면, ESLint를 최신 버전으로 업데이트하거나 초기화 후 다시 설치하는 것도 고려해 보세요. 또, ESLint 플러그인 및 확장기능이 최신인지 확인해보세요.

추가적으로 참조할 수 있는 URL 있습니다: ESLint 공식 문서

이 정보가 도움이 되셨으면 좋겠습니다. 추가 질문이 있으시면 언제든지 말씀해 주세요.