vscode 설정 vue+vetur+eslint+prettier 자동 포맷 기능
vscode Vetur 플러그 인
Vetur 플러그 인 은 vue 파일 을 인식 하 는 데 사 용 됩 니 다.원래 vetur 자체 포맷 기능 이 있 었 지만 eslint 와 충돌 할 수 있어 서 사용 하지 않 았 습 니 다.

vscode ESlint 플러그 인
Eslint 플러그 인 은 프로젝트 디 렉 터 리 의.eslintrc.js 설정 파일 에 따라 편집기 에 오류 알림 을 표시 합 니 다.뒤의 자체 포맷 은 오류 알림 에 따라 포맷 합 니 다.

vue-cli 를 기반 으로 만 든 프로젝트 의 다음 절 차 는 주의해 야 합 니 다.
만 들 때 Linter/Formatter 를 선택 하 십시오(기본 값 이 선택 되 었 습 니 다)

다음 선택 Eslint+Prettier

다음 단 계 는 Lint on save 를 선택 하 십시오.(편집 저장 후 코드 형식 에 따라 검 측)

다음 단 계 는 In dedicated config files 를 선택 하 십시오.(eslint 와 prettier 의 설정 을 독립 된 파일 에서 추출 합 니 다)

package.json 에서 eslint 와 prettier 에 대한 의존 도 를 볼 수 있 습 니 다.

.eslintrc.js 에서 전체적인 eslint 규칙 이 vue,eslint 와 prettier 의 일부 플러그 인 라 이브 러 리 를 합 쳐 문법 분석 을 하 는 것 을 볼 수 있다(eslint 는 js,vue,prettier 는 js,html 와 css 를 대상 으로 하고 여기 서 eslint 와 prettier 의 충돌 은 이미 처리 되 었 다)

이 단계 에 서 는 컴 파일 할 때 eslint 오류 와 경 고 를 볼 수 있 지만 자동 포맷 기능 을 저장 할 수 없습니다.

파일 루트 디 렉 터 리 에.prettierrc 를 만 들 고 prettier 포맷 을 사용자 정의 규칙 으로 설정 합 니 다.다음은 제 가 추가 한 규칙 입 니 다.
{
/* */
"singleQuote": true,
/* */
"semi": false,
/* */
"bracketSpacing": true,
/* html */
"htmlWhitespaceSensitivity": "ignore"
}
사용자 설정 에 사용자 정의 설정 추가mac 의 위치

필요 에 따라 전역(User)이나 프로젝트(Workspace)설정 을 선택 하고 오른쪽 상단 의 편집 단 추 를 누 르 면 settings.json 파일 을 엽 니 다.

다음 설정 을 추가 하여 편집기 가 저장 할 때 자동 으로 eslint 규칙 을 포맷 합 니 다.
"editor.codeActionsOnSave": {
"source.fixAll": true
},
/* , Vetur 。*/
"editor.formatOnSave": false
이것 은 제 사용자 정의 설정 입 니 다.
vue-cli 가 만 든 항목 이 아 닙 니 다.
아래 빨 간 상자 의 의존 도 를 단독으로 도입 합 니 다.

vscode Vetur 와 ESlint,.eslintrc.js,.prettierrc 와 settings.json 의 내용 을 위 와 같이 추가 하면 저장 이 자동 으로 eslint 에 따라 포맷 됩 니 다.
총결산
eslint,vue,prettier 와 관련 된 의존 도 를 도입 합 니 다.
@vue/cli-plugin-eslint
@vue/eslint-config-prettier
babel-eslint
eslint
eslint-plugin-prettier
eslint-plugin-vue
prettier
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
React Typescript 스니펫새로운 구성 요소를 생성할 때 동일한 코드를 입력하는 데 지쳤다면 VS Code가 제공하는 멋진 솔루션인 코드 스니펫 🔥이 있습니다. 다음은 Typescript로 React 구성 요소를 만들기 위한 두 가지 스니펫입...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.