집 >웹 프론트엔드 >JS 튜토리얼 >Vue 코딩 스타일에 대한 자세한 설명

Vue 코딩 스타일에 대한 자세한 설명

亚连원래의: 2018-06-05 16:21:211847검색

이 글에서는 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 구성용으로 서식이 지정되어 있지 않으므로 활성화하려면 별도로 사용자 설정을 구성해야 합니다.

기본 설정-> 설정 메뉴를 찾아 오른쪽의 사용자 구성에 "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 플러그인을 설치한 후 prettier는 .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를 구성합니다

vetur는 .vue에서 html+script+style 3개 부분을 분할한 다음 처리를 위해 해당 언어 프로세서에 전달합니다.

예:

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

스크립트는 es5, es6, ts, 커피일 수 있습니다.

스타일은 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",
 }
}

Finished and done

이제 구성이 완료되었습니다.

{
 // 强制单引号
 "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 형식을 지정하지 않는 문제를 주로 해결하고 있으며, 다음과 같습니다. 더 예쁜 형식을 지정할 때 eslint는 자동으로 스타일 충돌을 수정합니다.

물론 Prettier Formatting과 Eslint Fix 사이에는 본질적인 차이가 있지만 Prettier + 자동 수정이 완벽합니다.

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

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

아마도 나중에 지원될 것 같아요.

기타 플러그인 권장

자동 닫기 태그
자동 이름 바꾸기 태그
Bracket 쌍 Colorizer
Code Runner
문서화
EditorConfig
ESLint
gitignore
GitLens
Guides
가져오기 비용
npm intellisense
경로 자동 완성
Prettier
설정 동기화
TODO 하이라이트
Vetur
vscode-icons

하나씩 설명하지 않겠습니다.

위 내용은 모두를 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

Vue 코딩 스타일에 대한 자세한 설명

관련 기사