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

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

NODE님의 프로필 이미지

작성한 질문수

Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"

ESLint, Prettier

vue3 공부중에 있는데, eslint 및 prettier에서 문제가 있습니다.

작성

·

107

·

수정됨

0

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요!
- 먼저 유사한 질문이 있었는지 검색해보세요.
- 서로 예의를 지키며 존중하는 문화를 만들어가요.
- 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.

 

  1. eslint 가 적용 되지 않습니다. 저장시에 더블 코트가 싱글 코트로 변경되어야 하는데, 되지 않네요.

  2. vue 코드들도 저장시에 자동정렬도 되지 않고 있습니다ㅠ

아래는 차례대로 package.json, setting.json, .eslintrc.cjs, .prettierrc.json 입니다

{
  "name": "learn-vue3",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "bootstrap": "^5.3.3",
    "lint": "^0.8.19",
    "prettier": "^3.4.2",
    "vue": "^3.1.9"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^5.2.1",
    "eslint": "^9.17.0",
    "eslint-plugin-vue": "^9.32.0",
    "vite": "^6.0.3"
  }
}

 

 

{
  "eslint.validate":
  [
     
     "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "html",
    "vue",
    "markdown"
  ],
  "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
  },
  
}
import js from '@eslint/js'
import pluginVue from 'eslint-plugin-vue'
import skipFormatting from '@vue/eslint-config-prettier/skip-formatting'

export default [
  { 
     name: 'app/files-to-lint',
    files: ['**/*.{js,mjs,jsx,vue}'],
  },

  {
    name: 'app/files-to-ignore',
    ignores: ['**/dist/**', '**/dist-ssr/**', '**/coverage/**'],
  },

  js.configs.recommended,
  ...pluginVue.configs['flat/essential'],
  skipFormatting,
  {
    rules: {
      'no-console': 'warn', // console 메서드 사용시 경고(warn) 표시
    },
  },
]
{
    "$schema": "https://json.schemastore.org/prettierrc", // Prettier 설정 스키마
    "semi": false, // 세미콜론 생략
    "singleQuote": true, // 작은따옴표 사용
    "arrowParens": "avoid" // 매개변수 하나일 때 괄호 생략
  }

답변 2

0

짐코딩님의 프로필 이미지
짐코딩
지식공유자

안녕하세요 🙂

ESLint, Prettier 설정 회차를 다시한번 확인해보시면 좋을 것 같아요

그리고

...
"editor.codeActionsOnSave": {
   "source.fixAll.eslint": true // true 가 아니라 문자열을 입력해야해요! 스펙이 변경되어 교안에 기재해 두었습니다.
},
...

강의교안 참고

NODE님의 프로필 이미지
NODE
질문자

해결 하였습니다 감사합니다ㅠ

0

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

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

ESLint와 Prettier 설정이 제대로 적용되지 않아 불편을 겪고 계신 것 같습니다. 이 문제를 해결하기 위해 관련 유사 질문 및 답변을 정리해 드리겠습니다.

  1. 프로젝트에 eslint와 prettier를 나중에 추가하고 싶습니다.
    이 게시물에서는 Vue 프로젝트에 ESLint와 Prettier를 설정하는 방법을 자세히 설명하고 있습니다. 기본적인 설치 명령어와 설정 파일의 예시를 포함하고 있으니 참고하시면 도움이 될 것 같습니다.

  2. eslint 설정 문의
    여기서는 에러 없이 설정하는 방법을 안내하고 있으며, 특정 설정 파일의 구성을 어떻게 해야 하는지에 대한 정보를 얻을 수 있습니다. 이미지와 구체적인 코드 예시들이 제공되어 있어 이해에 큰 도움이 될 것입니다.

위 답변들이 문제 해결에 도움을 줄 수 있기를 바랍니다. 환경 설정이 정확하게 되지 않았거나 설정 파일에 실수가 있었을 가능성이 있습니다. 과정 중 충분한 확인과 함께 위 가이드를 따라 설정하시길 추천드립니다.

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

NODE님의 프로필 이미지

작성한 질문수

질문하기