vscode 설정 vue+vetur+eslint+prettier 자동 포맷 기능

이 설정 은 vue 개발 에 사용 되 며,최종 효 과 는 저장 할 때 자동 으로 eslint 에 따라 js,html,css 코드 를 포맷 하 는 것 입 니 다.
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

vscode Vetur 와 ESlint 플러그 인 설치

설정.eslintrc.js 파일

.prettierrc 파일 설정

설정.settings.json 파일

vscode 설정 vue+vetur+eslint+prettier 자동 포맷 기능 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.