【CSS/SCSS】VSCodeのタブをスペース2つにする方法

みなさんはCSS,SCSSを書くときに、インデントはどのように入力しているでしょうか。

大概はTabキーを使っていると思います。

VSCodeにおいて、Tabキーでインデントを打つと当然ながらタブが出力されます。

しかし、GoogleのHTML/CSS/Javascriptのコーディング規約によるとインデントはスペース２つが推奨されているのです。

以下、コーディング規約の抜粋です。

2.2 General Formatting Rules
2.2.1 Indentation

Indent by 2 spaces at a time.
Don’t use tabs or mix tabs and spaces for indentation.

Google HTML/CSS Style Guide

なるほど、タブは使うなと。

でもスペースキーを２回打ってインデントするのは面倒ですよね。

なので、VSCodeのTabキーでのインデントをスペース2つにしてしまいましょう。

ここではSCSSファイルにおいてインデントをスペース２つにしてみます。

方法としてはConfigure language specific settingsをちょっと変更してやればOKです。

以下、手順です。

1. Ctrl+Shift+Pでコマンドパレットを開き、Preferences: Configure language specific settingsと入力し選択してユーザー用設定を開きます。

   

2. SCSSと入力、選択します。

   

3. setting.jsonのSCSSの項目に“editor.tabSize”: 2を追記します。

"[scss]": {
  "editor.defaultFormatter": "michelemelluso.code-beautifier",
  "editor.formatOnSave": true,
  "editor.tabSize": 2
},

あとは念の為VSCodeを更新のため再起動しておきましょう。

右下のここがスペース:２となっていればOKです。

これでSCSSファイルではTabキーを押すとスペース２つが挿入されるはずです。
簡単ですね。

ちなみに、すでにタブでインデントしてしまっているファイルについては、Tabキーを押してもスペース２つとはならずタブになってしまう場合があります。

なので、そのようなファイルの場合は置換でタブをスペース２つにしておきましょう。

おわりに

言語ごとにインデントについての規約があると思いますが、この手順で他の言語のファイルも変更できるので、よければ設定してみてください。

それではよいVS Codeライフを！

参考