初めに
この記事ではオリジナル開発を便利にしてくれるツールを色々紹介していきます～
- vscodeの便利機能
- コンソールの出力を表形式に
1. vscodeの便利機能
Live share
共同開発の効率が上がること間違いなし！
Live Share は、使っているプログラミング言語や構築しているアプリの種類に関係なく、リアルタイムで他のユーザーと共同で編集やデバッグができます。 現在のプロジェクトを瞬時に安全に共有したり、共同でデバッグ セッションを開始したり、ターミナル インスタンスを共有したり、localhost の Web アプリを転送したり、音声通話などを行うことができます！
〜導入方法〜
では、導入していきましょう！
VSCode立ち上げて、拡張機能の検索からLive Shareと検索しましょう！そしてインストールしてVSCodeを再起動ししましょう。
※この拡張のインストールはホスト（セッションを始めるオーナー）とゲスト（セッションに参加するメンバー）のどちらも必要です。
拡張機能live shareは下記のURLからもインストールできます。
https://visualstudio.microsoft.com/ja/services/live-share/
下の赤枠で囲っている所から下記のアカウントでログインできます。（アカウントがない方は作成しましょう）
・Microsoftアカウント
・GitHubアカウント
サインインが完了したら、ブラウザを閉じてVSCodeを開くとWelcomeページが表示されているかと思います。
〜共同作業開始〜
画面下にShareボタンが見えるので、それをクリックします。
すると、クリップボードに共有用のURLがコピーされるので、一緒に共同作業したい相手にチャットやメールなどで伝えます。
そのURLをクリックすると、Visual Studio Codeが自動的に起動し、相手の開いているプロジェクトと同じものが編集できるようになります。
〜ホスト側の基本操作〜
ホスト側の操作は、左上のアイコンの操作を覚えれば万事オーケーです。
| 操作 | Center align |
|---|---|
| Copy Invite Link | 招待リンクの再度コピー |
| Focus Participants | 他のメンバーを自身がいるファイルに強制的に招集する |
| Share Server | ホストマシンで立ち上げているローカルサーバーのポートを指定し、シェアする |
| Share Terminal | シェアターミナルを追加する |
| Stop Collaboration Session | セッションを終了する |
シェアターミナルは便利な反面、ゲストが普通に rm -rf / することも可能なので気をつけましょう。
アクセスレベルをread-onlyに設定することもできます。
VScode自動保存
VScode内の変更保存を忘れてしまい、エラーが起きてしまったり変更されてないなんて問題が起きてしまうことが多々発生します。
そんな初歩的なミスを無くしたい方に強くおすすめします！
まず、Visual Studio Code の自動保存に関する設定をするには「ファイル」メニューの中にある「ユーザー設定」をクリックし、さらに表示されたサブメニューの中から「設定」をクリックしてください。
または、VScode内の左下にある歯車のアイコンをクリックして、「設定」を選択してください。
次に設定画面から「Auto Save」と検索します。
「Files:Auto Save」の設定では 4 つの選択肢から 1 つ選択します。
それぞれの設定項目の内容は次のとおりです。
off : 自動保存しない
afterDelay : 別途指定したミリ秒経過後に自動保存
onFocusChange : エディタがフォーカスを失ったときに自動保存
onWindowChange : ウィンドウがフォーカスを失ったときに自動保存
デフォルトでは off となっており自動保存はされません。
3種類の自動保存方法がありますがafterDelayを導入しましょう。（他の設定が知りたい方は検索してみてください！）
〜afterDelay〜
afterDelay を選択した場合は編集が行われたあと 「Files:Auto Save Delay」 で設定されたミリ秒数経過後に自動保存が行われます。デフォルトでは Files:Auto Save Delay の値は 1000 ( = 1 秒)となっています。
1000 ミリ秒だと入力したと同時に保存されていきますので、そこまで頻繁に保存が必要なければ Files:Auto Save Delay の値も併せて変更してください。
例えば Files:Auto Save を afterDelay に設定し、 Files:Auto Save Delay を 10000 に設定してみると、編集が行われたあと 10 秒毎に自動保存されます。
このようにして、自分の使いやすようにカスタマイズしてみてください！
zenkaku
コードの中に全角が入っているとエラーがよく起こります。
これを防ぐために、全角を灰色にしてくれる拡張ツール "Zenkaku"をインストールしましょう。vscode左の四角が4つあるアイコンから拡張ツールを入手できます。
そうすると、以下のように全角が灰色になるので、全角エラーを撲滅できるでしょう！
japanese language pack ~
英語が苦手で日本語表記にしたいという方におすすめ！
拡張機能であるjapanese language pack ~をインストールし、vscodeを再起動すればメニューなどが日本語化されているはずです。
indent-rainbow
特にhtml/cssを開発しているとき、階層構造を半角スペース4つ分(tabキー)のインデントで表すと整理されて見やすくなります。
このインデントを虹色にしてくれる拡張機能が"indent-rainbow"です。ぜひインストールしておきましょう！
auto close tag
タグの閉じ忘れや、タグが別タグとクロスしてしまうミスが起こりがち！
auto close tagはHTMLやXMLでタグを記載するときに、開始タグを打ち終わったときに自動的に終了タグを生成してくれるプラグインです。
HTMLやXMLを書いていて、特にタグの入れ子が多くなってきた時とか、終了タグを忘れてエラーになることってないですか？この Auto Close Tag を入れれば終了タグを毎回書かずに、開始タグを書いたら自動的にタグを閉じてくれます。
HTMLを書く効率が格段に上がるので、イチオシのプラグインです！
auto rename tag
さらに修正効率アップ！
auto rename tagは開始タグを修正したときに、自動的に対になる終了タグを修正してくれるプラグインです。
Auto Close Tagの親戚のようなプラグインです！。HTML/XMLの要素を修正することはよくあるかと思いますが、このプラグインは開始タグを書き換えれば終了タグも自動的に書き換えてくれるので、修正効率はとても上がるかと思います。
Auto Close Tagと併せて使うとあなたのVSCode環境は間違いなく快適になるでしょう！
Beautify
開発を行っていて、ついつい段落を変え忘れたりコードがガタガタになっても修正がめんどくさくなってしまうことはよくありますよね、、、
そんな方に！
BeautifyはJavascriptやCSS、SASS、HTMLコードを綺麗に整形してくれる拡張機能です！
ガタガタのコードもCommand+Shift+Pでコマンドパレットを開き、beautifyでコマンドを選択すれば一発で綺麗にしてくれます。
endwise
自動でendを挿入してくれる拡張機能です！これでendを忘れる心配なし！
vscode-icons
vscode-iconsを導入すればファイルアイコンが見やすくなります！
HTML CSS Support
HTMLを書くときに、CSS側で作ったClass名が候補に出るようになります。よく書き間違いでスタイル当たってなかったりしますが、これならバッチリ。
2. コンソールの出力を表形式に
開発をしていると、データベースの中身(レコード)を確認したいときがよく来ます。コンソールを用いて確認できますが、初期状態では全レコードが横並びで非常に見づらいです。しかし、HitbというGemを利用すると、表形式で出力できるようになります。
Hirb導入前
Hirb導入後
まず、以下の二行をgemfileに記述します。
gem 'hirb'
gem 'hirb-unicode'
その後、ターミナルにて
$ bundle install
この時点でHirbは利用できるのですが、毎回コンソール中にHirb.enableを入力する必要があります。面倒くさいのでデフォルトでHirbを利用するように設定します。
ルートディレクトリー(appやdbと同じ階層)に.irbrcファイルを作成します。
.irbrcファイル中に以下を記述します。
if defined? Rails::Console
if defined? Hirb
Hirb.enable
end
end
これにて、コンソールの出力がいつでも表形式になります！