vscodeでVueのコーディングスタイルを統一する方法の紹介-jsチュートリアル-php.cn

vscodeでVueのコーディングスタイルを統一する方法の紹介

不言

リリース： 2018-06-29 13:52:14

オリジナル

2474 人が閲覧しました

この記事は主に vscode で Vue のコーディングスタイルを統一する方法を紹介します。内容が非常に優れているので、参考として共有します。

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",
  }
 }
}

ログイン後にコピー

これで、html+js+css をフォーマットできるようになります。 .vue.

しかし、上で説明したように、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 サイトではこの解決策のみが提供されているためです。

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

その他の推奨プラグイン