VS Code 자동 서식(alt+shift+F)과 VueJs 기본 서식(npm run lint) 규칙 간의 충돌을 해결합니다.

Question

방금 VueJs 프로젝트를 초기화했습니다:

npm init vue@3 .
다음 패키지를 설치해야 합니다.
  create-vue@3.3.2
계속하시겠습니까?

Vue.js - 프로그레시브 JavaScript 프레임워크

√ 패키지 이름: ...no-interrupts
√ TypeScript를 추가하시겠습니까? ... 예
√ JSX 지원을 추가하시겠습니까? ... 예
√ 단일 페이지 애플리케이션 개발을 위해 Vue Router를 추가하시겠습니까?
√ 상태관리를 위해 피니아를 추가하시겠습니까?
√ 단위 테스트를 위해 Vitest를 추가하시겠습니까?
√ 단위 및 엔드 투 엔드 테스트에 Cypress를 추가하시겠습니까?
√ 코드 품질을 위해 ESLint를 추가하시겠습니까?
√ 코드 서식을 위해 Prettier를 추가하시겠습니까? 예

하지만 이제 코드 형식을 지정하면(alt+shift+f) prettier가 뭔가를 강조합니다. npm run lint를 실행하면 모든 것이 정상으로 돌아갑니다.

예를 들어, alt-shift-F는 첫 번째 줄에 있는 html 요소의 첫 번째 속성을 유지하려고 시도하는 것 같습니다.

<img alt="Vue 로고"
     클래스="로고"
     src="@/assets/logo.svg"
     너비 = "125";
     높이="125" />

여기서 npm run lint에는 각 속성에 대한 전용 줄이 있습니다:

<img
  alt="Vue 로고"
  클래스="로고"
  src="@/assets/logo.svg"
  너비 = "125";
  높이="125"
//>

저장 시 파일이 포맷되기 때문에 특히 문제가 됩니다.

딱히 선호하는 것은 아니지만 가능하다면 npm run lint에서 제안한 것을 유지하고 싶습니다.

내 eslintrc.cjs에는 다음 콘텐츠가 포함되어 있습니다.

/* eslint-env 노드 */
require("@rushstack/eslint-patch/modern-module-solution");

모듈.수출 = {
  루트: 사실,
  확장: [
    "플러그인:vue/vue3-essential",
    "eslint:권장",
    "@vue/eslint-config-typescript/권장",
    "@vue/eslint-config-prettier",
  ],
  파서옵션: {
    ecmaVersion: "최신",
  },
};

alt-shift-f 명령을 사용하여 코드 형식을 올바르게 지정하려면 어떻게 해야 합니까?

Answer 1

VS Code에서 기본 포맷터를 설정해야 합니다. 방법은 다음과 같습니다:

1. 설치 ESLintExtension
2. 설정으로 이동하여 "기본 포맷터"를 검색하세요
3. ESLint를 선택하세요

VS Code는 자동으로 프로젝트에서 ESLint 구성을 읽고 그에 따라 코드 형식을 지정합니다