Visual Studio Codeは、現在世界で最も使用されているコードエディターの1つです。あなたがそのような人気のあるエディタであるとき、人々は素晴らしいプラグインを構築します。そのようなプラグインの1つは、Vue.js開発者を支援できる素晴らしいツールです。
Visual Studio Codeは、現在世界で最も使用されているコードエディターの1つです。編集者には、多くのソフトウェア製品と同様に、サイクルがあります。 TextMateが開発者のお気に入りだったときは、Sublime Textでしたが、現在はVSCodeです。
人気があることのすごいところは、人々が想像するすべてのもののためのプラグインを構築することに多くの時間を費やしていることです。
そのようなプラグインの1つは、Vue.js開発者を支援できる素晴らしいツールです。
Vetur
それは呼ばれていますVetur、300万回以上のダウンロードで非常に人気があり、見つけることができますVisualStudioマーケットプレイスで。
Veturのインストール
[インストール]ボタンをクリックすると、VSCodeのインストールパネルがトリガーされます。
VS Codeで拡張機能を開いて、「vetur」を検索することもできます。
この拡張機能は何を提供しますか?
構文の強調表示
Veturは、すべてのVueソースコードファイルの構文を強調表示します。
Veturがない場合、.vueファイルはVSCodeによって次のように表示されます。
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によっても有効になります。
足場
カスタムスニペットを有効にすることに加えて、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つを入力し、を押すとtab
VS Codeは、それをHTMLに相当するものに自動的に展開します。
リンティングとエラーチェック
Veturはと統合しますESLint、 を通ってVS CodeESLintプラグイン。
コードのフォーマット
Veturは、保存時にファイル全体をフォーマットするためのコードフォーマットの自動サポートを提供します("editor.formatOnSave"
VSコード設定。
特定の言語の自動フォーマットを無効にするには、vetur.format.defaultFormatter.XXXXX
にnone
VSCode設定で。これらの設定の1つを変更するには、文字列の検索を開始し、ユーザー設定(右側のパネル)で必要なものをオーバーライドします。
サポートされているほとんどの言語の使用きれい自動フォーマット用、業界標準になりつつあるツール。
Prettier構成を使用して、設定を決定します。
私の無料ダウンロードVueハンドブック
その他のvueチュートリアル:
- Vue.jsの概要
- Vue.js CLI:使用方法を学ぶ
- Vue.js DevTools
- Vue開発用のVSCodeの構成
- Vue.jsで最初のアプリを作成する
- Vue.js単一ファイルコンポーネント
- Vue.jsテンプレートと補間
- Vue.jsディレクティブ
- Vue.jsメソッド
- Vue.jsの計算されたプロパティ
- CSSを使用したVue.jsコンポーネントのスタイリング
- Vue.jsウォッチャー
- Vueメソッドvsウォッチャーvs計算されたプロパティ
- Vue.jsフィルター
- Vue.jsコンポーネント
- Vue.jsスロット
- Vue.jsコンポーネントの小道具
- Vue.jsイベント
- Vue.jsコンポーネントの通信
- Vue.jsステートマネージャー、Vuex
- Vue、別のコンポーネント内のコンポーネントを使用する
- Vue、クラス名として小道具を使用する方法
- Vue.js単一ファイルコンポーネントでSCSSを使用する方法
- Vue.jsでTailwindを使用する
- Vueルーター
- Vueコンポーネントを動的に表示する
- Vue.jsチートシート
- Vuexを使用してVueデータをlocalStorageに保存する
- Vueを使用してクラスを動的に適用する方法
- Vue、vモデルの使い方
- Vue、データが関数でなければならない理由
- Roadmap to become a Vue.js developer in 2020