こんにちは！管理人のうみねこ(@penta59631)です。
以前に、以下の記事で予算10万円で自作したPCの構成紹介を行いました。
あれから、数年が経ち、今の構成も結構変わっているので改めて紹介します！
こんな方におすすめ！
- PC自作を考えているので、他の人がどういう構成にしているか知りたい。
「これからプログラミングを始めたい、今通常のテキストエディタを使っているけど、コードを書きやすいエディタとかあれば知りたい。」
という方に向けた記事です。
コードエディタとは？
コードエディタとは、プログラムやHTMLなどのコードを作成、編集することを主目的として設計されているエディタのことです。
通常のテキストエディタの場合、メモを作成することが目的となるためプログラムのコードを書こうとすると見にくくなってしまうことが多いです。(テキストエディタによってはコードエディタを兼ねているものもあります。)
それに比べてコードエディタはコードを書くことに特化されているため、プログラムのコード特有のインデントやカッコの色付け、関数の補完など様々な機能があります。
また構文のチェックなども行うことができます。
コードエディタで有名なものとしてはVisual Studio Code、Atom、EmEditor、Vimなどがあります。
今回は、この中で私も現在利用しているVisual Studio Codeについて紹介していきます。
なおVisal Studio CodeはVSCodeと省略されることが多いため、これからの記載はVSCodeとします。
Visau Studio Codeとは？
Visual Basic Codeとは、Microsoftが提供するコードエディタです。
無料で利用することができ、MacOS、Windows、LinuxなどのOSで動作します。
デフォルトで数100のプログラミング言語をサポートしており、ローカルでのデバッグ機能も搭載されています。
また様々な拡張機能が開発されており、それらを導入することでより快適にコードを書くことができるようになります。
VSCodeは以下からダウンロードすることができます。
Visual Studio Codeがおすすめな理由
ファイルの開閉、フォルダ作成がVSCodeだけで完結
通常のテキストエディタの場合、ファイルの作成はテキストエディタでもできますが、フォルダ作成や既存ファイルの開閉などはメニューからエクスプローラーを都度開く必要があります。
VSCodeの場合最初に作業ディレクトリを指定すると、その後のフォルダ作成やファイル開閉はすべてVSCode上でできるようになります。
左側に指定したディレクトリツリーが表示されています。
ここでファイルやフォルダを作成することも可能ですし、ファイル名をクリックすれば即座にファイルを開くことができます。
以下のマークをクリックすることで、このツリー自体の表示・非表示を切り替えることも可能です。
また、以下のようにファイルごとにアイコンがついていますが、拡張機能である「Material Icon Thema」を導入することでこのようなアイコンに変更することができます。
拡張機能については後述します。
自動保存機能がある
VSCodeにはファイルの変更を検知した自動保存機能があります。
PCの電源が突然落ちた、フリーズしたなど万が一に備え自動保存機能はONにしておくことをおすすめします。
自動保存は、[ファイル]-[基本設定]-[設定]から検索ボックスに「Auto Save」と入力すると出てくる項目から設定可能です。
設定項目としては、以下の4種類があります。
私はonWindowChangeに設定しています。
| 設定 | 説明 |
|---|---|
| off | 自動保存なし |
| afterDelay | 設定したミリ秒語に自動保存 |
| onFocusChange | エディターがフォーカスを失った場合に自動保存 |
| onWindowChange | ウインドウがフォーカスを失った場合に自動保存 |
エディタの分割ができる
エディタを上下左右、列などで分割することができます。
エディタを文化することでファイルを同時に見ながら操作できるため、作業効率がアップします。
以下の画像は2列に分割している状態です。
文字ごとに色分けされ見やすい
画像を見てもらえればわかるように、拡張子を各言語の形式として保存することでそれにあった形で色分けしてくれます。
以下はHTMLファイルとCSSの例です。
拡張機能が豊富
VSCodeはデフォルトでも十分に利用できますが、拡張機能を導入することでより快適にコードを書くことができます。
拡張機能は、以下のアイコンから導入することができます。
該当のプラグインを検索して、導入したい拡張機能の「インストール」ボタンをクリックすることで導入できます。
簡単ですよね。
導入するプラグインについては、各環境に合わせて検討してもらえればと思いますが、共通して入れておいたほうがいいものとして私は現時点で以下の拡張機能を導入しています。
Japanese Language Pack for Visual Studio Code
この拡張機能は、VSCodeを日本語化してくれます。
VSCodeはデフォルトでは英語表記のため日本語化したい人は導入しましょう。
Auto Rename Tag
この拡張機能は、HTMLタグなどの開始タグの中身を変更した際、それに対応する閉じタグの中身も自動で変更してくれます。
基本開始タグを変更すれば、閉じタグも変更するのが普通なので入れておくと作業効率がアップします。
indent-rainbow
この拡張機能は、インデントを色付けしてくれます。
短いコードであればパッと見でわかりますが、階層が深くなったり、コードが長くなると閉じカッコの位置がわからなくなることがあります。
その様な時にインデント単位で色分けしてくれるので便利です。
Material Icon Thema
こちらは先程紹介しましたが、アイコンをファイルの拡張子に応じて表示を変更してくれるものです。
様々なファイルを扱う場合は導入しておくと便利です。
Prettier – Code formatter
こちらの拡張機能は、ソースコードを自動で整形してくれます。
セミコロンやインデントなどがずれていても保存時に自動で整形してくれるため便利です。
複数人でコードを共有するときなども記載を統一することができます。
さいごに
いかがでしたでしょうか。
VSCodeは無料で利用でき、動作も軽いためコードを書く際には非常に便利なツールだと思います。
また今回紹介した拡張機能以外にも、便利なものがたくさんあるためそちらを導入することでより快適にコードを書けるようになります。
コードエディタを探しているという方は一度利用してみてはいかがでしょうか。
