本日は、Webシステムの開発環境で主に使われるVisual Studio Code（VSCode）について解説していきたいと思います。VSCodeはMicrosoft社が無料で提供するエディターソフトで、このエディタを使用してプログラミングを書いていくことになります。各言語に対応しており、またWindows、Mac、Linuxとマルチプラットフォームに対応しています。以下の説明ではWindows環境を想定して解説しています。
VSCodeのインストール
この項目では初回時のインストール方法と、再インストール時の注意点について説明します。
インストール方法
まずは、VSCodeのダウンロードページにアクセスしてみましょう。
https://code.visualstudio.com/download
Windows用のダウンロードボタンを押下すると以下のようなファイルがダウンロードされます。
VSCodeUserSetup-x64-1.97.2.exe
デフォルト設定のままインストールを完了させましょう。
デフォルトでは以下の場所にインストールされます。
C:\Users\{ユーザ名}\AppData\Local\Programs\Microsoft VS Code
再インストール時の注意点
再インストールをした場合、設定は前回インストール時のままとなります。初回インストール時と同様のフレッシュインストールを行いたい場合は、前回インストール時のデータの削除が必要になります。
前回インストール時の設定の削除
以下のパスにあるフォルダの削除をしてください（フォルダの削除等については自己責任でお願いします）。
- C:\Users\{ユーザ名}\.vscode
- C:\Users\{ユーザ名}\AppData\Roaming\Code
参考記事
https://code.visualstudio.com/Docs/setup/setup-overview#_how-can-i-do-a-clean-uninstall-of-vs-code
再インストール時にファイルが消せないエラーが出る場合
VSCodeの再インストール時に以下のようなファイルが消せないというエラーが発生する場合は、使用しているウイルスチェックのソフトを一時的にオフにしてから（こちらの操作も自己責任でお願いします）、VSCodeの再インストールを試してください。特に、MalwareByteを使用している場合はこの問題が発生するようです。
- rg.exe
- Code.exe
VSCodeの使い方
公式ドキュメントはこちら。
https://code.visualstudio.com/docs
コマンドパレット
「Ctrl ＋P」を押下するとVSCodeエディタ最上部にコマンドパレットと呼ばれる欄が表示され、ここで何をしたいかの命令を実行することになります。
デフォルトでは入力した文字列のファイルを検索します。
「?」を入力するとヘルプメニューが表示されます。
「：＋数字」で開いているファイルの指定した行数の場所にジャンプします。割と頻繁に使います。
例）:20 と入力すると20行目に移動します。
「>」を入力すると実行可能なコマンドのリスト表示とその実行を行います。
「Ctrl + Shift + P」は上記「Ctrl＋P」でコマンドパレットを表示してから「>」を入力したのと同様になるのでこのショートカットは便利です。
日本語化
VSCode内の表示を英語から日本語に切り替えます。
コマンドパレットを開き「>Configure Display Language」を入力。言語リストが表示されるので「日本語を選択」します。VSCodeの再起動が要求されるのでそのまま再起動します。
まとめ
今回の学習ではWebシステムの開発によく使われるVSCodeをインストールしてVSCodeの表示を日本語化するところまで行いました。よく使うショートカットや、VSCodeの詳細設定、キーバインディング、便利なExtension等については別記事で紹介します。VSCodeのインストールができたので、次はGitBashというLinuxコマンドが使えるソフトのインストールをしてVSCode内で使えるように設定していきます。
【近日公開】次回は「VSCodeとGitBashの統合｜GitBashのインストールとVSCodeの設定」について学習していきましょう。
コメント