Vue.js
WebStormは、ユーザーインターフェースと高度なシングルページアプリケーションの開発を目的としたVue.js(英語)フレームワークと統合されています。
始める前に
お使いのコンピューターにNode.js(英語)がインストールされていることを確認してください。
プラグインのページでVue.jsバンドルプラグインが有効になっていることを確認してください。詳細については、プラグインを管理するを参照してください。
新しいVue.jsアプリケーションの作成
新しいVue.jsアプリを作成するための推奨される方法はVue CLI(英語)です。WebStormはnpx(英語)を使用してダウンロードして実行します。
もちろん、Vue CLIを自分でダウンロードすることも、空のWebStormプロジェクトを作成してそこにVue.jsをインストールすることもできます。
アプリケーションを作成するには
メインメニューから を選択するか、ようこそ画面で新規プロジェクトの作成をクリックします。新規プロジェクトの作成ダイアログが開きます。
左側のペインで、Vue.jsを選択します。
右側のペインで:
Node インタープリターフィールドに、使用するNode.jsインタープリターを指定します。リストから設定済みのインタープリターを選択するか、追加を選択して新しいインタープリターを設定します。
Vue CLIリストから、npx --package @vue / cli vueを選択します。
または、npmバージョン5.1以前の場合、ターミナル Alt+F12で
npm install --g @vue/cli
を実行して、@vue/cli
パッケージを自分でインストールします。アプリケーションを作成するときに、@vue/cli
パッケージが保存されているフォルダーを選択します。babel(英語)とESLint(英語)でアプリケーションをブートストラップするには、デフォルトのプロジェクト設定を使用するチェックボックスを選択します。
作成をクリックすると、WebStormは必要なすべての設定ファイルを含むVue.js固有のプロジェクトを生成し、必要な依存関係をダウンロードします。実行ツールウィンドウで進行状況を確認できます。
空のWebStormプロジェクトを作成するには
メインメニューから を選択するか、ようこそ画面で新規プロジェクトの作成をクリックします。新規プロジェクトの作成ダイアログが開きます。
左側のペインで、空のプロジェクトを選択します。
作成をクリックすると、WebStormが作成され、空のプロジェクトが開きます。
空のプロジェクトにVue.jsをインストールするには
既存のVue.jsアプリケーションから始める
既存のVue.jsアプリケーションの開発を続けるには、WebStormで開き、必要な依存関係をダウンロードします。
既にあなたのマシンにあるアプリケーションソースを開くには
バージョン管理からアプリケーションソースをチェックアウトするには
ようこそ画面でバージョン管理から取得をクリックするか、メインメニューから を選択します。
呼び出されたダイアログで、リストからバージョン管理システムを選択し、アプリケーションソースをチェックアウトするリポジトリを指定します。
依存関係をダウンロードするには
ポップアップで実行 'npm install'をクリックしてください。
Vue.jsコンポーネントの作成
WebStormは .vue ファイルタイプを認識し、Vue.jsコンポーネント用の専用.vueファイルテンプレートを提供します。
Vue.jsコンポーネントを作成するには
プロジェクトツールウィンドウで、新しいコンポーネントの親フォルダーを選択し、リストからVue コンポーネントを選択します。
また、既存のコンポーネントから新しいVue.jsコンポーネントをコピーして貼り付けることなく、専用のインテンションアクションまたはリファクタリングを使用して抽出することもできます。新しく抽出されたテンプレートで使用されるすべてのデータとメソッドは、親コンポーネントに残ります。WebStormは、プロパティーとともに新しいコンポーネントに渡し、関連するスタイルをコピーします。
コンポーネントを抽出するには
抽出してコンポーネント抽出を呼び出すテンプレートフラグメントを選択します。
インテンションアクションを使用するには、Alt+Enterを押してから、リストからVue コンポーネントの抽出を選択します。
リファクタリングを使用するには、メインメニューまたは選択範囲のコンテキストメニューから
を選択します。
新しいコンポーネントの名前を入力します。この名前が既に使用されているか無効である場合、WebStormは警告を表示します。それ以外の場合は、新しい単一ファイルコンポーネントが作成され、親コンポーネントにインポートされます。
コーディング支援
.vue ファイルでは、WebStormは script
, style
、および template
ブロックを認識します。 script
タグ内にはJavaScriptとTypeScriptを、style
タグ内にはスタイルシート言語を、template
タグ内にはHTMLとPugを使用できます。
script
タグ内でTypeScriptを使用すると、WebStormは型チェックのためにTypeScript 言語サービス(英語)を呼び出し、TypeScriptツールウィンドウのエラーおよびコンパイル・エラータブに検出されたエラーを表示します。詳細はTypeScriptの確認を参照してください。
コードを完成させる
デフォルトでは、WebStormは
script
ブロック内のECMAScript 6およびstyle
ブロック内のCSSにコード補完を提供します。template
タグ、コード補完 Ctrl+Space 内、およびVue.jsコンポーネントと属性の定義 Ctrl+B へのナビゲーションが利用可能です。WebStormは、Vue.jsのプロパティー、
data
オブジェクトのプロパティー、計算されたプロパティー、およびメソッドの補完も提案します。WebStormは、ライブラリーコンポーネントおよびプロジェクトで定義されたコンポーネントからのスロット(英語)名の補完を提供します。
プロジェクトに名前付きスロットを持つコンポーネントが含まれている場合、WebStormは
template
タグのv-slot
ディレクティブにこれらの名前の提案を表示します。Vuetify(英語)、Quasar(英語)、またはBootstrapVue(英語)を使用している場合、スロット名にコード補完も使用できます。
コンポーネントが複数のファイル(英語)で定義されている場合(英語)、WebStormはコンポーネントのパーツ間のリンクを認識し、プロパティー、データ、およびメソッドに適切なコード補完を提供します。
例:コンポーネントの一部が
src
属性を介して vue ファイルにリンクされている個別のJavaScriptファイルとスタイリングファイルで定義されている場合、JavaScriptで定義されたプロパティーはメソッドのようにテンプレートで適切に完了します。コンポーネントの
template
プロパティーのテンプレートリテラル内のテンプレートは、このコードがtemplate
タグ内にあるかのように完了します。補完は、テンプレートが別のHTMLファイルで定義され、
template
プロパティーにリンクされている場合にも利用できます。
TSLintを使用したVue.jsコンポーネントのLint TypeScript
typescript-tslint-plugin(英語)を使用して、Vue.js単一ファイルコンポーネントのTypeScriptコードをリントできます。
typescript-tslint-plugin
は現在のプロジェクトにインストールされているTypeScriptでのみ機能するため、プロジェクト node_modules フォルダーの typescript
パッケージが、設定/環境設定ダイアログ(Ctrl+Alt+S)のTypeScriptページのTypeScriptフィールドで選択されていることを確認してください。
typescript-tslint-pluginをインストールして構成する
埋め込みターミナル(Alt+F12)に次のように入力します。
npm install --save-dev typescript-tslint-plugin
tsconfig.json ファイルの
plugins
プロパティーで、次のように入力します。{ "compilerOptions": { "plugins": [{"name": "typescript-tslint-plugin"}] } }typescript-tslint-plugin
を使用している場合、TSLintはTypeScript 言語サービス(英語)を介して実行されているため、WebStormとのTSLint統合を無効にして、エラー報告の重複を回避できます。そのためには、設定/環境設定ダイアログ(Ctrl+Alt+S)を開き、 に移動してTSLint を使用不可にするを選択します。
Vue.jsライブテンプレートによるコードの生成
WebStormを使用すると、Sarah Drasnerによって作成(英語)されたコレクション(英語)から調整されたVue.jsのLiveテンプレートのコレクションを使用できます。
Vue.js Liveテンプレートを使用するには
テンプレートの省略形を入力するか、Ctrl+J を押して、使用可能なテンプレートのリストから選択します。
テンプレートを展開するには、Tabを押します。
テンプレート内のある変数から別の変数に移動するには、Tab をもう一度押します。
PrettierによるVue.jsコードの再フォーマット
Prettier(英語)は .js , .ts , .css , .less , .scss , .vue、および .json コードをフォーマットするためのツールです。WebStormでは、Prettier で再フォーマットアクションを使用して、選択したコードフラグメントとファイル全体またはディレクトリー全体をフォーマットできます。WebStormは、Prettierをプロジェクト内の依存関係としてインストールすると同時に、またはグローバルにコンピューターにインストールすると同時に追加します。Prettierからさらに学びましょう。
Prettierでコードを再フォーマットするには
WebStormは、Prettierの構成からWebStormコードスタイル設定にキーコードスタイルルールを適用して、生成されたコード(リファクタリングやクイックフィックス後など)とPrettierですでに処理されたコードが一貫してフォーマットされるようにできます。
Prettierコードスタイルルールを適用するには
Prettierが有効になっているプロジェクトで、package.json を開き、タブ上部のペインで はい をクリックします。
Prettierコードスタイルを再適用するには(ペインでいいえをクリックするかコードスタイルを変更した後)、Ctrl+Shift+A を押してアクションの検索リストからPrettierコードスタイルルールを適用を選択します。
関連ページ:

プラグイン
WindowsとLinux用のmacOS用このページを使用してプラグインを管理します。プラグインリポジトリの閲覧、プラグインのインストール、削除、有効化、無効化、および更新を行います。主なコントロール:マーケットプレースこのタブを使用して、JetBrainsプラグインリポジトリからプラグインをブラウ...

プラグインを管理する
プラグインはWebStormのコア機能を拡張します。バージョン管理システム、アプリケーションサーバー、その他のツールとの統合を提供、さまざまな言語およびフレームワークに対するコーディング支援サポートを追加する、ショートカットヒント、ライブプレビュー、ファイルウォッチャーなどを使用して、生産性をBoo...

一般
WindowsとLinux用のmacOS用設定/環境設定ダイアログの一般ページを使用して、エディターの動作を設定し、その表示をカスタマイズします。マウス動作の詳細ダブルクリックで選択したときに「キャメルハンプ」の単語設定を尊重するダブルクリックして単語を選択したときに、WebStormがキャメルハン...

TypeScript
WebStormはTypeScriptソースコードの開発、実行、およびデバッグをサポートしています。WebStormは.tsファイルを認識し、あなたからの追加のステップなしで編集するためのコーディング支援のフルレンジを提供します。TypeScriptファイルはアイコンでマークされています。TypeS...

Prettier
Prettierは.js,.ts,.css,.less,.scss,.vue、および.jsonコードをフォーマットするためのツールです。WebStormでは、Prettier で再フォーマットアクションを使用して、選択したコードフラグメントとファイル全体またはディレクトリー全体をフォーマットできます...

TSLint
WebStormの内部からTSLintコード検証ツールを使用し、アプリケーションを実行することなくTypeScriptコードでよくある間違いを確認できます。ツールが起動すると、開いているすべてのTypeScriptファイルが検出され、検出された問題がマークされます。また、TypeScriptコードを...