はじめに
仕事で再度環境構築が必要になった場合の備忘録として投稿します。
OSはMac、言語はHTML、CSS、Rubyを使用する前提で記述します。
テキストエディタ
文章を作成、編集するためのソフトウェアです。
開発を行なう際には、テキストエディタを使ってファイルにコードを記述します。
テキストエディタには様々な種類があり、単純な文章を作成するのに適したもの、メモ書きに適したもの、コードを書くのに適したものなどさまざまです。
VSコード(Visual Studio Code)
マイクロソフトによって開発された、無料で利用できるテキストエディタです。
このテキストエディタはプログラミング開発に特化したものになっていて、エンジニアには非常に人気が高いエディタの一種です。
インストール方法
①以下のリンクからエディタをダウンロード
②エディタをアプリケーションフォルダに移動
Google Chromeの下に表示されたダウンロードファイルをクリック後、エディタをダウンロードファイルからアプリケーションフォルダにドラッグ&ドロップします。
+ボタンでFinderの新規タブを開き、アプリケーションフォルダを開きます。（+ボタンがない場合は、⌘ と t を同時に入力することで新規タブが開きます）。
その後、アプリケーションフォルダに移動することでエディタを使用することが出来るようになります。
③Dockに配置
Finderでアプリケーションフォルダを開きエディタがあることを確認します。
VSCodeをDockにドラッグ&ドロップします。
Dockにあることでアプリの起動を簡単に出来るようになります。
④エディタを起動
Dockにあるエディタをクリックして起動させます。
※「このソフトウェアは開けません。」という画面が出ることがあります。その場合は⑤へ進みます。
⑤VS Codeの使用を許可する（④で警告が生じた場合のみ）
まず「このソフトウェアは開けません。」という画面で[OK]を選択し閉じます。
次に[システム環境設定]を開き、[セキュリティとプライバシー]をクリックしましょう。
[一般]タブを開き、画面下部の「ダウンロードしたアプリケーションの実行許可」にある[このまま開く]をクリックしましょう。
以上を終えたら、手順④に戻り再度エディタを起動しましょう。
同じ警告画面がでますが、[開く]が選択できるので、こちらをクリックして完了です。
VSCodeを日本語化する
① 起動したウィンドウ画面左側の、アイコンメニュー内にある四角のアイコンをクリック
② 左上の「Search Extensions in Marketplace」に「Japanese Language Pack for Visual Studio Code」と入力
③ Japanese Language Pack for Visual Studio Codeを選択し、install（またはインストール）をクリックする
④右下のRestart Nowをクリックして再起動すると、日本語設定になる
HTMLとCSSの自動補完機能を追加
① 起動したウィンドウ画面左側の、アイコンメニュー内にある四角のアイコンをクリック
② 左上の「Marketplaceで拡張機能を検索する」に「HTML Snippets」と入力（「HTML Sni」まで入力すると予測変換で検出されます）
③ HTML Snippetsを選択し、install（またはインストール）をクリックする
④ インストールが完了して、アンインストールの表示がされれば完了
Rubyの構文チェック機能を追加
① 起動したウィンドウ画面左側の、アイコンメニュー内にある四角のアイコンをクリック（上記の続きで行う場合はすでに検索欄が表示されているので、この操作は必要ありません）
② 左上の検索欄に「Ruby」と入力
③ Rubyを選択し、install（またはインストール）をクリックする
④ インストールが完了して、アンインストールの表示がされれば完了
全角スペースのチェック機能を追加
① 起動したウィンドウ画面左側の、アイコンメニュー内にある四角のアイコンをクリック（上記の続きで行う場合はすでに検索欄が表示されているので、この操作は必要ありません）
② 左上の検索欄に「zenkaku」と入力
③ zenkakuを選択し、install（またはインストール）をクリックする
④ インストールが完了して、アンインストールの表示がされればインストール完了
zenkakuを使用できるようにする
① command + shift + pの3つのキーを同時入力し、コマンドパレットという設定ファイルの検索画面を開く
② 「> Enable zenkaku」と入力して選択する
③ command + Qの2つのキーを同時入力し、VSCodeを終了する。もしくは、以下の通りに「Code」を選択してから「Visual Studio Codeを終了する」を選択して終了する
zenkakuの機能を常時ONにするための設定
① finderでホームディレクトリを開く
② command + shift + .で隠しディレクトリを表示する
③ > .vscode > extensions > mosapride.zenkaku-0.0.3 > と移動する
④ extension.jsを2本指タップしてメニューを表示する
⑤ 「このアプリケーションを開く」から「テキストエディット」を選択する
⑥ 5行目の「var enabled = false;」を「var enabled = true;」に変更してcommand + Sで保存する
コードのスペルチェック機能を追加
① 起動したウィンドウ画面左側の、アイコンメニュー内にある四角のアイコンをクリック
② 左上の「Marketplaceで拡張機能を検索する」に「Code Spell Checker」と入力
③ Code Spell Checkerを選択し、install（またはインストール）をクリックする
④ インストールが完了して、アンインストールの表示がされれば完了
テキストエディタのカスタマイズ
拡張機能以外にも、元々設定できるものをカスタマイズすることで、より使いやすくすることができます。
今回は、以下の2点を導入します。
- 半角スペースの設定
- オートセーブ設定
tabキーで入力される半角スペースの数を設定
コードの縦列を揃える際に、tabキーを多く使用します。これは効率化のためです。
例えば2個の半角スペースを入れる場合、スペースキーを2回押す必要があります。
しかしながら、tabキー=半角スペース2つ分と設定しておけば、tabキーを1回入力するだけで良いです。
また、スペースがいくつ入っているかを可視化できたほうが、瞬時にコードの縦列を揃えることができるのでおすすめです。
① VSCodeのサイドバーより、「管理（下部の歯車マーク）」→ 「設定」の順に選択
② Editor: Tab Sizeを２に設定
③ Editor: Render Whitespaceで「all」を選択
オートセーブ設定
現状では、コードを編集したらcommand + sで都度上書き保存をする必要があります。
このままだと、保存のし忘れで編集した点が反映されないなどのトラブルが生じてしまいます。
この事象を防ぐために、オートセーブの設定をしていきます。
① VSCodeのサイドバーより、「管理（下部の歯車マーク）」→ 「設定」の順に選択（直前の作業に続けて行う方は、この操作の必要はありません）
② オートセーブの設定で「onFocusChange」を選択
おわりに
プログラミングを快適に行う上での、最低限の設定は以上になります。
拡張ツールは、導入時のコストは高いものの結果として作業効率を上げてくれるものが多いため、
今後も積極的に使用していきたいと思います。