東京都府中市、九段下のWEB制作会社Maromaroのブログです

2020.10.05

taka

コーディング・プログラミングに最適!無料テキストエディタツール

こんにちは、MaromaroのTakaです。
今回は私が使っているおすすめの無料テキストエディタ
「Visual Studio Code」をご紹介します。

Visual Studio Codeとは

Microsoftが提供している無料のテキストエディタです。
略称でVSCodeとも呼ばれています。
※以下よりVSCodeと呼びます

https://azure.microsoft.com/ja-jp/products/visual-studio-code/
※ダウンロードは上記からできます。

WindowsやMac、Linuxなど、多くのオペレーティングシステムに対応しており、
多くの言語に対応しています。

私は元々AdobeのDreamWeaverを使っていたのですが、
バグが多いのと動作が重くなることが多発していたため、
VSCにしました。
DreamWeaverと比べて動作がとても軽く、
使い勝手も良いです。(VSCodeは重くなったり、動作が止まったことはありません)

VSCodeの一番の魅力は拡張機能の豊富さと、
その導入の手頃さがあります。

VSCの拡張機能について

VSCodeには拡張機能(エクステンション)と呼ばれる機能があります。
その名の通り、VSCode自体がサポートしていない機能を後付けで拡張するためのものです。

拡張機能はコーディングをするのか、
プログラミングをするのか等、
用途によってかなり変わってきます。

特にプログラミングに関しては言語でも左右されるため、
自分にあった拡張機能を入れましょう。

拡張機能を入れるのはとても簡単で、以下の方法で導入することができます。

まず、
①で拡張機能タブを選択し
②で導入したい拡張機能名を記入し
③で選択し
④でインストールを押して、インストールするだけです。

とても簡単ですね。

この調子で自分に合った拡張機能を入れましょう。

私は以下の拡張機能を入れていますので、
参考になればと思います。

コーディング

Live Sass Compiler

SCSS・SASSをコンパイルしてくれる拡張機能
コーディングをするなら必須と言えますね。

HTML CSS Support

HTMLを書くときに、CSS側で作ったClass名が候補に出るようになります。

Auto Rename Tag

HTMLでタグを書いたときに自動で閉じタグを生成してくれます。
とてもオススメです。

CSSTree validator

cssの間違いがあると警告を出してくれるプラグインです。

zenkaku

全角になっているものを薄い四角の枠で示してくれます。

 

プログラミング(PHP・Ruby)

PHP Intelephense

PHPのコード補完、参照の検索や定義への移動などいろいろな機能を提供してくれます。

Bracket Pair Colorizer

対応する括弧に同じ色をつけてくれる拡張機能です。
とてもオススメです。

Dot ENV

Laravelで利用している.envファイルにシンタックスハイライトをつけてくれます。
※シンタックスハイライトはテキスト中の一部分をその分類ごとに異なる色やフォントで表示するものです。

Material Icon Theme

初期アイコンよりアイコンが綺麗で見やすくなります。

Ruby

Ruby言語サポートです。Rubyのコードを書き始める前にこれを入れましょう。

Rails

Railsサポートの拡張機能です。
assetやタグのsnippetを提供しています。

endwise

endを自動挿入してくれます。

Rainbow End

endを色分けする拡張機能です。

 

以上となります。
他にも入れているものはありますが、
その中からおすすめを厳選しました。

他にもいろいろと便利な拡張機能がありますので、
いろいろ試して、自分にあった拡張機能を探すことで、
より良いコーディングライフにしましょう。

以上、Takaでした。