VS Codeのエージェントモードを拡張するには、を試してください!

CSS、SCSS、Less

Visual Studio Code は、CSS の .css、SCSS の .scss、Less の .less 形式のスタイルシートを編集するための組み込みサポートを提供しています。さらに、機能を強化するための拡張機能をインストールすることもできます。

ヒント: 上記の拡張機能タイルをクリックして、説明とレビューを読み、最適な拡張機能を決定してください。詳細は Marketplace でご確認ください。

IntelliSense

VS Code はセレクター、プロパティ、値のサポートを備えています。⌃Space (Windows、Linux では Ctrl+Space) を使用して、コンテキストに合わせたオプションのリストを取得できます。

IntelliSense in CSS

提案には、プロパティをサポートするブラウザーのリストを含む詳細なドキュメントが含まれています。選択したエントリの完全な説明テキストを表示するには、⌃Space (Windows、Linux では Ctrl+Space) を使用します。

シンタックスカラーリングとカラープレビュー

入力中に、構文ハイライトと色のコンテキストプレビューが表示されます。

Syntax and color

カラープレビューをクリックすると、色相、彩度、不透明度の設定をサポートする統合カラーピッカーが起動します。

Color picker in CSS

ヒント: ピッカーの上部にある色の文字列をクリックすることで、異なるカラーモードを切り替えることができます。

以下の設定を行うことで、VS Code のカラープレビューを非表示にできます。

"editor.colorDecorators": false

CSS、Less、SCSS のみで無効にするには、次を使用します。

"[css]": {
    "editor.colorDecorators": false
}

折りたたみ

行番号と行の開始点の間のガターにある折りたたみアイコンを使用して、ソースコードの領域を折りたたむことができます。折りたたみ領域は、すべての宣言 (例: ルール宣言) およびソースコード内の複数行コメントで利用可能です。

さらに、以下のリージョンマーカーを使用して折りたたみ領域を定義できます: CSS/SCSS/Less では /*#region*/ および /*#endregion*/、SCSS/Less では // #region および // #endregion

CSS、Less、SCSS でインデントベースの折りたたみに切り替えるには、次を使用します。

"[css]": {
    "editor.foldingStrategy": "indentation"
},

Emmet スニペット

Emmet の省略記法サポートは VS Code に組み込まれており、エディターのオートコンプリートリストには他の提案やスニペットとともに提案が表示されます。

ヒント: 有効な省略記法については、Emmet チートシートの CSS セクションを参照してください。

VS Code はユーザー定義スニペットもサポートしています。

構文検証とリンティング

CSS バージョン 2.1 以下、Sass バージョン 3.2 以下、Less バージョン 2.3 以下がサポートされています。

注: VS Code のデフォルトの CSS、Sass、または Less の検証を無効にするには、対応する .validate のユーザー設定またはワークスペース設定を false に設定します。

"css.validate": false

ファイル内のシンボルへ移動

現在のファイル内の関連する CSS シンボルに素早く移動するには、⇧⌘O (Windows、Linux では Ctrl+Shift+O) を押します。

ホバー

セレクターまたはプロパティにホバーすると、CSS ルールに一致する HTML スニペットが表示されます。

Hover in CSS

定義へ移動と参照の検索

これは、同じファイル内の Sass および Less 変数でサポートされています。CSS 変数ドラフト標準提案に従ってサポートされています。

CSS、SCSS、Less の @import および url() リンクの定義へのジャンプが可能です。

CSS カスタムデータ

VS Code の CSS サポートは、宣言型のカスタムデータ形式を通じて拡張できます。css.customData をカスタムデータ形式に従う JSON ファイルのリストに設定することで、新しい CSS プロパティ、アットディレクティブ、擬似クラス、擬似要素に対する VS Code の理解を強化できます。これにより、VS Code は提供されたプロパティ、アットディレクティブ、擬似クラス、擬似要素に対して補完やホバー情報などの言語サポートを提供します。

カスタムデータの使用方法については、vscode-custom-data リポジトリで詳しく読むことができます。

フォーマット

CSS 言語機能拡張は、フォーマッターも提供しています。このフォーマッターは CSS、LESS、SCSS で機能します。JS Beautify ライブラリによって実装されており、以下の設定があります。

同じ設定は lessscss にも存在します。

Sass と Less を CSS へトランスパイルする

VS Code は、統合されたタスクランナーを介して Sass および Less トランスパイラーと統合できます。これを使用して、.scss または .less ファイルを .css ファイルにトランスパイルできます。シンプルな Sass/Less ファイルのトランスパイルについて見ていきましょう。

ステップ 1: Sass または Less トランスパイラーをインストールする

このチュートリアルでは、sass または less Node.js モジュールを使用します。

注: Node.js および npm パッケージマネージャーがまだインストールされていない場合は、このチュートリアルを進めるためにインストールする必要があります。ご使用のプラットフォーム用の Node.js をインストールしてください。Node Package Manager (npm) は Node.js ディストリビューションに含まれています。npm が PATH に含まれるように、新しいターミナル (コマンドプロンプト) を開く必要があります。

npm install -g sass less

ステップ 2: シンプルな Sass または Less ファイルを作成する

空のフォルダーで VS Code を開き、styles.scss または styles.less ファイルを作成します。そのファイルに以下のコードを配置します。

$padding: 6px;

nav {
  ul {
    margin: 0;
    padding: $padding;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: $padding 12px;
    text-decoration: none;
  }
}

上記ファイルの Less バージョンの場合、$padding@padding に変更するだけです。

注: これは非常にシンプルな例であるため、両方のファイルタイプでソースコードはほとんど同じです。より高度なシナリオでは、構文と構造が大きく異なります。

ステップ 3: tasks.json を作成する

次のステップは、タスク構成を設定することです。これを行うには、ターミナル > タスクの構成 を実行し、テンプレートから tasks.json ファイルを作成 をクリックします。表示される選択ダイアログで、その他 を選択します。

これにより、ワークスペースの .vscode フォルダーにサンプル tasks.json ファイルが作成されます。ファイルの初期バージョンには任意のコマンドを実行する例が含まれていますが、代わりに Sass/Less のトランスパイル用にその構成を変更します。

// Sass configuration
{
  // See https://go.microsoft.com/fwlink/?LinkId=733558
  // for the documentation about the tasks.json format
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Sass Compile",
      "type": "shell",
      "command": "sass styles.scss styles.css",
      "group": "build"
    }
  ]
}
// Less configuration
{
  // See https://go.microsoft.com/fwlink/?LinkId=733558
  // for the documentation about the tasks.json format
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Less Compile",
      "type": "shell",
      "command": "lessc styles.less styles.css",
      "group": "build"
    }
  ]
}

ステップ 4: ビルドタスクを実行する

このファイルにはこのコマンドしかないので、⇧⌘B (Windows、Linux では Ctrl+Shift+B) を押して実行できます (ビルドタスクの実行)。サンプルの Sass/Less ファイルにはコンパイルの問題がないはずなので、タスクを実行すると対応する styles.css ファイルが作成されるだけです。

より複雑な環境では複数のビルドタスクが存在する可能性があるため、⇧⌘B (Windows、Linux では Ctrl+Shift+B) を押した後 (ビルドタスクの実行)、実行するタスクを選択するよう求められます。さらに、コンパイルの問題 (エラーや警告) の出力スキャンを許可します。コンパイラーに応じて、ツール出力からエラーや警告をスキャンするための適切なエントリをリストから選択してください。出力のスキャンを希望しない場合は、提示されたリストから ビルド出力をスキャンしない を選択します。

この時点で、ファイルリストに styles.css という追加のファイルが表示されるはずです。

そのタスクをデフォルトのビルドタスクにするには、グローバルメニューのターミナルから既定のビルドタスクの構成を実行し、提示されたリストから対応するSassまたはLessタスクを選択します。

注: ビルドが失敗したり、「ディレクトリをコンパイルする際は出力ディレクトリを指定する必要があります」のようなエラーメッセージが表示されたりする場合は、tasks.json のファイル名がディスク上のファイル名と一致していることを確認してください。コマンドラインから sass styles.scss styles.css を実行することで、いつでもビルドをテストできます。

Sass/Less のコンパイルを自動化する

もう一歩進んで、VS Code で Sass/Less のコンパイルを自動化してみましょう。以前と同じタスクランナー統合を使用しますが、いくつかの変更を加えます。

ステップ 1: Gulp といくつかのプラグインをインストールする

Sass/Less のコンパイルを自動化するタスクを作成するために、Gulp を使用します。また、作業を少し簡単にするためにgulp-sass プラグインも使用します。Less プラグインはgulp-less です。

Gulp をグローバル (-g スイッチ) とローカルの両方にインストールする必要があります。

npm install -g gulp
npm install gulp gulp-sass gulp-less

注: gulp-sass および gulp-less は、以前使用していた sass および lessc モジュール用の Gulp プラグインです。その他にも多くの Gulp Sass および Less プラグインや Grunt 用のプラグインを利用できます。

Gulp のインストールが成功したかどうかは、ターミナルで gulp -v と入力してテストできます。グローバル (CLI) とローカルの両方のインストールバージョンが表示されるはずです。

ステップ 2: シンプルな Gulp タスクを作成する

以前と同じフォルダー ( .vscode フォルダー内に styles.scss/styles.lesstasks.json が含まれている) で VS Code を開き、ルートに gulpfile.js を作成します。

gulpfile.js ファイルに以下のコードを配置します。

// Sass configuration
var gulp = require('gulp');
var sass = require('gulp-sass')(require('sass'));

gulp.task('sass', function(cb) {
  gulp
    .src('*.scss')
    .pipe(sass())
    .pipe(
      gulp.dest(function(f) {
        return f.base;
      })
    );
  cb();
});

gulp.task(
  'default',
  gulp.series('sass', function(cb) {
    gulp.watch('*.scss', gulp.series('sass'));
    cb();
  })
);
// Less configuration
var gulp = require('gulp');
var less = require('gulp-less');

gulp.task('less', function(cb) {
  gulp
    .src('*.less')
    .pipe(less())
    .pipe(
      gulp.dest(function(f) {
        return f.base;
      })
    );
  cb();
});

gulp.task(
  'default',
  gulp.series('less', function(cb) {
    gulp.watch('*.less', gulp.series('less'));
    cb();
  })
);

ここで何が起きているのでしょうか?

  1. default gulp タスクは、起動時にまず sass または less タスクを一度実行します。
  2. 次に、ワークスペースのルートにあるすべての SCSS/Less ファイルの変更を監視します。例えば、VS Code で現在開いているフォルダーなどです。
  3. 変更された SCSS/Less ファイルのセットを取得し、それぞれに対応するコンパイラー (例: gulp-sassgulp-less) を通して実行します。
  4. これで、元の SCSS/Less ファイルと同じ名前の CSS ファイルのセットができました。これらのファイルを同じディレクトリに配置します。

ステップ 3: gulp のデフォルトタスクを実行する

VS Code とのタスク統合を完了するには、先ほど作成したデフォルトの Gulp タスクを実行するように、以前のタスク構成を変更する必要があります。tasks.json ファイルを削除するか、"version": "2.0.0" プロパティだけを残して空にすることができます。次に、グローバルメニューのターミナルからタスクの実行を実行します。Gulp ファイルで定義されたタスクをリストアップするピッカーが表示されることを確認してください。gulp: default を選択してタスクを開始します。コンパイルの問題の出力スキャンを許可します。コンパイラーに応じて、ツール出力からエラーや警告をスキャンするための適切なエントリをリストから選択してください。出力のスキャンを希望しない場合は、提示されたリストからビルド出力をスキャンしないを選択します。この時点で、Less または SASS ファイルを作成または変更すると、対応する CSS ファイルが生成され、保存時に変更が反映されるのがわかります。さらに効率化するために自動保存を有効にすることもできます。

⇧⌘B (Windows、Linux では Ctrl+Shift+B) を押したときにgulp: defaultタスクをデフォルトのビルドタスクとして実行したい場合は、グローバルメニューのターミナルから既定のビルドタスクの構成を実行し、提示されたリストからgulp: defaultを選択します。

ステップ 4: gulp のデフォルトタスクを終了する

gulp: default タスクはバックグラウンドで実行され、Sass/Less ファイルへの変更を監視します。タスクを停止したい場合は、グローバルメニューのターミナルからタスクの終了を使用できます。

CSS、SCSS、Less の設定をカスタマイズする

以下のリント警告をユーザー設定とワークスペース設定として構成できます。

validate 設定を使用すると、組み込みの検証をオフにできます。これは、別のリンターを使用する場合に行います。

ID 説明 既定値
css.validate すべての CSS 検証を有効または無効にする true
less.validate すべての Less 検証を有効または無効にする true
scss.validate すべての SCSS 検証を有効または無効にする true

CSS のオプションを設定するには、ID のプレフィックスとして css.lint. を使用します。SCSS と Less の場合は、それぞれ scss.lint.less.lint. を使用します。

リントチェックを有効にする場合は設定を warning または error に、無効にする場合は ignore に設定します。リントチェックは入力中に実行されます。

ID 説明 既定値
validate すべての検証を有効または無効にする true
compatibleVendorPrefixes ベンダー固有のプレフィックスを持つプロパティ (例: -webkit-transition) を使用する場合、他のすべてのベンダー固有のプロパティ (例: -moz-transition-ms-transition-o-transition) も含めるようにしてください。 ignore
vendorPrefix ベンダー固有のプレフィックスを持つプロパティ (例: -webkit-transition) を使用する場合、標準のプロパティが存在する場合はそれも必ず含めてください (例: transition)。 warning
duplicateProperties 同じルールセット内の重複するプロパティについて警告する ignore
emptyRules 空のルールセットについて警告する warning
importStatement import ステートメントが順次ロードされ、ウェブページのパフォーマンスに悪影響を与えるため、import ステートメントの使用について警告する ignore
boxModel padding または border を使用する場合、width または height を使用しない ignore
universalSelector ユニバーサルセレクター * は遅いことが知られており、避けるべきであるため、その使用について警告する ignore
zeroUnits 単位を伴うゼロ (例: 0em) について警告する。ゼロには単位は不要です。 ignore
fontFaceProperties srcfont-family プロパティを定義せずに @font-face ルールを使用した場合に警告する warning
hexColorLength 3桁または6桁の16進数ではない16進数を使用した場合に警告する error
argumentsInColorFunction カラー関数 (例: rgb) のパラメータ数が無効な場合に警告する error
unknownProperties 未知のプロパティを使用した場合に警告する warning
ieHack IE ハック *propertyName または _propertyName を使用した場合に警告する ignore
unknownVendorSpecificProperties 未知のベンダー固有のプロパティを使用した場合に警告する ignore
propertyIgnoredDueToDisplay display のために無視されるプロパティを使用した場合に警告する。例えば、display: inline の場合、widthheightmargin-topmargin-bottomfloat プロパティは効果がありません。 warning
important !important を使用した場合に警告する。これは、CSS 全体の詳細度が手に負えなくなり、リファクタリングが必要であることを示唆しているためです。 ignore
float float を使用した場合に警告する。float は、レイアウトの一側面が変更されると簡単に壊れてしまう脆弱な CSS につながるためです。 ignore
idSelector ID のセレクター (#id) を使用した場合に警告する。これらのルールは HTML と密接に結合しすぎているため、セレクターに ID を含めるべきではありません。 ignore

次のステップ

さらに読む

  • タスクの構成 - SCSS と Less を CSS にトランスパイルするのに役立つタスクについて詳しく掘り下げます。
  • 基本的な編集 - 強力な VS Code エディターについて学習します。
  • コード ナビゲーション - ソースコード内をすばやく移動します。
  • HTML - CSS は始まりに過ぎません。HTML も VS Code で非常に優れたサポートが提供されています。

よくある質問

VS Code はカラーピッカーを提供していますか?

はい、CSS の色の参照にホバーすると、カラーピッカーが表示されます。

インデントベースの Sass 構文 (.sass) はサポートされていますか?

いいえ、しかし Marketplace には、インデント形式の Sass をサポートするいくつかの拡張機能があります。例えば、元々 Robin Bentley によって作成され、現在は Leonard Grosoli によって管理されているSass 拡張機能などです。