はじめに
プログラミングスクールを卒業して、現在物流×ITの企業でエンジニアをしているyukiと申します。
この記事を読んでいる多くの方は、きっとプログラミングスクールに通われているor通おうと思っている方だと思います。
皆様は、テキストエディターは何を使われているでしょうか？
テキストエディターってなんぞや？という方は、こちらをご覧ください。（以下、エディター）
プログラミングスクールから推奨されているエディターもあるかと思いますが、個人的におすすめなのはVSCodeです。
今回はそのVSCodeをより便利にしてくれる機能「プラグイン」について、スクール生向けに記事にしてみました。
インストール方法などは、素晴らしい参考記事があるので、一番下の見出しから閲覧ください。
記事の対象者
- プログラミングスクールでRuby/Railsが主要なカリキュラムに含まれている生徒の方
- VSCodeのインストールはすでに済んでいる方
- Macユーザー
そもそもプラグインとは？入れ方は？
プラグインとは、日本語で拡張機能のことです。VSCodeをより便利にしてくれる追加の機能だと考えていいと思います。
具体的な導入の仕方は、以下のように行います。
①VSCodeを起動して、下記アイコンをクリックする。
②検索ウィンドウが出てくるので、追加したい機能の名前を調べ、installボタンを押す
では早速、紹介していきます。
プログラミングスクール生におすすめのプラグイン紹介
詳細の説明が必要なものには、※が振ってありますので、後半をご確認ください。
| プラグイン名 | 内容 |
|---|---|
| Japanese Language Pack for Visual Studio Code | VSCodeを日本語化してくれます。 |
| Beautify | ※1 cmd+shift+pでBeautifyを選択し、HTML/CSS/JSのいずれかを選択するとコードを綺麗にしてくれます。 |
| Bracket Pair Colorizer | JSなどでカッコが入れ子になる場合、どれがどれに対応するのか色をつけてくれます。 |
| Color Picker | CSSなどで色を決める際に、視覚的に選べるカラーピッカーが表示されます。 |
| HTML Snippets | ※2 後述しますが、HTMLの入力をとにかく便利にしてくれます。 |
| Path Intellisense | ファイルの場所など、パスを指定するときに候補を出してくれます。 |
| indent-rainbow | ※3 エディターの端っこからコードまでの幅に色をつけてくれます。 |
| vscode-icons | ファイルやフォルダにアイコンがついてわかりやすくなります。 |
| zenkaku | 全角スペースを可視化し、エラーを防いでくれます。 |
※の説明
※1 MACの方はcmd+shift+pで「コマンドパレット」というメニューを開くことができます。ここで、様々なコマンドの実行ができるのですが、Beautifyと入力してreturnを押すと、HTMLかCSSかJSかを選べるので、対象のファイルと同じ拡張子のものを選ぶとコードが綺麗に整形されます。
※2 以下のような形で、入力の候補を出してくれるなど、非常に便利です。
他にも、便利なプラグインが開発されていますので、ぜひ「こんなのあるかな？」と調べてみてください！