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

2022年12月15日にAtomエディタがサービス終了し、私を含め、コーディングエンジニアたちはAtomに替わるエディタソフトを探さなければいけなくなりました。

Atomの代替ソフトのおすすめとして、下記のエディタがあります。

• Visual Studio Code
• Brackets
• Sublime Text

他にもエディタはいくつかありますが拡張性が乏しかったり有料だったりするので私は上記のソフトをおすすめしておきます。

その中でも私はMicrosoftが提供している「Visual Studio Code（VSCode）」を選択しました。

多くのエンジニアがAtomからVSCodeに乗り換えているかもしれません。

私がVSCodeで初めに躓いたのはscssファイルの出力先をcssフォルダ内に設定するところでした。

私のエンジニア仲間も同様にその点が分からずAtomからVSCodeに完全に移行できずにいました。

やっとのことでそれを解決できてVSCodeに完全移行できましたので、本稿ではスクリーンショットや動画も交えてお伝えしていきます！

ぜひご活用ください！

拡張機能は「Live Sass Compiler」を使います

Atomでは「パッケージ」と言いますが、VSCodeでは「拡張機能」と言います。

scssのコンパイルには拡張機能「Live Sass Compiler」を使用します。

拡張機能のインストール方法はご存知かと思いますので割愛しますね。

Live Sass Compiler の設定ボタンを押して、「拡張機能の設定」を押してください。

次に、「Live Sass Compile > Settings: Formats」という項目を編集します。

他にもいろいろと設定項目がありますのでお好みで設定してください。

「Live Sass Compile > Settings: Formats」の「settings.json で編集」をクリックします。

小さくて見えないですね。

ここです。

クリックすると settings.json が開いて、設定コードが自動出力されます。
初期値はこのようになっています。

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

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

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

settings.json での設定は以上です。

本稿にたどり着いた方の多くはこれらの設定を他の記事で良くご覧になったかと思います。

しかし、この設定だけではscssファイルをコンパイルしてもcssフォルダ内に出力されなかったはずです。

私もそうでした。

あなたがこれまでご覧になった記事は、おそらく昔からVSCodeを使用していた方が書いた記事だったので、私が次にお伝えする「ワークスペースに登録する」という概念を伝え忘れていたのかと思います。

→→【重要】作業フォルダをワークスペースに登録する

次に、作業するフォルダをVSCodeのワークスペースに登録します。

この工程を行わなければscssをコンパイルしてもscssファイルと同じ階層にcssファイルが出力されてしまいます。

ワークスペースへの登録方法は動画の方が分かりやすいと思います。

文章でもご説明しますね。

ワークスペースへの登録はこのような流れです。

1. エクスプローラーからVSCodeに、作業するファルダをドラッグします。
2. 「このフォルダを信頼しますか？」のような画面が表示されます。
3. 「信頼する」をクリックします。

これで作業フォルダがワークスペースに登録されました。

設定は以上です。

ただし、scssの出力先がcssフォルダに設定されているのは、ワークスペースに登録した作業フォルダ内のみです。

ワークスペースの管理下ではないフォルダの中のscssファイルをコンパイルしてもcssフォルダに出力されませんのでご注意ください。

では、scssファイルをコンパイルしてお確かめください！

~~ 2023年12月8日 追記 ~~~~~~~~~~~~~~~~~~~~~~~~~~~

以上の設定をすることで、scssファイルをコンパイルするとcssフォルダの中に出力されるようになります。

しかし、人によってはここでも再び問題が発生します。

それは、コンパイルした後のcssファイルのインデントが「タブ」ではなく「スペース」で出力されることです。

インデントを「タブ」にするか「スペース」にするかという問題はチームでそれぞれ好みが分かれる事かと思います。

私のチームはインデントに「タブ」を使用していたためこれは重大な問題でした。

この問題も解決できましたので、必要な方は→こちらの記事をご覧ください。

~~ END 2023年12月8日 追記 ~~~~~~~~~~~~~~~~~~~~~~~~~~~

よろしければリアクションもしていただけると嬉しいです！

↓　↓　↓　↓　↓　↓