ホームページ > 記事 > ウェブフロントエンド > vscodeでVueのコーディングスタイルを統一する方法の紹介

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

不言オリジナル: 2018-06-29 13:52:142379ブラウズ

この記事は主に 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 サイトではこの解決策のみが提供されているためです。

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

その他の推奨プラグイン

タグの自動終了
タグの名前の自動変更
ブラケットペアカラーライザー
コードランナー
これを文書化する
EditorConfig
ESLint
gitignore
GitLens
ガイド
インポートコスト
npm
パスのオートコンプリート
もっと綺麗
設定の同期
TODO ハイライト
Vetur
vscode-icons
一つ一つ説明しません。

以上がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

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

関連記事