ホームページ > 記事 > ウェブフロントエンド > Vueのコーディングスタイルを詳しく解説

Vueのコーディングスタイルを詳しく解説

亚连オリジナル: 2018-06-05 16:21:211767ブラウズ

この記事では、vue のコーディングスタイルを vscode に統一する方法を主に紹介します。編集者がそれを共有し、参考にさせていただきます。ぜひ見に来てください

vetur ご存知の方も多いと思いますが、vscode では .vue の html や js を整形する方法がなく、頭の痛い問題であり、コードスタイルも統一できません。

直接分割して .vue に導入する人が非常に多いのですが、この方法は良いのですが、.vue 単一ファイルコンポーネントの本来の目的に反しています。

この記事では、vue コーディングスタイルを統一するために vscode で vetur + prettier + eslint を使用する方法を詳しく紹介します。

vetur プラグイン

vetur は複数のバージョンで反復されており、現在 vscode で最高の vue プラグインです。ts、webpack エイリアス、その他の機能もサポートしています。

ただし、いくつかの機能は直接サポートされていないため、手動構成が必要です。また、いくつかの機能では、完了する前に他のプラグインを構成する必要があります。

これがちょっと面倒なんです、初心者の生徒はよくここで死んでしまいます。

1. vscode のデフォルトの書式設定ショートカットキーをオーバーライドするように eslint

prettier を設定します。ただし、これは 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 形式のファイルであることを知りましたが、それでもうまくフォーマットできませんでした。

追記: 現在、vetur は prettier の eslint をサポートしていません。

html には html+script+style の 3 つの部分が含まれるため、prettier はデフォルトの書式設定仕様のみを使用して書式設定することができ、eslint をサポートせず、デフォルトでは html を書式設定しません。

オンになった「prettier.eslintIntegration」: true は .js ファイルのみに適用され、.vue ファイルには適用されません。

そのため、.vue ファイルをフォーマットすると、stript 部分が eslint スタイルと矛盾する可能性があるため、個別に設定する必要があります。

たとえば、eslint の仕様、文字列一重引用符、オブジェクトの末尾項目にもカンマが含まれています。

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

二重引用符を使用し、末尾にカンマを追加しない場合は、設定する必要はありません。

または、無害だと思われる場合は、これを設定する必要はありません。いずれにせよ、eslint は保存時に自動的に修正します。

3. vetur を html 形式に設定する

vetur は .vue 内の html+script+style 3 つの部分を分割し、それを対応する言語プロセッサに渡して処理するためです。

例:

html は、html、pug、jade などです。

スクリプトはes5、es6、ts、coffeeです。

スタイルは、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 部分は prettier のデフォルト形式のみを使用でき、prettier+eslint の効果を実現するために保存時に自動的に修正されます。

詳細な設定が必要な場合は、vetur 公式ドキュメントにアクセスしてください https://vuejs.github.io/vetur

概要

主に、prettier が .vue で js をフォーマットしない問題を解決します。 Prettier eslint をフォーマットすると、スタイルの競合が自動的に修正されます。

もちろん、prettier フォーマットと eslint の修正の間には本質的な違いがありますが、prettier + 自動修正は完璧です。

.js の場合、prettier は eslint サポートをオンにします。これは直接的には完璧です。

ただし、.vue はこの方法でのみ設定できます。現在 vetur はサポートしておらず、公式 Web サイトではこの解決策のみが提供されているためです。

もしかしたら今後対応されるかもしれません。

その他の推奨プラグイン