AppCode 2023.1 ヘルプ

スタイルシート

AppCode を使用すると、Sass(英語)、Less(英語)、SCSS(英語)、Stylus(英語) など、CSS(英語) およびそれにコンパイルされるさまざまな言語でスタイル定義を記述できます。

スタイルシートのドキュメントの検索、ルールセットの作成と移動、変数の導入などもできます。

始める前に

CSS プラグインが設定で有効になっていることを確認します。Ctrl+Alt+S を押して IDE 設定を開き、プラグインを選択します。インストール済みタブをクリックします。検索フィールドに CSS と入力します。プラグインの詳細については、プラグインのマッピングを参照してください。

コード補完

AppCode は、プロパティ、その値、セレクタ、変数、ミックスインにコード補完を提供します。

Style Sheets: basic code completion

完全なスタイルシートクラス

CSS、SCSS、Less、Sass のクラスと ID の補完は、HTML ファイル、さまざまな種類のテンプレート（Angular、Vue.js など）、JSX コードで利用できます。

HTML ファイルでは、AppCode は最初に style タグと link タグにリンクされたファイルからクラスと ID を提案します。一致する結果が見つからない場合、AppCode はプロジェクト内のすべてのスタイルシートファイルで定義されているシンボルも提案します。プロジェクトで定義されているすべてのクラスと ID をすぐに確認するには、入力を始める前に Ctrl+Space を 2 回押します。

Project-wide completion for Style Sheet symbols in HTML

外部ライブラリの完全なスタイルシートクラス

AppCode を使用すると、プロジェクトの依存関係にこれらのライブラリを追加せずに、Twitter Bootstrap(英語) または HTML ファイルの CDN からリンクされている他の CSS ライブラリからクラス名の補完を取得することもできます。

Enabling completion for an external CSS library

  1. 外部 CSS ライブラリへの CDN リンクを含む HTML ファイルを開きます。AppCode はリンクをハイライトします。

  2. ライブラリの補完を有効にするには、リンク上で Alt+Enter を押し、リストからライブラリのダウンロードを選択します。または、リンクの上にマウスを置き、ライブラリのダウンロードをクリックします。

ライブラリが設定 | 言語およびフレームワーク | JavaScript | ライブラリページの JavaScript ライブラリのリストに追加されます。詳細については、CDN リンクを介して追加されたライブラリの構成を参照してください。

Sass および SCSS セレクター一式

AppCode は、ネストされたセレクター(英語)とアンパサンドで作成されたセレクター (&)(英語) を含む Sass および SCSS セレクターの補完も提供します。

Completion for Sass and SCSS selectors

検索とナビゲーション

Navigation for SCSS selectors

  • スタイルシートシンボルの使用箇所を見つけるには、キャレットをその位置に置き、Alt+F7 を押します。プロジェクトの使用箇所を検索するから詳細を参照してください。

  • スタイルシートシンボルの使用箇所からその定義に移動するには、Ctrl+B を押します。定義へのナビゲーションは、クラス、ID、セレクター（ネストされたセレクター、アンパサンド & を含むセレクターを含む）、および変数とミックスインで使用できます。

    宣言に移動の詳細を参照してください。

ドキュメントの検索

プロパティと擬似要素については、AppCode は対応する MDN 記事からの要約を表示できます。この要約はドキュメントポップアップに表示され、プロパティとその値の簡単な説明、さまざまなブラウザーとの互換性に関する情報が表示されます。

Style sheets quick documentation: compatible browsers are listed

このプロパティがすべてのバージョンのブラウザーで使用可能な場合、AppCode はその互換性に関する情報を表示しません。

それ以外の場合、ドキュメントポップアップには、このプロパティをサポートするブラウザーとそのバージョンも一覧表示されます。

セレクターの場合、AppCode もその特異性(英語)を示します。

Documentation look-up: specificity fpr selectors

プロパティのドキュメントを表示

  • プロパティにキャレットを置き、Ctrl+Q を押すか、メインメニューから表示 | クイックドキュメントルックアップを選択します。

  • プロパティの上にマウスポインターを置くと、AppCode はドキュメントポップアップにそのプロパティの参照をすぐに表示します。

    この動作をオフにするか、ポップアップを速くまたは遅く表示するように構成できます。以下のドキュメントポップアップの動作の構成を参照してください。

ドキュメントポップアップの動作を構成する

  • コードシンボルの上にマウスを置いたときにドキュメントの表示を自動的にオフにするには、ポップアップで the Show Options Menu icon をクリックし、マウス移動時に表示するオプションを無効にします。

  • ドキュメントポップアップを速くまたは遅く表示するには、環境設定ダイアログ（Ctrl+Alt+S）を開き、エディター | 一般 | コード補完に移動してから、ドキュメントのポップアップを表示するチェックボックスを選択して遅延時間を指定します。

ブラウザーで MDN ドキュメントを開く

  • ドキュメントポップアップ Ctrl+Q で、下部のリンクをクリックします。

  • Shift+F1 を押すか、メインメニューから表示 | 外部ドキュメントを選択します。

フォーマット

AppCode ビルトインフォーマッターを使用すると、言語固有のコードスタイル要件を満たすために、スタイルシートコードの断片とファイル全体およびフォルダー全体を再フォーマットできます。コードを生成またはリファクタリングすると、フォーマッタも自動的に起動します。

  • スタイルシート言語のフォーマットを構成するには、環境設定ダイアログ（Ctrl+Alt+S）を開き、エディター | コードスタイル | スタイルシート | <あなたのスタイルシートの言語> に移動して、タブとインデント、スペース、中括弧と中括弧、ハードマージンとソフトマージンなどの言語固有の設定を構成します。

    CSS、SCSS、Less コンテキストでは、AppCode はデフォルトで、import ステートメントおよび URL で生成された文字列リテラルに二重引用符を使用します。単一引用符を使用するには、「その他」タブを開き、「引用符」リストから「単一」を選択します。

    再フォーマット後に選択したスタイルをファイル全体に適用するには、リストの整形時に強制するチェックボックスを選択します。

  • コードフラグメントを再フォーマットするには、エディターでそれを選択して Ctrl+Alt+L を押します。

  • ファイルまたはフォルダーを再フォーマットするには、プロジェクトツールウィンドウでそれを選択して Ctrl+Alt+L を押します。

詳細はコードの再フォーマットと再配置を参照してください。

または、Prettier(英語) フォーマッタを使用できます。詳細については、Prettier を参照してください。

リファクタリング

AppCode では、スタイルシートの式を変数に変換し、.css ファイルの var(--var-name) 構文、.scss および .sass ファイルの $ 構文を使用してこれらの変数を導入できます。

Style sheets: introducing a variable

変数の導入

  1. エディターで、変数に変換する式にキャレットを置き、Ctrl+Alt+V を押すか、コンテキストメニューまたはメインメニューからリファクタリング | 紹介する | 変数の導入を選択します。

  2. 選択した式が複数出現する場合は、複数の出現箇所が見つかりましたリストからこの出現箇所だけを置換または出現箇所をすべて置換を選択してください。

  3. .scss および .sass の場合、変数のグローバルスコープまたはローカルスコープを選択します。

  4. 赤い枠の付いたフィールドで、提案された変数名をそのまま使用するか、カスタム名を指定します。準備ができたら Enter を押します。

AppCode を使用すると、CSS、SCSS、Sass、Less ファイル内の既存の宣言から新しいルールセットを作成し、リファクタリングおよびインテンションアクションを使用してルールセット全体をファイル間で移動することさえできます。

ルールセットを導入する

  1. 紹介する宣言を選択します。宣言が 1 つだけ必要な場合は、その中にキャレットを配置します。

  2. Alt+Enter を押し、リストからルールセットを導入を選択します。

AppCode は、同じセレクターを使用して新しいルールセットを作成し、それに選択された宣言を移動します。選択範囲にコメント、ネストしたセレクタなどが含まれている場合、それらも新しいルールセットに移動されます。

ルールセットを他のファイルに移動する

  1. 移動するルールセットの任意の場所にキャレットを配置し、F6 を押します。

  2. 表示されたダイアログで、ルールセットを移動するファイルを指定します。指定されたファイルが存在しない場合、AppCode はそれを作成することを提案します。

  3. デフォルトでは、AppCode はルールセットが移動されるファイルを自動的に開きます。この動作を変更するには、エディターで開くチェックボックスをオフにします。

コピー、移動、名前変更などの一般的なリファクタリングも利用できます。

Rename refactoring

ブラウザーとの互換性を確認する

ドキュメントポップアップで検索するだけでなく、その場で特定のブラウザーとの互換性についてスタイルシートのプロパティを確認できます。このインスペクションは MDN ブラウザー互換性データ(英語)に基づいており、対象のブラウザーのいずれかでプロパティがサポートされていない場合は常に警告を表示します。

Style sheet compatibility inspection popup

互換性チェックをオンにする

  1. 環境設定ダイアログ（Ctrl+Alt+S）で、エディター | インスペクションに進みます。

  2. CSS ノードを展開してプロパティに対するブラウザーの互換性を選択します。オプションエリアで、ターゲットにするブラウザーとその最小バージョンを選択します。

CSS compatibility inspection settings

色の値を変更する

AppCode を使用すると、16 進コードを入力せずにスタイルシートの色の値を簡単に変更できます。

Editing color values in Style Sheets

色の選択

  1. 編集したいスタイルシートを開きます。

  2. color: と入力し、Ctrl+Space を押します。

  3. カスタムリストを選ぶには、候補リストまたは色の選択 ... から希望のカラー値を選択してください。

色の変更

  1. 編集するスタイルシートを開き、変更するカラープロパティを探します。

  2. ガターの色アイコンをクリックします。

    アイコンが表示されていない場合は、Alt+Enter を押してリストから色の変更を選択します。下記のガターにカラーアイコンを表示するにはを参照してください。

  3. 開いた色の選択ダイアログで、新しい色を選択し、選択をクリックします。

色のコードをプレビュー

  • AppCode は、各 color プロパティを対応する色のガターアイコンでマークします。色アイコンの上にマウスを置くと、AppCode はカラープレビューとその 16 進コードを示すポップアップを表示します。

    人間が判読可能な色名の代わりにコードを使用するには、Alt+Enter を押してリストからカラーを <カラーコードシステムに変換> を選択します。ここで、<カラーコードシステム> は HEX(英語)、HSL(英語)、HWB(英語)、RGB(英語) です

ガターにカラーアイコンを表示する

デフォルトでは、AppCode はガターにカラーアイコンを表示します。それらが隠されている場合は、いつでも返却できます。

  1. 環境設定ダイアログ（Ctrl+Alt+S）で、エディター | 一般 | ガターアイコンに移動します。ガターアイコンページが開きます。

  2. 共通領域で、色プレビューチェックボックスを選択します。

タグに適用されたスタイルを表示する

HTML および XHTML ファイルでは、AppCode は任意のタグに適用されたすべてのスタイルを表示できます。

Viewing the styles applied to the tag <body>

  • タグのコンテキストメニューからタグに適用されるスタイルを表示を選択します。

    AppCode は 2 つのペインで CSS スタイルツールウィンドウを開きます。左側のペインはタグのスタイルを示し、右側のペインはそれらの定義を示します。タグごとに、AppCode は別々のタブを開きます。

    ツールウィンドウから、ソースコード内のタグとプロパティの定義に移動できます。

    • タグに移動するには、左側のペインのツールバーの the Navigate to Tag toolbar button をクリックします。

    • プロパティの定義に移動するには、左側のペインでそれを選択し、右側のペインのツールバーの the Navigate to Style Sources button をクリックします。

構文ハイライトの構成

好みや習慣に応じて CSS 対応の構文ハイライトを設定できます。

  1. 環境設定ダイアログ（Ctrl+Alt+S）で、エディター | カラースキームの切り替え | CSS に進みます。

  2. 配色を選択するか、デフォルトから継承されたハイライト設定を受け入れるか、色とフォントの説明に従ってカスタマイズします。

SSH ターミナルを実行する CSS の最小化

関連ページ：

プラグインのインストール

プラグインは AppCode のコア機能を拡張します。例: プラグインをインストールして、次の機能を取得します。バージョン管理システム、課題追跡システム、ビルド管理サーバー、その他のツールとの統合。さまざまな言語とフレームワークのコーディング支援サポート。ショートカットのヒント、ライブプレビュー、ファイルウォッチャーなど。新しいプログラミング言語を学ぶのに役立つコーディング演習。プラグイン設定を開くを押して IDE 設定を開き、を選択します。マーケットプレースタブを使用して、JetBrains...

JavaScript ライブラリを構成する

言語と IDE のコンテキストでは、ライブラリはファイルまたはファイルのセットです。これらのファイルの関数とメソッドは、編集したプロジェクトコードから AppCode が取得する関数とメソッドに加えて、AppCode の内部知識に追加されます。プロジェクトのスコープでは、そのライブラリはデフォルトで書き込み保護されています。AppCode は、2 つの事前定義された自動生成ライブラリフォルダーを予約します。プロジェクト package.json のオブジェクトにリストされている Node.js パッ...

使用箇所の検索

コードを記述または編集するときに、変更または削除するコード要素に遭遇する場合があります。変更を行う前に、コード要素がどこで使用され、アプリケーションにどのように影響するかを確認することをお勧めします。使用箇所の検索アクションを使用すると、コードベース全体でコード要素の参照を検索できます。検索プロセスを管理し、単一のファイルのみで検索したり、検索をプロジェクト全体に拡張したり、特定の検索範囲を作成したりできます。さらに、使用箇所のハイライトの色を構成したり、用途の自動ハイライトを完全に無効にしたり...

コードナビゲーション

さまざまなアクションやポップアップを使用して、エディター内のコードをすばやく移動することができます。エディターウィンドウとツールウィンドウ間の移動に関する詳細情報については、エディターの基本を確認してください。キャレットで移動する後方に移動するには、を押します。前方に移動するには、を押します。最後に編集した場所に移動するには、を押します。エディターで現在のキャレットの場所を見つけるには、および矢印キーを押します。探しているキャレットの単語をハイライトするには、メインメニューからを選択し

コードの再フォーマットと再配置

AppCode を使用すると、現在のコードスタイルスキームで指定した要件に従ってコードを再フォーマットできます。コードの一部、ファイル全体、ファイルのグループ、ディレクトリ、モジュールを再フォーマットできます。コードの一部または一部のファイルを再フォーマットから除外することもできます。コードフラグメントを再フォーマットするエディターで、再フォーマットしたいコードフラグメントを選択します。再フォーマットする前に、選択したコードに適用されているコードスタイル設定を確認できます。を押してコードスタイ...

Prettier

Prettier は、.js、.ts、.css、.less、.scss、.vue、.json コードをフォーマットするためのツールです。AppCode では、Prettier で整形アクションを使用して、選択したコードフラグメントだけでなく、ファイル全体またはディレクトリ全体をフォーマットできます。AppCode は、Prettier をプロジェクト内の依存関係として、またはコンピューター上でグローバルにインストールするとすぐに、このアクションを追加します。特定のファイルが変更されるたびに再フォーマ...