vscode에서 Vue 코딩 스타일을 통합하는 방법 소개

이 글에서는 Vue 코딩 스타일을 vscode로 통일하는 방법을 주로 소개합니다. 내용이 꽤 괜찮아서 지금 공유해보겠습니다.

vetur 많은 사람들이 알고 있지만 vscode 아래에서 .vue의 html과 js를 형식화할 수 있는 방법이 없습니다. 이는 골치 아픈 일이고 코드 스타일을 통일할 수 없습니다.

너무 많은 사람들이 직접 분할해서 .vue로 소개하는 방식이지만, .vue 단일 파일 컴포넌트의 원래 의도에 어긋납니다.

이 글에서는 Vue 코딩 스타일을 통일하기 위해 vscode에서 vetur + prettier + eslint를 사용하는 방법을 자세히 소개합니다.

vetur 플러그인

vetur 여러 버전을 반복한 후 현재 vscode에서 최고의 vue 플러그인이며 ts도 지원합니다. , webpack 별칭 및 기타 속성.

그러나 일부 기능은 직접 지원되지 않으며 수동 구성이 필요하며 일부 기능을 완료하려면 다른 플러그인을 구성해야 합니다.

여기서 초보 학생들이 죽는 경우가 종종 있습니다.

1. eslint 구성

prettier는 vscode 기본 형식 지정 단축키를 재정의하지만 eslint 구성 형식을 지정하지 않으므로 별도로 구성됨 사용자 설정이 활성화됩니다.

Preferences-> 설정 메뉴를 찾아 오른쪽의 사용자 구성에 "prettier.eslintIntegration": true를 추가하여 eslint 지원을 활성화하세요.

이때 js 파일은 eslint 사양에 맞게 포맷하면 되지만, .vue 파일은 뭔지 모르기 때문에 사용할 수 없습니다.

.vue 파일을 지원하려면 사용자 설정에 다음 구성을 추가하세요.

"eslint.validate": [
 "javascript",
 "javascriptreact",
 {
  "language": "vue",
  "autoFix": true
 }
]

이제 eslint는 vue를 알고 있지만 이는 eslint 인식일 뿐이며 prettier는 여전히 그것이 무엇인지 모릅니다.

따라서 파일을 저장할 때 내부의 js 코드를 자동으로 수정하려면 "eslint.autoFixOnSave": true 구성을 추가해야 합니다.

2. Prettier 구성

eslint는 vue 파일을 처리할 수 있지만 prettier는 이를 모르기 때문에 prettier의 형식과 충돌합니다.

vetur 플러그인을 설치한 후 프리티어는 .vue가 원래 html 형식의 파일이라는 것을 알았지만 여전히 포맷을 잘 하지 못했습니다.

PS: 현재 vetur는 prettier의 eslint를 지원하지 않습니다.

html에는 html+script+style 3부분이 포함되어 있기 때문에 prettier는 기본 서식 지정 사양만 사용하여 서식을 지정할 수 있으며, eslint를 지원하지 않으며, 기본적으로 html 서식을 지원하지 않습니다.

"prettier.eslintIntegration": true가 켜져 있는 것은 .vue 파일이 아닌 .js 파일에만 적용됩니다.

따라서 .vue 파일을 포맷할 때 스트립트 부분이 eslint 스타일과 일치하지 않을 수 있으므로 별도로 구성해야 합니다.

예를 들어 내 eslint 사양, 문자열 작은따옴표 및 개체 최종 품목에도 쉼표가 있습니다.

// 强制单引号
"prettier.singleQuote": true,
// 尾随逗号
"prettier.trailingComma": "all",

큰따옴표를 사용하고 뒤에 쉼표를 추가하지 않으면 구성할 필요가 없습니다.

또는 무해하다고 생각되면 이를 구성할 필요가 없습니다. 어쨌든 eslint는 저장 시 자동으로 수정합니다.

3. html

vetur가 .vue에서 html+script+style 3개 부분을 분할하여 전달하기 때문에 vetur를 구성합니다. 처리를 위해 해당 언어 프로세서로 넘어갑니다.

예:

html은 html, pug, jade 등이 될 수 있습니다.

script는 es5, es6, ts, 커피일 수 있습니다.

style은 CSS, Less, Sass, PostCSS 등이 될 수 있습니다.

html 부분을 제외하고 다른 모든 부분은 기본적으로 더 예쁜 형식을 채택합니다.

html 형식이 필요한 경우 수동으로 구성해야 합니다.

// 使用 js-beautify-html 插件格式化 html
"vetur.format.defaultFormatter.html": "js-beautify-html",
// 格式化插件的配置
"vetur.format.defaultFormatterOptions": {
 "js-beautify-html": {
  // 属性强制折行对齐
  "wrap_attributes": "force-aligned",
 }
}

작업 완료

이 시점에서 구성은 다음과 같이 완전한 구성이 완료되었습니다.

{
 // 强制单引号
 "prettier.singleQuote": true,
 // 尽可能控制尾随逗号的打印
 "prettier.trailingComma": "all",
 // 开启 eslint 支持
 "prettier.eslintIntegration": true,
 // 保存时自动fix
 "eslint.autoFixOnSave": true,
 // 添加 vue 支持
 "eslint.validate": [
  "javascript",
  "javascriptreact",
  {
   "language": "vue",
   "autoFix": true
  }
 ],
 // 使用插件格式化 html
 "vetur.format.defaultFormatter.html": "js-beautify-html",
 // 格式化插件的配置
 "vetur.format.defaultFormatterOptions": {
  "js-beautify-html": {
   // 属性强制折行对齐
   "wrap_attributes": "force-aligned",
  }
 }
}

이제 .vue에서 html+js+css 형식을 지정할 수 있습니다.

하지만 js 부분은 위에서 설명한 것처럼 eslint에 따라 형식이 지정되지 않습니다.

js 부분은 더 예쁜 기본 형식만 사용할 수 있으며, 더 예쁜+eslint 효과를 얻기 위해 저장할 때 자동으로 수정합니다.

자세한 구성이 필요한 경우 vetur 공식 문서를 방문하세요 https://vuejs.github.io/vetur

Summary# 🎜🎜#

주로 .vue에서 js 형식이 Prettier로 지정되지 않는 문제와 형식 지정 시 Prettier와 Eslint 자동 수정 스타일 간의 충돌 문제를 해결합니다.

물론 더 예쁜 서식은 eslint의 수정과 본질적으로 다르지만 더 예쁜 + 자동 수정이 완벽합니다.

.js의 경우 prettier는 직접적으로 완벽한 eslint 지원을 활성화합니다.

하지만 .vue는 현재 vetur에서 지원하지 않고 공식 웹사이트에서는 이 솔루션만 제공하기 때문에 이 방식으로만 구성할 수 있습니다.

추후 지원될 수도 있겠네요.

기타 플러그인 권장사항

1. 태그 자동 닫기

2. 태그 자동 이름 바꾸기

3. 브래킷 쌍 색상기

4. 코드 러너

   #🎜 🎜#

문서화
EditorConfig

6. ESLint#🎜 🎜# #🎜 🎜# #####gitignore#🎜🎜 ## ## ## #####gitlens### ## ## #####
#### ###스테오트 비용#🎜🎜 ## 🎜🎜 ## 🎜🎜##npm Intellisense#🎜🎜 ## 🎜🎜 ## 🎜🎜#PATH#PATH 자동 완성

7. #🎜 🎜#더 예뻐

8. 설정 동기화

9. # 🎜 🎜#TODO 하이라이트

# 🎜🎜 #
10. Vetur

11. vscode-icons
    # 🎜 🎜#
하나씩 설명하지 않겠습니다 .

12. 위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되길 바랍니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 참고해주세요!

    관련 권장 사항:

    Ueditor 서식 있는 텍스트 편집기와 결합된 Vue.js를 사용하는 방법
    

    연결 유지 데이터 캐싱을 통한 vue 프로젝트 최적화 방법
    

    Vue 구성 요소 옵션 소품 사용 소개
    

위 내용은 vscode에서 Vue 코딩 스타일을 통합하는 방법 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!