VS Code 자동 서식(alt+shift+F)과 VueJs 기본 서식(npm run lint) 규칙 간의 충돌을 해결합니다.
<p>방금 VueJs 프로젝트를 초기화했습니다: </p>
<pre class="brush:php;toolbar:false;">npm init vue@3 .
다음 패키지를 설치해야 합니다.
create-vue@3.3.2
계속하시겠습니까?
Vue.js - 프로그레시브 JavaScript 프레임워크
√ 패키지 이름: ...no-interrupts
√ TypeScript를 추가하시겠습니까? ... 예
√ JSX 지원을 추가하시겠습니까? ... 예
√ 단일 페이지 애플리케이션 개발을 위해 Vue Router를 추가하시겠습니까?
√ 상태관리를 위해 피니아를 추가하시겠습니까?
√ 단위 테스트를 위해 Vitest를 추가하시겠습니까?
√ 단위 및 엔드 투 엔드 테스트에 Cypress를 추가하시겠습니까?
√ 코드 품질을 위해 ESLint를 추가하시겠습니까?
√ 코드 서식을 위해 Prettier를 추가하시겠습니까? 예</pre>
<p>하지만 이제 코드 형식을 지정하면(alt+shift+f) prettier가 뭔가를 강조합니다. <code>npm run lint</code>를 실행하면 모든 것이 정상으로 돌아갑니다. </p>
<p>예를 들어, alt-shift-F는 첫 번째 줄에 있는 html 요소의 첫 번째 속성을 유지하려고 시도하는 것 같습니다. </p>
<pre class="brush:php;toolbar:false;"><img alt="Vue 로고"
클래스="로고"
src="@/assets/logo.svg"
너비 = "125";
높이="125" /></pre>
<p>여기서 npm run lint에는 각 속성에 대한 전용 줄이 있습니다: </p>
<pre class="brush:php;toolbar:false;"><img
alt="Vue 로고"
클래스="로고"
src="@/assets/logo.svg"
너비 = "125";
높이="125"
//></pre>
<p>저장 시 파일이 포맷되기 때문에 특히 문제가 됩니다. </p>
<p>딱히 선호하는 것은 아니지만 가능하다면 <code>npm run lint</code>에서 제안한 것을 유지하고 싶습니다. </p>
<p>내 <code>eslintrc.cjs</code>에는 다음 콘텐츠가 포함되어 있습니다. </p>
<pre class="brush:php;toolbar:false;">/* eslint-env 노드 */
require("@rushstack/eslint-patch/modern-module-solution");
모듈.수출 = {
루트: 사실,
확장: [
"플러그인:vue/vue3-essential",
"eslint:권장",
"@vue/eslint-config-typescript/권장",
"@vue/eslint-config-prettier",
],
파서옵션: {
ecmaVersion: "최신",
},
};</pre>
<p><code>alt-shift-f</code> 명령을 사용하여 코드 형식을 올바르게 지정하려면 어떻게 해야 합니까? </p>
