BLOG ブログ

> ブログ

こんにちは!WEBデザイナーのこたです。
皆さんテキストエディタは何を使われていますか?
無料エディタはたくさんありますが、エンジニアに一番人気なのが「VS Code(VisualStudioCode)」になります。
無料なのに便利プラグインがたくさんあります。
コーディングはもちろん、設計であったり、タスク管理であったりと
拡張機能を入れると色々とできるので、VS Code一つあれば問題ありません。

ぜひVS Codeを入れてみましょう!

ここから本題です。

絶対に入れておいたほうがいい「おすすめプラグイン」TOP3をご紹介します!

①Prettier

prettoer
Prettierとは、ソースコードを自動で整形してくれるツールです。
ソースを保存すると自動で整形してくれるため、タブのサイズや位置、さらにセミコロンやシングルクォーテーションなども整形してくれます。
HTML、CSS、JS(jQuery)、PHPでのコーディング時にかなり使えます!
ソースを保存(Ctrl+s)するだけでキレイなコードになりますので、「インデントが少しずれて気持ち悪い」とか「キレイににするために直さなければいけない」といったストレスがなくなります。さらにコードがキレイになると管理がしやすくなるので、長期メンテナンスを考えると自動整形は必須になります。
複数でのソースコードを共有する場合は誰が書いてもソースコードの書き方は同じとなるのでこちら本当にオススメになります。

②Live Sass Compiler

live sass compiler
Sass(Scss)はCSSの拡張言語になります。
Sassのメリットは作業効率がアップしたり、メンテナンス性がアップしたりと開発を効率良く進めるには必要な機能になります。
しかし、Sassで書かれたスタイルシートをWebで使用するには、SassファイルからCSSファイルへコンパイルする必要があります。
そこで便利なのが「Live Sass Compiler」になります。
こちらもソースを保存(Ctrl+s)するだけで自動的にコンパイルしてくれるのでSFTPと組み合わせればコンパイルしたCSSファイルをFTPに自動でアップできる流れがスムーズにできます。

③SFTP

sftp
SFTPとは保存したファイルを自動的にサーバにアップロードできるツールになります。
これによってVS CodeがFTPクライアントと同じ役割を果たし、わざわざテスクトップアプリを立ち上げてファイルアップする手間が軽減されます。
コーディングしてFTPに手動でアップする作業ってすごく無駄な作業ですよね。これがかなりのストレスだったので、ソースを保存(Ctrl+s)するだけで自動的にサーバーにアップロードしてくれるので、作業効率がぐんっとアップします!こちらのプラグインもオススメになります。

プラグインの入れ方

vscode
①プラグインのボタンをクリックする。
②検索窓にプラグイン名を入力する。→検索に引っかかった導入したいプラグインのインストールボタンをクリックする。

まとめ

いかがでしたでしょうか?
まだVS Codeを入れてない人にはぜひ入れて欲しいのと、今回紹介した3つのプラグインも一緒に入れてみてはいかがでしょうか?
快適なコーディングライフをお過ごしくださいませ