Vue開発用のVSCodeの構成

Visual Studio Codeは、現在世界で最も使用されているコードエディターの1つです。あなたがそのような人気のあるエディタであるとき、人々は素晴らしいプラグインを構築します。そのようなプラグインの1つは、Vue.js開発者を支援できる素晴らしいツールです。

Visual Studio Codeは、現在世界で最も使用されているコードエディターの1つです。編集者には、多くのソフトウェア製品と同様に、サイクルがあります。 TextMateが開発者のお気に入りだったときは、Sublime Textでしたが、現在はVSCodeです。

人気があることのすごいところは、人々が想像するすべてのもののためのプラグインを構築することに多くの時間を費やしていることです。

そのようなプラグインの1つは、Vue.js開発者を支援できる素晴らしいツールです。

Vetur

それは呼ばれていますVetur、300万回以上のダウンロードで非常に人気があり、見つけることができますVisualStudioマーケットプレイスで。

Vetur marketplace page

Veturのインストール

[インストール]ボタンをクリックすると、VSCodeのインストールパネルがトリガーされます。

Install Vetur in VS Code

VS Codeで拡張機能を開いて、「vetur」を検索することもできます。

この拡張機能は何を提供しますか？

構文の強調表示

Veturは、すべてのVueソースコードファイルの構文を強調表示します。

Veturがない場合、.vueファイルはVSCodeによって次のように表示されます。

Vue file without Vetur

Veturがインストールされている場合：

Vue file with Vetur

VS Codeは、ファイルに含まれるコードの種類を拡張子から認識できます。

単一ファイルコンポーネントを使用して、CSSからJavaScript、HTMLまで、同じファイル内にさまざまな種類のコードを混在させます。

VS Codeはデフォルトではこの種の状況を認識できず、Veturでは使用するコードの種類ごとに構文の強調表示を提供できます。

Veturは、とりわけ、

HTML
CSS
JavaScript
パグ
Haml
SCSS
PostCSS
サス
スタイラス
TypeScript

切れ端

シンタックスハイライトと同様に、VS Codeは.vueファイルの一部に含まれるコードの種類を判別できないため、私たち全員が愛するスニペット、つまり特殊なプラグインによって提供されるファイルに追加できるコードを提供できません。

Veturは、VSCodeにシングルファイルコンポーネントでお気に入りのスニペットを使用する機能を提供します。

IntelliSense

IntelliSenseは、オートコンプリートを使用して、異なる言語ごとにVeturによっても有効になります。

Autocomplete

足場

カスタムスニペットを有効にすることに加えて、Veturは独自のスニペットのセットを提供します。それぞれが独自の言語で特定のタグ（テンプレート、スクリプト、またはスタイル）を作成します。

vue
template with html
template with pug
script with JavaScript
script with TypeScript
style with CSS
style with CSS (scoped)
style with scss
style with scss (scoped)
style with less
style with less (scoped)
style with sass
style with sass (scoped)
style with postcss
style with postcss (scoped)
style with stylus
style with stylus (scoped)

入力した場合vue、単一ファイルコンポーネントのスターターパックを入手できます。

<template>
</template>
<script>
export default {
}
</script>
<style>
</style>

その他は特定のものであり、単一のコードブロックを作成します。

注:(スコープ）は、現在のコンポーネントにのみ適用されることを意味します

エメット

エメット、人気のあるHTML / CSS略語エンジンは、デフォルトでサポートされています。 Emmetの略語の1つを入力し、を押すとtabVS Codeは、それをHTMLに相当するものに自動的に展開します。

Emmet support

リンティングとエラーチェック

Veturはと統合しますESLint、を通ってVS CodeESLintプラグイン。

ESLint configuration

ESLint at work

コードのフォーマット

Veturは、保存時にファイル全体をフォーマットするためのコードフォーマットの自動サポートを提供します（"editor.formatOnSave"VSコード設定。

特定の言語の自動フォーマットを無効にするには、vetur.format.defaultFormatter.XXXXXにnoneVSCode設定で。これらの設定の1つを変更するには、文字列の検索を開始し、ユーザー設定（右側のパネル）で必要なものをオーバーライドします。

サポートされているほとんどの言語の使用きれい自動フォーマット用、業界標準になりつつあるツール。

Prettier構成を使用して、設定を決定します。

私の無料ダウンロードVueハンドブック