Hayaku for VS Code

CSSの略記をTabで展開する入力支援拡張です。Sublime Text用Hayakuの非公式移植版で、CSS、SCSS、Less、Sass、Stylus、PostCSSに対応します。Pythonのインストールは不要です。

インストール

VS Codeの拡張機能画面で Hayaku for VS Code を検索するか、Visual Studio Marketplaceからインストールしてください。

VSIXファイルを使用する場合は、拡張機能画面の「…」から「VSIXからのインストール」を選択します。更新後に設定が表示されない場合は、コマンドパレットで「Developer: Reload Window」を実行してください。

使い方

CSSルール内で略記を入力し、Tabを押します。

SCSS/Sassの$blackなどの変数や#{$name}の補間は、Hayakuの値補完の対象外です。通常どおり入力できます。

プロパティだけを展開してから値を入力することもできます。例えば、w → Tab → 10で単位を補完し、もう一度Tabを押すと確定します。

自作スニペット

入力した略記が自作スニペットのprefixと完全一致する場合は、スニペットを優先します。一致しなければHayakuで展開します。スニペット編集中のTabは入力欄の移動に使います。

ユーザーの言語別スニペット、グローバルスニペット、プロジェクトの.vscode/*.code-snippetsが対象です。保存先を検出できない場合は、コマンド「Hayaku: 自作スニペットの保存先を選択」で指定してください。

入力支援とショートカット

数値変更はカーソルが数値に隣接している場合に動作します。数値の一部を選択すると、その桁に応じて増減します。文字列、コメント、URL、16進色の数字は対象外です。

ブロック挿入は空白以外の文字がある行の末尾で動作します。行頭、行の途中、空行、セミコロンの後、テキスト選択中はVS Code標準の「下に行を挿入」を実行します。

CSSルール内の//をコメントの入力欄に変換する機能や、グラデーションの入力欄、角度の単位補完にも対応します。

設定

VS Codeの設定画面で次を検索してください。

@ext:tikusieg.hayaku-vscode

各機能は個別にオン・オフできます。主な設定は以下のとおりです。

入力中のキーワード補完だけを止めて、数値の単位補完を維持するには、hayaku.enableLiveKeywordCompletionをオフにしてください。キーワードの順送りとは別の設定です。

hayaku.aliasesで略記の展開先、hayaku.dictionaryで候補値や初期値、hayaku.optionsで単位・引用符・書式などを変更できます。

対応範囲

デスクトップ版VS CodeのCSS系言語を対象としています。HTML/Vue内の埋め込みCSSには対応していません。入力中の値補完はHayakuで作った単一の入力欄が対象です。Sublime Text版との完全互換ではありません。

フィードバック

不具合や改善提案はGitHub Issuesへお寄せください。使用言語、入力した略記、期待する展開結果を添えると確認しやすくなります。

ライセンス

MIT License。元のHayakuおよび同梱データの著作権表記を保持しています。CSSデータのライセンスはTHIRD_PARTY_LICENSES.txtをご覧ください。