VSCodeで自動整形するコマンド（ショートカット）（Mac）

# はじめに


先日VScode(Visual Studio Code)の便利なショートカットを知りましたので共有します😊

自動でインデントやカンマの抜けなどを整えてキレイにしてくれるコマンドです。

コマンドは**【option + shift + F】**です！

これだけで自動整形してインデントなどの見た目をキレイにしてくれるのですが、いくつか<font color=red>注意点</font>があります。

# 注意点

まずこのショートカットはすぐに使えるというわけではなく<font color=red>フォーマッターと言うVScodeの拡張機能をインストールする必要があります。</font>
フォーマッターとは以下のようなものです。

**「Weblio辞書」**
フォーマッター【formatter】
ハードディスクや各種記録メディアを初期化（フォーマット）するためのソフトウエア。

【引用元URL】
https://www.weblio.jp/content/Formatter

ですが初期化（フォーマット）すると言われてもイマイチ自動整形とは意味が違うと思って他にも探していたところ、どうやら**ソースコードを自動整形する機能**という意味らしいです。
まあそのまんまですがこれなら腑に落ちました（笑）

話が逸れましたがこのコマンドを使うには**フォーマッター（formatter）という拡張機能が必要**ということです。しかも大変なのが**RubyやJavaScriptやPHPなどそれぞれに対応したフォーマッターが必要**ということです。さらにRubyとerbでも別のフォーマッターが必要になります💦

一応参考にフォーマッターの拡張機能の画像の例を以下に載せておきます。

<a href="https://gyazo.com/12e508a48e9bd7c7d6d9f0a74007e7f2"><img src="https://i.gyazo.com/12e508a48e9bd7c7d6d9f0a74007e7f2.png" alt="Image from Gyazo" width="227"/></a>

Formatterと書いてあるのが大体それぞれのファイルに対応しているフォーマッターです。

---
それでは今回はRubyのファイルの場合について説明します。
恐らくRubyファイルを開いている時にコマンドを使うと**「rubyファイルのフォーマッタがインストールされていません」**のエラーが出るかと思います。
その時は**rufoというVScodeの拡張機能をインストール**します。
<a href="https://gyazo.com/742b0ec4a574fb826bdb59bca13490e1"><img src="https://i.gyazo.com/742b0ec4a574fb826bdb59bca13490e1.png" alt="Image from Gyazo" width="662"/></a>

そして【command + J】でVScodeのターミナルを開き**「gem install rufo」**と入力してエンターを押します。そうするとRubyファイルで自動整形が出来るようになります。
gemをインストールしたからbundle installも必要かと思いましたが自分は**bundle installはしないで使えました。**さらに言えば**rails newなどもしていないrbファイルだけのディレクトリだったのでGemfileも無かったのですがちゃんとgem install出来ました**（笑）

【引用元URL】
[VScode で Ruby の自動整形を使いたいが 「フォーマッタがインストールされていません」と出てしまう](https://ja.stackoverflow.com/questions/61965/vscode-%E3%81%A7-ruby-%E3%81%AE%E8%87%AA%E5%8B%95%E6%95%B4%E5%BD%A2%E3%82%92%E4%BD%BF%E3%81%84%E3%81%9F%E3%81%84%E3%81%8C-%E3%83%95%E3%82%A9%E3%83%BC%E3%83%9E%E3%83%83%E3%82%BF%E3%81%8C%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E3%81%95%E3%82%8C%E3%81%A6%E3%81%84%E3%81%BE%E3%81%9B%E3%82%93-%E3%81%A8%E5%87%BA%E3%81%A6%E3%81%97%E3%81%BE%E3%81%86)


# 番外編
一応自分がerbファイルやJavascript、HTML、CSSなどのファイルを自動整形するのにVScodeの設定の所を修正する必要があった箇所がありましたので参考までに載せておきます。
ですがこれは色々な情報を見て実装出来た箇所なのでうまく説明が出来ないため今回は番外編ということにさせて頂きます。よろしくお願いします:bow_tone1:

まずは色々と調べた結果この「Beautify」という拡張機能をインストールしました。
<a href="https://gyazo.com/599766a602784c0550bf96a0d46efd80"><img src="https://i.gyazo.com/599766a602784c0550bf96a0d46efd80.png" alt="Image from Gyazo" width="1048"/></a>

これはJavascriptのフォーマッターのようです。
ですがこれを入れただけではまだ自動整形してくれません。
画像を見て頂きたいのですが**下の方にスクロールすると上記のコード**が記述されている箇所がありました。
どうやらこちらの記述をしないとうまく動かないという意味みたいです。

そこでVScodeの設定（左下の歯車）から「Beautify config」の「Language」の**「setting jsonで編集」**のファイルを開きました。**（下記画像参照）**

<a href="https://gyazo.com/e9e1401698d3d6679530d3f330a4e16b"><img src="https://i.gyazo.com/e9e1401698d3d6679530d3f330a4e16b.png" alt="Image from Gyazo" width="1050"/></a>

<font color=red>そして以下のように編集しました。</font>


```javascript:settings.json
{
    "editor.tabSize": 2,
    "editor.renderWhitespace": "all",
    "files.autoSave": "onFocusChange",
    "emmet.triggerExpansionOnTab": true,
    "[css]": {
        "editor.suggest.insertMode": "replace"
    },

    "beautify.language": {
        "js": {
            "type": ["javascript", "json"],
            "filename": [".jshintrc", ".jsbeautifyrc"]
          // "ext": ["js", "json"]
          // ^^ to set extensions to be beautified using the javascript beautifier
        },
        "css": ["css", "scss"],
        "html": ["htm", "html", "erb"] //"erb"を追加
        // ^^ providing just an array sets the VS Code file type
        },
        "[erb]": {
            "editor.defaultFormatter": "HookyQR.beautify"
        },
        "editor.suggestSelection": "first",
        "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
        "hediet.vscode-drawio.local-storage": "eyIuZHJhd2lvLWNvbmZpZyI6IntcImxhbmd1YWdlXCI6XCJcIixcImN1c3RvbUZvbnRzXCI6W10sXCJsaWJyYXJpZXNcIjpcImdlbmVyYWxcIixcImN1c3RvbUxpYnJhcmllc1wiOltcIkwuc2NyYXRjaHBhZFwiXSxcInBsdWdpbnNcIjpbXSxcInJlY2VudENvbG9yc1wiOltdLFwiZm9ybWF0V2lkdGhcIjpcIjI0MFwiLFwiY3JlYXRlVGFyZ2V0XCI6ZmFsc2UsXCJwYWdlRm9ybWF0XCI6e1wieFwiOjAsXCJ5XCI6MCxcIndpZHRoXCI6ODI3LFwiaGVpZ2h0XCI6MTE2OX0sXCJzZWFyY2hcIjp0cnVlLFwic2hvd1N0YXJ0U2NyZWVuXCI6dHJ1ZSxcImdyaWRDb2xvclwiOlwiI2QwZDBkMFwiLFwiZGFya0dyaWRDb2xvclwiOlwiIzZlNmU2ZVwiLFwiYXV0b3NhdmVcIjp0cnVlLFwicmVzaXplSW1hZ2VzXCI6bnVsbCxcIm9wZW5Db3VudGVyXCI6MCxcInZlcnNpb25cIjoxOCxcInVuaXRcIjoxLFwiaXNSdWxlck9uXCI6ZmFsc2UsXCJ1aVwiOlwiXCJ9In0=",
        "[ruby]": {
            "editor.defaultFormatter": "mbessey.vscode-rufo"
        }
}

```

これでなんとかerbファイルなどが自動整形出来るようになりました。
**（割愛していますがerbファイルなどのフォーマッターもインストールしています。）**

# おわりに
いかがでしたでしょうか。
自分も初めにこのショートカットコマンドを知った時はすごい便利！！すぐ使おう！！と思ってやってみましたがエラーが出てなかなかすぐには使えませんでした:disappointed_relieved:
今回はこのコマンドをまだ知らない、もしくは知っていたけど同じようにエラーなどで使えなかった人たちに少しでも参考になれればと思いこの記事を書いてみました。
少しでも誰かのお役に立てれば幸いです:blush:


# 今回参考にさせて頂いたサイト

- [VScode で Ruby の自動整形を使いたいが 「フォーマッタがインストールされていません」と出てしまう](https://ja.stackoverflow.com/questions/61965/vscode-%E3%81%A7-ruby-%E3%81%AE%E8%87%AA%E5%8B%95%E6%95%B4%E5%BD%A2%E3%82%92%E4%BD%BF%E3%81%84%E3%81%9F%E3%81%84%E3%81%8C-%E3%83%95%E3%82%A9%E3%83%BC%E3%83%9E%E3%83%83%E3%82%BF%E3%81%8C%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E3%81%95%E3%82%8C%E3%81%A6%E3%81%84%E3%81%BE%E3%81%9B%E3%82%93-%E3%81%A8%E5%87%BA%E3%81%A6%E3%81%97%E3%81%BE%E3%81%86)
- [Weblio辞書 フォーマッター【formatter】](https://www.weblio.jp/content/Formatter)