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

안녕하세요 🙂

공식문서를 참고하시면 아래와 같이 가이드 하고 있는걸 확인할 수 있습니다.

import someConfig from "some-other-config-you-use";
import eslintConfigPrettier from "eslint-config-prettier";

export default [
  someConfig,
  eslintConfigPrettier,
];

• 공식문서 - https://github.com/prettier/eslint-config-prettier

그리고 모듈 시스템은 ESModule 방식으로 일관성 있게 하시는 것을 권장드립니다.

• 모듈 시스템 - https://youtu.be/5NXEXkIrkAk?si=fhmQ6jvoNjIbouPP

아울러 학습시에는 강의 버전과 맞추시는 걸 권장드립니다.

만약 프론트엔드 관련 생태계 지식이 부족하시다면 꼭! 프론트엔드 날개달기 강의(무료강의)를 보시는 것을 권장드립니다!

버전이 달라서 그랬던건지 최초에 eslint.config.js가 있었고

import js from '@eslint/js';
import globals from 'globals';
import reactHooks from 'eslint-plugin-react-hooks';
import reactRefresh from 'eslint-plugin-react-refresh';
//추가함
const eslintConfigPrettier = require('eslint-config-prettier');

export default [
  { ignores: ['dist'] },
  {
    files: ['**/*.{js,jsx}'],
    languageOptions: {
      ecmaVersion: 2020,
      globals: globals.browser,
      parserOptions: {
        ecmaVersion: 'latest',
        ecmaFeatures: { jsx: true },
        sourceType: 'module',
      },
    },
    plugins: {
      'react-hooks': reactHooks,
      'react-refresh': reactRefresh,
    },
    rules: {
      ...js.configs.recommended.rules,
      ...reactHooks.configs.recommended.rules,
      'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
      'react-refresh/only-export-components': [
        'warn',
        { allowConstantExport: true },
      ],
//추가함
      ...eslintConfigPrettier.rules,
    },
  },
];

이렇게 되어있었고

ai도움받아 추가하여 변경하였습니다.

const eslintConfigPrettier = require('eslint-config-prettier');

   rules: {
      ...js.configs.recommended.rules,
      ...reactHooks.configs.recommended.rules,
      'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
      'react-refresh/only-export-components': [
        'warn',
        { allowConstantExport: true },
      ],
      ...eslintConfigPrettier.rules,
    },

이렇게 2개 ai도움 받아 변경했습니다.

맞는지 모르겠네요

안녕하세요, 인프런 AI 인턴입니다. 수달고니님.

ESLint를 사용할 때 eslint-config-prettier를 올바르게 import하고 적용하는 방법에 대해 설명드리겠습니다.

먼저, eslint.config.js(flat config)을 사용하여 설정을 구성하려면 require 문법을 사용해야 할 가능성이 높습니다. JavaScript 파일 내에서 import 대신 require를 사용할 수 있거나 import를 사용할 경우에는 Babel과 같은 트랜스파일러를 통해 ES Module을 지원하도록 설정이 필요할 수 있습니다.

eslint-config-prettier를 적용할 때는 다음과 같은 방법을 사용할 수 있습니다:

// eslint.config.js
const prettierConfig = require('eslint-config-prettier');

module.exports = {
  // 여기에 다른 설정이 있을 수 있습니다.
  extends: [
    // 기본 ESLint 설정
    'eslint:recommended',
    // 다른 설정들...
    prettierConfig, // prettier 설정을 마지막에 추가하여 다른 설정을 덮어쓰도록 배치
  ],
  rules: {
    // 커스텀 룰 설정
  }
}

이렇게 설정 파일을 구성하면 다른 ESLint 룰 중에서 prettier와 충돌하는 부분을 eslint-config-prettier가 해제하여 prettier 규칙을 최우선 고려해서 코드를 스타일링 할 수 있게 됩니다.

관련된 내용에서 이미 답변된 유사한 질문 링크는 다음과 같습니다:
- 프로젝트에 eslint와 prettier를 나중에 추가하고 싶습니다.
- eslint 설정 문의

위 링크에서는 특정 JSON 구성과 설정 파일 설정에 대한 구체적인 예시를 제공합니다. 설정 관련해서 참고해보시면 도움이 되실 것입니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.