![](http://ottottosite.com/wp-content/uploads/2022/10/afrac2-150x150.png)
VSCodeをオシャレにしたいよ〜
![](http://ottottosite.com/wp-content/uploads/2023/07/ottotto2m-150x150.jpg)
![](http://ottottosite.com/wp-content/uploads/2023/07/ottotto2m-150x150.jpg)
![](http://ottottosite.com/wp-content/uploads/2023/07/ottotto2m-150x150.jpg)
プラグイン入れるのとフォント変えたら一気にオシャレになるよ
どうもプログラミングとブログと株で生きていきたい、おっとっとです!
今回は、テキストエディターである「Visual Studio Code」略して「VSCode」をオシャレにするやり方について説明していきます。
まだダウンロードしていない方は、以下からVSCodeのダンロードページに移動できます。
https://code.visualstudio.com/
プラグインを入れる
まずはプラグインを入れて、オシャレにしていきます。
プラグインとはIT用語で、アプリケーションの機能を拡張するソフトウェアのことを指します。
そのため、VSCodeでは色々なプラグインを入れることで機能を追加することができます。
Material Icon Theme
1つ目は「Material Icon Theme」というプラグインです。
入れると、ファイルのアイコンをオシャレにしてくれます。
拡張子別で異なるアイコンにしてくれるのがいい点です。
それではVSCodeを開いてください。
![Material Icon Theme](https://ottottoblog.site/wp-content/uploads/2022/12/2e4218829b753024bdbddcccffffef3e-1024x618.jpg)
![Material Icon Theme](https://ottottoblog.site/wp-content/uploads/2022/12/2e4218829b753024bdbddcccffffef3e-1024x618.jpg)
上の画像ようのように、
- プラグインの項目を選択
↓ - 検索欄で「Material」と入力し「Material Icon Theme」を選択
↓ - インストールをクリック
します。
インストールできたでしょうか?アイコンのところがオシャレになりましたね。
GitHub Theme
2つ目は、「GitHub Theme」というプラグインです。
エディターとコードの色を変更することができます。
先ほど行ったやり方で、GitHub Themeもインストールします。
![GitHub Theme](https://ottottoblog.site/wp-content/uploads/2022/03/0c193860616ca7e0160307d92d69c56f-1024x601.jpg)
![GitHub Theme](https://ottottoblog.site/wp-content/uploads/2022/03/0c193860616ca7e0160307d92d69c56f-1024x601.jpg)
インストールすると、下の画像のように枠内から好きなものに、エディターとコードの色を変更できます。
![GitHub Themeをインストール](https://ottottoblog.site/wp-content/uploads/2022/12/6daffbe03f18ad7847527e59600c3968-1024x685.jpg)
![GitHub Themeをインストール](https://ottottoblog.site/wp-content/uploads/2022/12/6daffbe03f18ad7847527e59600c3968-1024x685.jpg)
だいぶ良くなってきましたね。
私としては、配色テーマはGithub Dark Dimmedがちょうど見やすくてオススメです。
フォントを変更する
フォントを変えることでもオシャレになるので、よければ変更してみましょう。
![VSCodeのフォント変更の方法](https://ottottoblog.site/wp-content/uploads/2022/12/6268269698ed72218738a11417ba7f97-1024x623.jpg)
![VSCodeのフォント変更の方法](https://ottottoblog.site/wp-content/uploads/2022/12/6268269698ed72218738a11417ba7f97-1024x623.jpg)
右下の歯車をクリックします。
![VSCodeのフォント変更の方法](https://ottottoblog.site/wp-content/uploads/2022/12/dc5e53f4536d98b0aac24a082c2b8a49-1024x626.jpg)
![VSCodeのフォント変更の方法](https://ottottoblog.site/wp-content/uploads/2022/12/dc5e53f4536d98b0aac24a082c2b8a49-1024x626.jpg)
設定を選択します。
![VSCodeのフォント変更の方法](https://ottottoblog.site/wp-content/uploads/2022/12/539c4f2b734242bc0b7c5c681f3c2802-1024x626.png)
![VSCodeのフォント変更の方法](https://ottottoblog.site/wp-content/uploads/2022/12/539c4f2b734242bc0b7c5c681f3c2802-1024x626.png)
- ユーザーを選択
- 「font family」と検索
- 「Ricty Emmond」と入力
これで完成です!どうでしょうか?最初よりすごくオシャレになりましたね。
今回は、
- アイコン
- エディター
- コード
- フォント
を変更するやり方を紹介しました。
オシャレだとコードを書きたくなりますよね。
ただ、設定とかをいじると時間がかかるので、ほどほどにしておきましょうね(汗)
![](https://ottottosite.com/wp-content/uploads/2023/07/2023macapp-300x169.jpg)
![](https://ottottosite.com/wp-content/uploads/2023/07/2023macapp-300x169.jpg)