Sass、SCSS、Less、PostCSS
RubyMine は、 Sass、 Less、 SCSS コードを CSS に変換するコンパイラーと連携します。 RubyMine でコンパイラーを使用するには、関連する事前定義済みテンプレートに基づいて ファイルウォッチャー として構成する必要があります。
始める前に
お使いのコンピューターに Node.js(英語) がインストールされていることを確認してください。
JetBrains マーケットプレイスからプラグインをインストールする説明に従って、 設定 | プラグイン ページの Marketplace タブに File Watchers プラグインをインストールして有効にします。
ファイルウォッチャー および Less または Sass に必要なプラグインが 設定 | プラグイン ページ、タブ インストール済み で有効化されていることを確認してください。 詳細については、 プラグインの管理を参照してください。
Sass/SCSS のインストール
組み込み ターミナル (Alt+F12) で次のように入力します。
npm install -g sassSass オフィシャル Web サイト(英語)の詳細を参照してください。
Less のインストール
組み込み ターミナル (Alt+F12) で次のように入力します。
npm install --global lessLess オフィシャル Web サイト(英語)の詳細を参照してください。
コードを CSS にコンパイルする
コードを自動的にコンパイルするには、コンパイラーをインストールし、ファイルへの変更を追跡してコンパイラーを実行する Sass、Less、SCSS File Watcher を構成する必要があります。
ファイルを開くと、RubyMine は現在のプロジェクトで適用可能なファイルウォッチャーが利用可能かどうかを確認します。 そのようなファイルウォッチャーが構成されているが無効になっている場合、RubyMine は構成されているファイルウォッチャーについて通知し、有効化を提案するポップアップを表示します。
現在のプロジェクトで該当するファイルウォッチャーが構成され有効化されている場合、RubyMine は 新規ウォッチャーダイアログで指定されたイベントが発生すると自動的にコンパイラーを起動します。
編集したファイルを自動保存してウォッチャーをトリガーする チェックボックスが選択されている場合、ソースウォッチに変更が加えられるとすぐに File Watcher が呼び出されます。
編集したファイルを自動保存してウォッチャーをトリガーする チェックボックスをオフにすると、保存時（、 Ctrl+S ）または RubyMine からフォーカスを移動したとき（フレーム非アクティブ化時）にファイルウォッチャーが開始されます。
詳細は File Watchers をご覧ください。
RubyMine は生成した出力を別のファイルとして作成します。 ファイルの名前は、ソース Sass、 Less、 SCSS ファイルの名前と拡張子 .css です。 生成されたファイルの場所は、 リフレッシュする出力パス フィールドがある 新規ウォッチャーダイアログ で定義されます。 ただし、 プロジェクトツリー では、それらはノードとして表示されるようになったソースファイルの下に表示されます。
File Watcher を作成する
設定 ダイアログ (Ctrl+Alt+S) で、 ツール の File Watchers をクリックします。 開く File Watchers ページには、構成済みのファイルウォッチャーのリストが表示されます。
をクリックするか、 Alt+Insert を押します。 使用するツールに応じて、リストから Less̲̲̲̲̲̲̲̲̲̲̲̲̲̲̲̲̲̲̲̲̲̲̲̲̲̲̲̲̲̲、 Sass、 SCSS の事前定義テンプレートを選択します。プログラム フィールドで、選択した事前定義テンプレートに応じてコンパイラーアーカイブへのパスを指定します。
Less 用の lessc 。
Sass/SCSS 用の sass 。
npm を使って標準インストールプロシージャを実行した場合、RubyMine は必要なファイルを自動で特定し、フィールドに自動入力します。 それ以外の場合は、パスを手動で入力するか、
をクリックして、表示されるダイアログでファイルの場所を選択します。File Watchers に記載されている手順に従います。
サンプル: SCSS を CSS にコンパイルする
プロジェクトが次のような構造になっていると仮定します：
ご覧のとおり、 _grid.scss は Page.scss にインポートされます。 以下の例は、プロジェクトを手動または自動で保存するときに Page.scss が CSS にコンパイルされる方法と、 _grid.scss への変更が生成された CSS ファイルにどのように反映されるかを示しています。
SCSS タイプのファイルウォッチャーを作成します。 設定 ダイアログ (Ctrl+Alt+S) を開き、 に移動し、ツールバーの
をクリックして、リストから SCSS を選択します。
開いた 新規ファイルウォッチャー ダイアログでは、必須フィールドはすべてすでに入力されています。
実際、これらの設定でコンパイラーは正常に実行できます。
たとえば grid.scss を変更し、31 行目の
margin-left: 0;をmargin-left: 12px;に置き換えてみましょう。 これによりファイルウォッチャーがトリガーされ、コンパイラーが Page.scss を処理します。 その結果、ファイルが 2 つ生成され、 Page.scss の下に入れ子で表示されます：コンパイルされた CSS コードを含む Page.css
デバッグセッション中にアプリをステップスルーできるソースマップを備えた Page.css.map 。
デフォルト設定でコンパイラーの実行には十分ですが、ファイルウォッチャーの動作をカスタマイズする方法を確認するために、設定内容を詳しく見ていきましょう。
FileWatcher をトリガーするアクションを変更する
プロジェクトが手動（ または Ctrl+S ）または自動で保存されるとすぐに、File Watcher が起動し、トランスパイラーを起動します。
通常、RubyMine からフォーカスを外すと (フレームが非アクティブ時)、コードは自動保存されます。 File Watchers では、File Watcher のスコープからファイルを編集するときにも自動保存が実行されます。 その結果、入力中は常にトランスパイラが実行され、パフォーマンスの問題が発生する可能性があります。 この問題を解決するには、編集したファイルの自動保存を抑制します。
Ctrl+Alt+S を押して設定を開き、 を選択します。 必要な File Watcher（この例では SCSS ）を選択し、ツールバーの 
をクリックします。 ファイルウォッチャーを編集 ダイアログで、 拡張オプション 領域を展開し、 編集したファイルを自動保存してウォッチャーをトリガーする チェックボックスをオフにします。
デフォルトでは、ファイルウォッチャーはスコープ内のファイルが RubyMine の外部で編集された場合でも起動します。 この動作を無効にして、内部で編集するときにのみファイルをトランスパイルするには、 外部の変更でウォッチャーをトリガーする チェックボックスをオフにします。
スコープを変更する
デフォルトで、RubyMine はプロジェクト全体の .scss 拡張機能を持つすべてのファイルの変更を監視します。 本例ではこれで問題ありません。 ただし、たとえば未コミットの変更だけを処理するようにスコープを変更できます。 大規模なプロジェクトでは、これにより時間を節約できます。
Ctrl+Alt+S を押して設定を開き、 を選択します。 必要な File Watcher（この例では SCSS ）を選択し、ツールバーの をクリックします。 ファイルウォッチャーを編集 ダイアログで、リストから該当するスコープを選択します。 詳しくは スコープとファイルの色 を参照してください。
カスタム出力場所
デフォルトでは、生成された .css および .css.map ファイルは元のファイルと同じフォルダーに保存され、 プロジェクト ツールウィンドウ (Alt+1) では元のファイルの子ファイルとして表示されます。 このデフォルトの動作を変更して、生成されたすべての .css および .css.map ファイルを別のフォルダーに保存することもできます。
簡単なケースから始めましょう。 プロジェクトルートに custom_output.scss ファイルがあるとします。
たとえば custom_output.scss を編集し、6 行目の fill-opacity: abs(50); を fill-opacity: abs(60); に置き換えてみましょう。 デフォルトの File Watcher 構成では、生成されたファイル custom_output.css および custom_output.css.map はプロジェクトルートに保存され、 custom_output.scss の子として表示されます。
すべての出力を別のフォルダー（たとえば、 css ）に保存すると便利です。 css フォルダーを出力場所として使用してカスタム SCSS_custom_output ファイルウォッチャーを作成しましょう。
Ctrl+Alt+S を押して設定を開き、 を選択します。 そして、 上記の手順に従ってSCSS File Watcher を作成します。
デフォルト設定を次のように更新します：
引数 フィールドに入力してください：
$FileName$:$ProjectFileDir$/css/$FileNameWithoutExtension$.cssリフレッシュする出力パス フィールドに入力してください：
$ProjectFileDir$/css/$FileNameWithoutExtension$.css:$ProjectFileDir$/css/$FileNameWithoutExtension$.css.map
新しいファイルウォッチャーを保存し、有効化されていることを確認します。
ここで、たとえば custom_output.scss を編集して 6 行目の fill-opacity: abs(50); を fill-opacity: abs(60); に置き換えると、RubyMine は css フォルダーを作成し、生成された custom_output.css および custom_output.css.map ファイルをその中に保存します。
カスタム出力場所: 元のフォルダー構造を保持する
次に、 .scss ファイルがフォルダー構造に格納されている例を考えてみましょう。例えば：
デフォルトの File Watcher では、生成されたファイルは元の .scss ファイルの隣に保存されます。
上記のようにカスタム File Watcher を使用すると、生成されたすべてのファイルが同じ css フォルダーに保存されます。
RubyMine でフォルダー構造を保持するには、別のカスタムファイルウォッチャーを作成しましょう。
Ctrl+Alt+S を押して設定を開き、 を選択します。 そして、 上記の手順に従ってSCSS File Watcher を作成します。
デフォルト設定を次のように更新します：
引数 フィールドに入力してください：
$FileName$:$ProjectFileDir$/css/$FileDirRelativeToProjectRoot$/$FileNameWithoutExtension$.cssリフレッシュする出力パス フィールドに入力してください：
$ProjectFileDir$/css/$FileDirRelativeToProjectRoot$/$FileNameWithoutExtension$.css:$ProjectFileDir$/css/$FileDirRelativeToProjectRoot$/$FileNameWithoutExtension$.css.map
新しいファイルウォッチャーを保存し、有効化されていることを確認します。
ここで、 custom_output_body.scss 、 custom_output_header.scss 、または custom_output_footer.scss を編集すると、RubyMine は styles_structured の構造を保持したサブフォルダー構成で css フォルダーを作成します。
サンプル: Less を CSS にコンパイルする
プロジェクトが次のような構造になっているとします：
以下の例は、プロジェクトを手動または自動で保存するときに my-styles.less が CSS にコンパイルされる方法と、 my-styles.less への変更が生成された CSS ファイルにどのように反映されるかを示しています。
Less̲̲̲̲̲̲̲̲̲̲̲̲̲̲̲̲̲̲̲̲̲̲̲̲̲̲̲̲̲̲ タイプのファイルウォッチャーを作成します。 設定 ダイアログ (Ctrl+Alt+S) を開き、 に移動し、ツールバーの
をクリックして、リストから Less̲̲̲̲̲̲̲̲̲̲̲̲̲̲̲̲̲̲̲̲̲̲̲̲̲̲̲̲̲̲ を選択します。
または、エディタータブの上部にある LESS を CSS にコンパイルするファイルウォッチャーを有効化しますか？ ペインで、 .less ファイルを含む はい をクリックします。
開いた 新規ファイルウォッチャー ダイアログでは、必須フィールドはすべてすでに入力されています。
実際、これらの設定でコンパイラーは正常に実行できます。
たとえば、 my-styles.less を編集して、1 行目の
@色の値を変更します。 これによりファイルウォッチャーがトリガーされます。 その結果、ファイルが 2 つ生成され、 my-styles.less の下に入れ子で表示されます：コンパイルされた CSS コードを含む my-styles.css
デバッグセッション中にアプリをステップスルーできるソースマップを備えた my-styles.css.map 。
デフォルト設定でコンパイラーの実行には十分ですが、ファイルウォッチャーの動作をカスタマイズする方法を確認するために、設定内容を詳しく見ていきましょう。
FileWatcher をトリガーするアクションを変更する
プロジェクトが手動（ または Ctrl+S ）または自動で保存されるとすぐに、File Watcher が起動し、トランスパイラーを起動します。
通常、RubyMine からフォーカスを外すと (フレームが非アクティブ時)、コードは自動保存されます。 File Watchers では、File Watcher のスコープからファイルを編集するときにも自動保存が実行されます。 その結果、入力中は常にトランスパイラが実行され、パフォーマンスの問題が発生する可能性があります。 この問題を解決するには、編集したファイルの自動保存を抑制します。
Ctrl+Alt+S を押して設定を開き、 を選択します。 必要な File Watcher（この例では Less̲̲̲̲̲̲̲̲̲̲̲̲̲̲̲̲̲̲̲̲̲̲̲̲̲̲̲̲̲̲ ）を選択し、ツールバーの をクリックします。 ファイルウォッチャーを編集 ダイアログで、 拡張オプション 領域を展開し、 編集したファイルを自動保存してウォッチャーをトリガーする チェックボックスをオフにします。
スコープを変更する
デフォルトで、RubyMine はプロジェクト全体の .scss 拡張機能を持つすべてのファイルの変更を監視します。 本例ではこれで問題ありません。 ただし、たとえば未コミットの変更だけを処理するようにスコープを変更できます。 大規模なプロジェクトでは、これにより時間を節約できます。
Ctrl+Alt+S を押して設定を開き、 を選択します。 必要な File Watcher（この例では Less̲̲̲̲̲̲̲̲̲̲̲̲̲̲̲̲̲̲̲̲̲̲̲̲̲̲̲̲̲̲ ）を選択し、ツールバーの をクリックします。 ファイルウォッチャーを編集 ダイアログで、リストから該当するスコープを選択します。 詳しくは スコープとファイルの色 を参照してください。
カスタム出力場所
デフォルトでは、生成された .css および .css.map ファイルは元のファイルと同じフォルダーに保存され、 プロジェクト ツールウィンドウ (Alt+1) では元のファイルの子ファイルとして表示されます。 このデフォルトの動作を変更して、生成されたすべての .css および .css.map ファイルを別のフォルダーに保存することもできます。
簡単なケースから始めましょう。 プロジェクトルートに custom_output.less ファイルがあるとします。
たとえば、 custom_output.less を編集して、1 行目の @色 の値を変更します。 デフォルトの File Watcher 構成では、生成されたファイル custom_output.css および custom_output.css.map はプロジェクトルートに保存され、 custom_output.less の子として表示されます。
すべての出力を別のフォルダー（たとえば、 css ）に保存すると便利です。 css フォルダーを出力場所として使用してカスタム Less_custom_output ファイルウォッチャーを作成しましょう。
Ctrl+Alt+S を押して設定を開き、 を選択します。 そして、 上記の手順に従ってLess と File Watcher を作成します。
デフォルト設定を次のように更新します：
引数 フィールドに入力してください：
$FileName$ $ProjectFileDir$/css/$FileNameWithoutExtension$.css --source-mapリフレッシュする出力パス フィールドに入力してください：
$ProjectFileDir$/css/$FileNameWithoutExtension$.css $ProjectFileDir$/css/$FileNameWithoutExtension$.css.map
新しいファイルウォッチャーを保存し、有効化されていることを確認します。
ここで、たとえば custom_output.less を編集して 1 行目の @色 の値を変更すると、RubyMine は css フォルダーを作成し、生成された custom_output.css および custom_output.css.map ファイルをそこに保存します。
カスタム出力場所: 元のフォルダー構造を保持する
次に、 .less ファイルがフォルダー構造に格納されている例を考えてみましょう。例えば：
デフォルトの File Watcher では、生成されたファイルは元の .less ファイルの隣に保存されます。
上記のようにカスタム File Watcher を使用すると、生成されたすべてのファイルが同じ css フォルダーに保存されます。
RubyMine でフォルダー構造を保持するには、別のカスタムファイルウォッチャーを作成しましょう。
Ctrl+Alt+S を押して設定を開き、 を選択します。 そして、 上記の手順に従ってLess と File Watcher を作成します。
デフォルト設定を次のように更新します：
引数 フィールドに入力してください：
$FileName$ $ProjectFileDir$/css/$FileDirRelativeToProjectRoot$/$FileNameWithoutExtension$.css --source-mapリフレッシュする出力パス フィールドに入力してください：
$ProjectFileDir$/css/$FileDirRelativeToProjectRoot$/$FileNameWithoutExtension$.css $ProjectFileDir$/css/$FileDirRelativeToProjectRoot$/$FileNameWithoutExtension$.css.map
新しいファイルウォッチャーを保存し、有効化されていることを確認します。
ここで、 custom_output_body.less 、 custom_output_header.less 、または custom_output_footer.less を編集すると、RubyMine は styles_structured の構造を保持したサブフォルダー構成で css フォルダーを作成します。
構文ハイライトの構成
Less/Sass/SCSS/PostCSS 対応の構文ハイライトは、お好みに合わせて設定できます。
設定 ダイアログ（Ctrl+Alt+S ）で に移動します。
カラースキームを選択し、デフォルトから継承されたハイライト設定を受け入れるか、 色とフォント の説明に従ってカスタマイズできます。
Sass および SCSS セレクター一式
RubyMine は Sass および SCSS のセレクターに対する補完機能を提供します。 ネストされたセレクターや アンパサンド (&) を使ったセレクターも含まれます。
クラウド補完と行全体補完
RubyMine は Sass/SCSS、Less、PostCSS コードで クラウド補完 と Full Line 補完 を提供します。
行全体コード補完機能は、ローカルで実行されるディープラーニングモデルを用いて、コード行全体を提案します。 RubyMine ではすぐに利用可能で、追加のライセンスは必要ありません。
行全体コード補完を有効にする
Ctrl+Alt+S を押して設定を開き、 エディター | 一般 | インライン補完 を選択します。
ローカル補完の Full Line 候補を有効化する チェックボックスを選択し、 CSS のような チェックボックスが選択されていることを確認します。
AI Assistant を搭載したクラウド補完では、プロジェクトのコンテキストに基づいて単一の行、コードブロック、さらには関数全体もリアルタイムで自動補完できます。
Cloud Completion は、コンテキストを考慮して構文的に妥当なソリューションを提案し、さまざまな コードインスペクションを事前に実行して、エラーとなるバリエーションを除外します。
クラウド補完を有効にする
Ctrl+Alt+S を押して設定を開き、 エディター | 一般 | インライン補完 を選択します。
クラウド補完候補を有効化する チェックボックスを選択し、 HTML. チェックボックスが選択されていることを確認します。
検索とナビゲーション
ドキュメントの検索
プロパティや疑似要素については、RubyMine が対応する MDN 記事から概要を表示できます。 この概要は ドキュメント ポップアップに表示され、プロパティとその値の簡単な説明と、対応する Web プラットフォームのベースラインステータス(英語)が表示されます。
セレクターには、RubyMine でその 詳細度も表示されます。
プロパティのドキュメントを表示
プロパティにキャレットを置き、 Ctrl+Q を押すか、メインメニューから を選択します。
プロパティにマウスカーソルを合わせると、RubyMine がすぐに ドキュメント ポップアップでその参照を表示します。
この動作をオフにすることも、ポップアップの表示を速くまたは遅くするように設定することもできます。以下の ドキュメントポップ上への動作の構成を参照してください。
ドキュメントポップアップの動作を設定する
コードシンボルの上にマウスを移動したときに自動でドキュメントを表示しないようにするには、ポップアップで
をクリックし、 マウス移動時に表示する オプションを無効化します。ドキュメント ポップ上へを速くまたは遅く表示するには、 設定 ダイアログ（Ctrl+Alt+S ）を開き、 に移動してから、 ドキュメントのポップアップを表示する チェックボックスを選択して遅延時間を指定します。
ブラウザーで MDN ドキュメントを開く
ドキュメント ポップアップ Ctrl+Q で、下部のリンクをクリックします。
Shift+F1 を押すか、メインメニューから を選択します。
フォーマット
RubyMine の組み込みフォーマッターでは、スタイルシートコードの一部やファイル、フォルダー全体を、言語ごとのコードスタイル要件に合わせて整形できます。 また、フォーマッタはコードを生成またはリファクタリングする際に自動的に起動します。
スタイルシート言語のフォーマットを構成するには、 設定 ダイアログ（Ctrl+Alt+S ）を開き、 に移動して、タブとインデント、スペース、中括弧と中括弧、ハードマージンとソフトマージンなどの言語固有の設定を構成します。
設定を変更すると、 プレビュー 領域に変更が書式にどのように影響するかが表示されます。
CSS、SCSS、Less のコンテキストでは、RubyMine はデフォルトで
importステートメントおよび URL で生成する文字列リテラルに double 引用符を使用します。 単一引用符を使用するには、「その他 」タブを開き、「引用符 」リストから「単一 」を選択します。再フォーマット後に選択したスタイルをファイル全体に適用するには、リストの フォーマット時に強制 チェックボックスを選択します。
コードフラグメントを再フォーマットするには、エディターでそれを選択して Ctrl+Alt+L を押します。
ファイルまたはフォルダーを再フォーマットするには、 プロジェクト ツールウィンドウ（Alt+1 ）で対象を選択し、 Ctrl+Alt+L を押します。 詳細については、 コードの再フォーマットと再配置を参照してください。
あるいは、 Prettier (Ctrl+Alt+Shift+P) を使用することもできます。
リファクタリング
RubyMine では、スタイルシート中の式を変数に変換し、 .css ファイルでは var(--var-name) 構文、 .scss または .sass ファイルでは $ 構文でこれらの変数を導入できます。
変数の導入
エディターで、変数に変換する式にキャレットを置き、 Ctrl+Alt+V を押すか、コンテキストメニューまたはメインメニューから を選択します。
選択した式が複数出現する場合は、 複数の出現箇所が見つかりました リストから この出現箇所だけを置換 または 出現箇所をすべて置換 を選択してください。
.scss および .sass の場合、変数の グローバルスコープまたは ローカルスコープを選択します。
赤い枠の付いたフィールドで、提案された変数名をそのまま使用するか、カスタム名を指定します。 準備ができたら Enter を押します。
RubyMine を使えば、CSS、SCSS、Sass、Less ファイルで既存の宣言から新しいルールセットを作成したり、リファクタリングやインテンションアクションでファイル間のルールセット移動も可能です。
ルールセットを導入する
導入する宣言を選択します。 宣言が 1 つだけ必要な場合は、宣言の中にキャレットを置くだけです。
Alt+Enter を押し、リストから ルールセットを導入 を選択します。
RubyMine が同じセレクターで新しいルールセットを作成し、選択された宣言をそこに移動します。 選択範囲にコメント、ネストしたセレクタなどが含まれている場合、それらも新しいルールセットに移動されます。
ルールセットを他のファイルに移動する
ルールセット内の移動する任意の場所にキャレットを置き、 F6 を押します。
表示されたダイアログで、ルールセットを移動するファイルを指定します。 指定したファイルが存在しない場合、RubyMine は作成を提案します。
デフォルトで、RubyMine はルールセットが移動されたファイルを自動的に開きます。 この動作を変更するには、 エディターで開く チェックボックスをオフにします。
コピー、 移動、 名前変更などの一般的なリファクタリングも利用できます。
ブラウザーとの互換性を確認する
ドキュメントポップアップで検索するだけでなく、その場で特定のブラウザーとの互換性についてスタイルシートのプロパティを確認できます。 このインスペクションは MDN ブラウザー互換性データ(英語)に基づいており、対象のブラウザーのいずれかでプロパティがサポートされていない場合は常に警告を表示します。
互換性チェックをオンにする
設定 ダイアログ（Ctrl+Alt+S ）で に移動します。
CSS」}]} Recognize limitations, per instructions; only the value of ノードを展開して プロパティは選択されたブラウザーと互換性がありません を選択します。 オプション エリアで、ターゲットにするブラウザーとその最小バージョンを選択します。
オプション 領域で、プロパティの可用性を確認するブラウザーを選択します。 選択したブラウザーのターゲットバージョンを指定します。
色の管理
RubyMine は CSS カラー の管理をサポートしており、 コード補完、 クイックドキュメント検索、 カラープレビュー などが利用できます。 絶対色、相対色、混合色のコーディング支援を提供します。
色を指定する
色の変更
ガター内のカラーアイコンをクリックし、ポップアップで目的の色を選択します。
または、キャレットを色のプロパティに置き、 Alt+Enter を押して、リストから 色の変更 を選択し、ポップアップで目的の色を選択します。
カラープレビューを切り替える
RubyMine は絶対色、相対色、混合色のプレビューを表示します。
デフォルトでは、RubyMine はガターにカラープレビューをアイコンとして表示します。 背景にカラープレビューを表示するには、 設定 ダイアログ（Ctrl+Alt+S ）を開き、 に移動して CSS 色プレビューを背景として表示する チェックボックスをオンにします。
カラープレビューガターアイコンを復元するには、 設定 ダイアログ (Ctrl+Alt+S) を開き、 に移動して、 共通 領域の 色プレビュー チェックボックスを選択します。
タグに適用されたスタイルを表示する
HTML および XHTML ファイルでは、RubyMine は任意のタグに適用されている全てのスタイルを表示できます。
タグのコンテキストメニューから を選択します。
RubyMine は CSS スタイル ツールウィンドウを二分割表示で開き、左側のペインにはタグのスタイル、右側のペインにはその定義が表示されます。 各タグごとに、RubyMine は個別のタブを開きます。
ツールウィンドウから、ソースコード内のタグやプロパティ定義へ移動できます。
タグに移動するには、左側のペインのツールバーの
をクリックします。プロパティの定義に移動するには、左側のペインでそれを選択し、右側のペインのツールバーの
をクリックします。