Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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

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

[mac] 新OS Catalina にアップデート後、Atomが突然強制終了する

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

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

Atomユーザーは違和感あると思うのですが、VSCodeって多機能で素晴らしいと思うのですが、個人的には、atomと比べて画面上がごちゃごちゃしているのと、色がチカチカしていて目が疲れます。
スクリーンショット 2019-12-04 0.49.07.png

Atomize

どうにか、VSCodeをAtom風にできないかなと色々と調べてみたら、これにたどり着きました。見た感じ良さそうです。
Atomize
スクリーンショット 2019-12-04 1.17.14.png

Atomizeの設定方法

Atomize 拡張機能の追加

EXTENSIONSで atomize と検索すれば一番上に出てくるのでインストール。
スクリーンショット 2019-12-04 0.50.24.png

インストールすると以下の画面が出てくるので、 Set Color Theme でatomizeのテーマをセットしてください。
スクリーンショット 2019-12-04 0.51.02.png

ご自身のコード画面に戻ってみてください。すると、どうでしょう。良い感じにAtom風になってきましたね!色が大分落ち着いてきました。
スクリーンショット 2019-12-04 0.51.15.png

ただ、やはり違和感がありますね。
スクリーンショット 2019-12-04 1.28.35.png

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

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

スクリーンショット 2019-12-04 1.30.41.png

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

settings.json の変更

Code => Preferences => Settings
を押すと、VSCodeの設定画面に遷移します。
スクリーンショット 2019-12-04 0.53.04.png

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

スクリーンショット 2019-12-04 1.39.21.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風に変身しました!
スクリーンショット 2019-12-04 0.54.27.png

ショートカットキー

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

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

c99cdfaed621140565f340a22d1fe087.gif

以上、 Atomizeの紹介でした。

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

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

bbapexx
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away