Visual Studio CodeをAtom風にする[Atomize]

## この記事を書こうと思ったきっかけ

基本、仕事でも趣味でもAtomを使って開発することが多いのですが、最近Catalinaにアップデートしたところ、頻繁にクラッシュするようになりました。今もなおアップデートされていない状況で、自分でも色々と解決策を試しています。

[[mac] 新OS Catalina にアップデート後、Atomが突然強制終了する](https://qiita.com/bbapexx/items/774077466e4ba0eea5f4)

しかし、集中している時にいきなりクラッシュすると凄く萎えてしまうので、これを機に別のエディタも使ってみようということになりました。

## Visual Studio Code は多機能だが、ごちゃごちゃしている

Atomユーザーは違和感あると思うのですが、VSCodeって多機能で素晴らしいと思うのですが、個人的には、atomと比べて画面上がごちゃごちゃしているのと、色がチカチカしていて目が疲れます。
 <img width="1420" alt="スクリーンショット 2019-12-04 0.49.07.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142616/a7d64889-798c-0a22-b676-18f5e2d0657c.png">

## Atomize

どうにか、VSCodeをAtom風にできないかなと色々と調べてみたら、これにたどり着きました。見た感じ良さそうです。
[Atomize]
(https://marketplace.visualstudio.com/items?itemName=emroussel.atomize-atom-one-dark-theme)
<img width="784" alt="スクリーンショット 2019-12-04 1.17.14.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142616/f0c57be4-4f99-f840-6045-def10026ce10.png">


## Atomizeの設定方法

### Atomize 拡張機能の追加

EXTENSIONSで `atomize` と検索すれば一番上に出てくるのでインストール。
<img width="244" alt="スクリーンショット 2019-12-04 0.50.24.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142616/315ff3ff-1c26-6ffc-1cb6-9b14332e87f5.png">

インストールすると以下の画面が出てくるので、 `Set Color Theme` でatomizeのテーマをセットしてください。
<img width="1123" alt="スクリーンショット 2019-12-04 0.51.02.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142616/a3ab1e04-85e4-b673-5ab4-574a3c466f64.png">

ご自身のコード画面に戻ってみてください。すると、どうでしょう。良い感じにAtom風になってきましたね！色が大分落ち着いてきました。
<img width="1440" alt="スクリーンショット 2019-12-04 0.51.15.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142616/548b0697-c17e-4a5b-32b9-ebc651558b0c.png">

ただ、やはり違和感がありますね。
<img width="56" alt="スクリーンショット 2019-12-04 1.28.35.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142616/128c72af-6eee-7e01-babc-e201abfa2f30.png">

うーん、これも取ってしまいたい。

そこで、Atomizeのドキュメントを読んでみると、
 `これはあくまで最小限の設定だから、もっとAtom風にするには以下の設定を記述してね！`
と書いてありました。

<img width="750" alt="スクリーンショット 2019-12-04 1.30.41.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142616/a670417b-af9a-aeaf-df11-ade28a839bc3.png">

これは試してみなければ。

### settings.json の変更

`Code => Preferences => Settings`
を押すと、VSCodeの設定画面に遷移します。
<img width="477" alt="スクリーンショット 2019-12-04 0.53.04.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142616/5a8a03ec-ce26-fc5d-6ef5-e47e78810b8c.png">

入力部分に、 `settings.json` と打ち込むと、 `Edit in settings.json` が出てくるので、これをクリックします。

<img width="626" alt="スクリーンショット 2019-12-04 1.39.21.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142616/1641f390-6ed5-df22-3bc7-6e854c6c7491.png">

settings.json を以下のように書き換えます。

```settings.json
{
  "workbench.colorTheme": "Atomize",
  "breadcrumbs.enabled": false,
  "editor.cursorBlinking": "blink",
  "editor.hideCursorInOverviewRuler": true,
  "editor.minimap.enabled": false,
  "editor.occurrencesHighlight": false,
  "editor.renderIndentGuides": false,
  "editor.roundedSelection": false,
  "editor.scrollBeyondLastLine": false,
  "explorer.decorations.colors": false,
  "explorer.openEditors.visible": 0,
  "window.zoomLevel": 2,
  "workbench.activityBar.visible": false,
  "workbench.editor.showIcons": false,
  "workbench.startupEditor": "none",
  "workbench.tree.renderIndentGuides": "none"
}
```

すると、どうでしょうか。
左部分のアイコンがなくなり、大分スッキリし、見事Atom風に変身しました！
<img width="1440" alt="スクリーンショット 2019-12-04 0.54.27.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142616/470feef9-717a-386e-ebb6-51a3d8441185.png">

## ショートカットキー

ファイル検索や、拡張機能画面にどうやって遷移するのかに関しては、直接メニューバーから遷移する他に、以下のショートカットを使用します。

ファイル管理画面: shift + ⌘ + E
ファイル検索: shift + ⌘ + F
拡張機能: shift + ⌘ + X

![c99cdfaed621140565f340a22d1fe087.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142616/7ac849a7-9094-437a-57af-21e73e3e0b15.gif)


以上、 Atomizeの紹介でした。

AtomユーザーがVSCodeに興味を持つ一つのきっかけになればと思います。

最後までみていただきありがとうございます！