Live Sass Compilerでコンパイル後にインデントがスペースになってしまう時の解決策【VSCode】

> HTML・CSS > Web初心者必見 > 開発環境整備

2023年12月08日更新

Table of Contents

Atomがサービス終了してVSCodeに乗り換えようとしていました

2022年12月15日にAtomエディタがサービス終了し、私はAtomからVSCodeに乗り換えることにしました。

初期設定をいじくったりしてAtomで制作していた時と同じような環境を作ろうと試行錯誤していました。

その中で大きくつまづいたのが、SCSSファイルのコンパイルです。

拡張機能はオーソドックスに「Live Sass Compiler」を使います。

そして、諸々を設定して、いざ、コンパイルしてみると、、、あら不思議！

scssフォルダ内にcssファイルがコンパイルされて生成されているではありませんか！

scssフォルダのscssファイルをコンパイルすると、cssフォルダにcssファイルを生成するようにしたかったのですが、なかなかうまくいかず大きくつまづきました。。。

どうにかこうにか、この問題は解決できました。
詳しくはこちらの記事をご参照ください。↓↓↓

【脱Atom】VSCodeでscssの出力先をcssフォルダ内にする方法

そして、一難去ってまた一難。

次にぶち当たった問題は、scssファイルをコンパイルして生成されたcssファイルのインデント（余白部分）が「スペース」になっていたのです。

コンパイル後にインデントが「スペース」になっている！

チームごとにそれぞれ好みでインデントを「スペース」にしたり「タブ」にしたりしていると思います。

私は「タブ」なんですね～。

「Live Sass Compiler」多くの記事で、下記のような紹介のされ方でこのようなコードが紹介されています。

初期値はこのようになっています。

	"liveSassCompile.settings.formats": [
		{
			"format": "expanded",
			"extensionName": ".css",
			"savePath": null,
			"savePathReplacementPairs": null
		}
	],

これを下記のように書き換えてください。

	"liveSassCompile.settings.formats": [
		{
			"format": "expanded",
			"extensionName": ".css",
			"savePath": "~/../css",
			"savePathReplacementPairs": null
		},
	],

といった内容です。（私の記事から引用しました。汗）

しかし、探しても探しても、コンパイル後のインデントを「スペース」にするか「タブ」にするか設定する方法は日本語の記事では見つかりませんでした。。。

結局、「Live Sass Compiler」の制作者さんの公式サイトで解説動画を見たり（英語だから何言ってるか分かりませんが）、英語のドキュメントを翻訳して解読したりして、ようやくインデントの設定方法を見つけることができました。

インデントを「タブ」に変更する書き方

長々とお待たせしました。
こちらが、インデントを「タブ」に変更する方法を記述した完成体です。

  "liveSassCompile.settings.formats": [
    {
      "format": "expanded",
      "extensionName": ".css",
      "savePath": "~/../css",
      "savePathReplacementPairs": null,
      "indentType": "tab",
      "indentWidth": 1
    },
  ],

相変わらず「savePathReplacementPairs」は意味不明ですが、その下の