eslint와 prettier

Question

eslint를 설치하면 이전과 달리 esling.config.mjs로 파일이 설정되며 extend나 rules의 활용이 기존과 다른 방식으로 진행되며 충돌이 일어납니다.
stackoverflow나 chatGPT의 도움을 받아 동작은 되지만, 이 부분 다시 설명해주셔야 하는게 아닌지요. (기존에 설명된 부분들도 코드나 적용방식이 달라져서, 플러그인을 활용하도록 합니다)

이 부분을 스스로 혼자 찾아서 수정할 수 있는 역량이 있다면 이 강의를 듣지 않겠지요. 하루 종일 한단원도 나가지 못하고 .. 해결하려다 포기하게 되네요. 2년전에 산 강의를 시간이 없어 이제 듣는 제 문제도 있겠지만.. 이 부분 상세한 설명을 넣어주셔야 할것 같아요.

이지은 · Answer

새로운 강의는 이미 구매를 하였습니다. 하지만, 해당 강의에 eslint와 prettier관련 내용은 없어보여서 질문드렸습니다. ( 새로운 강의를 중간부터 듣기가 애매하여 예전 버전으로 듣고 있습니다 )

eslint는 .mjs버전으로 하여 작동이 잘 되고 있지만, prettier를 함께 연동하는 조합이 잘 되지 않았습니다. (다들 쓰시는 js형태의 파일로 바꾸어야 하는걸까요, eslint 페이지도 보고 stackoverflow질의도 봤으나 .mjs는 플러그인 적용방식이라고 하는데 prettier설정에 대한 가이드는 .js방식밖에 없었습니다.) 검색으로 나타나는 코드에 있던 prettierConfigRecommended 등의 플러그인은 현재 적용이 안되는지 설치가 안되었어요.

chagGPT에게 물어서 plugin을 설정하니 yarn lint는 되나 파일에 오류를 표시하는 밑줄등이 나타나지는 않았습니다. gemini에게 물어서 setting.json에 eslint를 추가함으로써( vscode의 settings.json에 eslint: javascript, typescript...으로 설정을 표시했어요) 밑줄 오류표시가 파일에 나오긴 하는데 맞게 나오는 건지 알수는 없습니다.
import globals from "globals";

import pluginJs from "@eslint/js";

import tseslint from "typescript-eslint";

import pluginReact from "eslint-plugin-react";

import prettierPlugin from "eslint-plugin-prettier";

import prettierConfig from "eslint-config-prettier";

/** @type {import('eslint').Linter.Config[]} */

export default [

{

files: ["**/*.{js,mjs,cjs,ts,jsx,tsx}"],

plugins: { prettier: prettierPlugin },

},

{

languageOptions: {

globals: globals.browser,

// parserOptions: {

// project: "./tsconfig.json",

// },

},

pluginJs.configs.recommended,

...tseslint.configs.recommended,

pluginReact.configs.flat.recommended,

//eslintPluginPrettier.recommended,

{

rules: {

"react/react-in-jsx-scope": "off",

"prettier/prettier": "error",

...prettierConfig.rules,

},

];

settings.json

{
  "editor.formatOnsave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ]
}

해당 부분에 대해 조언을 추가로 부탁드리며, 다른 분들께서도 함께 논의하여 주셨으면 하는 마음에 긴글 올립니다.

노원두 · Answer

안녕하세요! 지은 님! 현재 eslint 버전이 올라가면서, npm 버전에 영향을 받게 되었어요! 따라서, 구버전의 node와 npm이 설치된 컴퓨터에서는 강의에서 나타나는 설치 화면(구버전의 eslint 설치화면) 을 보실 수 있으나, 그렇지 않으면 신버전의 eslint 설치방식이 나타나게 되고, 이에 맞춰 설치를 진행해 주셔야 합니다. 따라서, 아래의 방식으로 최신 eslint를 설치 해 주시면 문제 없이 사용 가능합니다! (아래 각 메뉴에 대한 설명은 강의에서의 설명과 동일 합니다!)   여기까지 설치를 완료하셨다면, eslint.config.mjs 파일 이 생성되는데, 이 파일에서 rules를 설정 하실 수 있어요!   eslint 문제가 되는 부분을 확인합니다.(만약 아무 반응이 없다면, vscode를 껐다가 다시 켜주세요.) => 해결하기 또는 rules에서 제외 하기   만약 rules에서 제외하신다면? => 마우스를 올려서 제외할 내용의 eslint 부분 복사 하기   eslint.config.mjs 파일에서 아래와 같이 입력 => "rules" 부분을 입력 하고, 해당 내용에 대해서 "off" 처리 합니다.   최종적으로 잘 반영되었는지 확인해 보세요!   ========================================================== 지은 님! 리뉴얼된 메인 부트캠프와 모바일 하이브리드앱 강좌가 포함된 완벽한프론트엔드가 출시 되었어요! 기존 수강생분들께만 쿠폰이 발급되었었는데, 기간이 만료되었습니다. 따라서 새롭게 업데이트 강의쿠폰을 받기 위해서는 support@codebootcamp.co.kr 로 메일 보내주시면 빠르게 응답드릴께요! ===================================================

인프런 AI 인턴 · Answer

안녕하세요, 인프런 AI 인턴입니다. 이지은님!

eslint와 prettier 설정에 대한 불편함을 겪고 계신 것에 대해 많은 이해와 공감을 합니다. ESLint의 버전 변화로 인해 설정 파일의 형식이 변경되고 있는 경우가 있습니다. 예를 들어, .mjs 확장자를 가진 파일로 설정이 저장되는 경우 등인데요, 이로 인해 기존에 설명된 방식과 차이가 발생할 수 있습니다.

해결 방법

ESLint & Prettier 설치 과정 업데이트: 가이드 내용을 최신 버전으로 반영하는 것이 필요할 수 있습니다. ESLint와 Prettier의 공식 문서에서 최신 설치 및 설정 방법을 참조하실 수 있습니다.
규칙 설정 업데이트: ‘extends’나 ‘rules’의 경우 최신 권장 설정이나 플러그인을 사용해 구성할 수 있습니다. 각 플러그인의 문서에서 제공되는 설정 예시를 참고하여 설정 파일을 업데이트 해보세요.
플러그인 사용: 현업에서 많이 사용하는 플러그인들도 함께 설정하여 경험해 보시는 것도 좋은 방법입니다.

기존 답변 및 추가 리소스

아래는 ESLint 설정 변경과 관련된 유사한 글들이며, 관련해서 자세한 설명이 포함되어 있을 것입니다.

React 초기 세팅 yarn dev 오류 해결 방법 안내: 다음 게시글에서는 설정 오류 해결방법을 안내하고 있습니다.

질문자님의 문제를 해결하는 데 위의 리소스가 도움이 되기를 바랍니다. 강의 내용을 보완하는 과정도 중요하지만, 질문자님께서 제공하신 피드백은 콘텐츠 개선에도 긍정적인 영향을 미칠 것입니다.

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

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