初心者webデザイナー・コーダーのための備忘録|Tech Stock 【テックストック】

Switch language

当Webサイトのコンテンツ内にはアフィリエイト広告、Googleアドセンス広告が含まれます。
広告主によって不適切な広告が表示されていることに気付いた方は、お手数でございますが該当の広告の「×」を押していただき、「この広告の表示を停止」し所定の流れに従ってください。

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

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

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

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

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

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


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

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

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


scssフォルダのscssファイルをコンパイルすると、cssフォルダに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」は意味不明ですが、その下の

"indentType": "tab",
"indentWidth": 1

が追記部分です。

私の場合は、インデントを「タブ」1つに設定したかったのでこのようにしています。




インデントを「スペース」にしたい場合は

"indentType": "space",
"indentWidth": 2

のように設定してみてください。

おわりに

まぁ、これを機にインデントを「スペース」に変えても良かったんですが、私がコーディングをレクチャーしている方に「このチームではインデントはタブで行きましょう」と伝えていたので、できればインデントは「タブ」にしたかったんです。

脱Atom をしてVSCodeに苦戦している方、「Live Sass Compiler」でのコンパイルがうまくいかない方の役に立てていただければ幸いです。

参考ページ

●「Live Sass Compiler」制作者さんの解説動画
https://www.youtube.com/watch?v=9J__JAgQbS0


●「Live Sass Compiler」拡張機能ページ
https://marketplace.visualstudio.com/items?itemName=glenn2223.live-sass#:~:text=%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB-,%E8%A8%AD%E5%AE%9A%E3%81%A8%E3%82%B3%E3%83%9E%E3%83%B3%E3%83%89%E3%81%AE%E3%83%89%E3%82%AD%E3%83%A5%E3%83%A1%E3%83%B3%E3%83%88,-%E3%82%88%E3%81%8F%E3%81%82%E3%82%8B%E8%B3%AA%E5%95%8F


●「Live Sass Compiler」設定方法ドキュメント ← 解決方法が載ってたページ
https://github.com/glenn2223/vscode-live-sass-compiler/blob/HEAD/docs/settings.md#:~:text=%C5%A6-,indentType,-space%20OR%20tab

●「Live Sass Compiler」設定方法ドキュメント (GitHub 版) ← こっちにも解決方法が載ってる

https://glenn2223.github.io/vscode-live-sass-compiler/docs/settings.html#:~:text=terminator%20to%20use-,%C5%A6indentType,-space%20OR%20tab

関連記事

2023年6月20日以降、SourceTreeでプッシュできなくなったのはBitbucketの SSHホスト鍵が更新されたから
2023年6月20日、Bitbucketの「SSHホスト鍵」が更新され、今までSSH接続していたユーザーはいきなりプッシュできなくなって焦っ
特定のユーザーでログインすると特定のテーマで表示されるプラグインをAIに作ってもらった
近頃、Chat GPT なるものが話題ですが、私もChat AI 的なサブスクリプションサービスを契約してみました。 お題目にもある通り、そ
【脱Atom】VSCodeでscssの出力先をcssフォルダ内にする方法
2022年12月15日にAtomエディタがサービス終了し、私を含め、コーディングエンジニアたちはAtomに替わるエディタソフトを探さなければ
Mac で sass-autocompile を使う方法
— 追記 @2023年10月26日 ——————R
WordPressで開発環境を構築する方法
今回はWeb制作の現場では、どのようにWordPressの開発環境を構築しているのかをお伝えしようと思います。 すでに公開しているWordP
必要最低限で必要十分なスペックを備えたおすすめPC|Webデザイナー・コーダーのためのPC選び
「あなたにピッタリなPCはこれだ!」と僭越ながらアドバイスさせていただく記事を書こうと思い、キーボードを叩いています。 こんにちは。管理人で



コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です