開発環境を整える(VSCode + Git)
これからPythonやWEBアプリを開発したい人向けの開発環境を整えます。
自分用のメモ書きなので、間違いやより良い方法があればご指摘ください。
Visual Studio Codeのインストール
Visual Studio Code(以下VSCode)は無料で利用できるコードエディタです。
VSCodeの特徴
VSCodeはプラグインを拡張できることが特徴で、IDEと遜色のない開発環境を整えることができます。
小規模なアプリ開発に向いているといわれ、Gitと連携できたりも出来るため、チーム開発も可能です。
OSもWindows、MacOS、Linuxとどれでも使用可のです。
VSCodeのダウンロード
こちらのページからダウンロード可能です。
State Buildを使用するようにしましょう。
VSCodeのインストール
v1.81の時のインストールを前提に説明します。
表示内容は環境によって順序が変わったり、追加・削除されている可能性があります。
使用許諾契約書の同意
最初に同意書が表示されます。ライセンス条項を読み、同意するにして次へ。
インストール先の指定
このまま初期値で次へを押してください。
スタートメニューフォルダの指定
こちらも初期値のまま次へ。
追加タスクの選択
追加タスクが表示されます。
☑エクスプローラーのファイルコンテキストメニューに[Codeで開く]アクションを追加する
☑エクスプローラーのディレクトリコンテキストメニューに[Codeで開く]アクションを追加する
☑サポートされているファイルの種類のエディターとして、Codeを登録する
☑PATHへの追加（再起動後に可能）
の4つにチェックをつけて次へ。
インストール準備完了
このままインストールを押して実行してください。
インストールの完了
数秒待つとインストールが終わります。完了ボタンを押してください。
閉じるとVSCodeが起動します。これでインストール作業は完了です。
VSCodeの日本語化
拡張機能を早速使い、日本語化してみましょう。
拡張機能を開く
一番左のアイコンからExtensionsを選択する。
Ctrl+Shift+Xで開くこともできる。
検索する
検索ボックスに「Japanese」と入力する。
ボックスの下に検索結果が一覧表示されるので。
インストールする
検索結果から「Japanese Language Pack for Visual Studio Code」をインストールする。
アイコンや名前の部分をクリックすると右の画面に詳細が表示される。
パッケージ名があっていることと、Microsoftが提供していることを確認し、Installボタンを押す。
インストールが完了すると右下にリスタートボタンが表示されるので押す。
VSCodeが再起動し日本語になっているはずです。
Gitのインストール
Gitをインストールすることで、プロジェクトのバージョンを管理することができます。
開発途中で一度昔に戻りたい場合や、本番用を残してテスト用で開発を進めたい場合などに便利です。
また、チームで開発する時には同時にファイルを変更してしまってバッティングした時の整理なども行えます。
詳細は後程学びましょう。
Gitをダウンロードする
VSCodeの左側のメニューからSource Controlを開きます。
ショートカットのCtrl+Shift+Gでも開けます。
開くとGitのダウンロードURLが表示されているので開きます。
こちらからもダウンロードできます。環境に合わせたものをダウンロードしましょう。
Windowsであれば、Standalone Installerの64-bit Git for Windows Setupを選んでおけばOKです。
Gitをインストールする
ダウンロードしたファイルを実行してください。
とくにすべて設定は初期値のままインストールで大丈夫です。
インストール終了の画面になったら、どちらのチェックも外してFinishボタンを押してください。
Gitの初期設定
Gitをインストールしたら初期設定を行います。
GitBashを使って作業をしてもいいのですが、せっかくなのでVSCodeのターミナルを使用します。
VSCodeの上部メニューバーから「ターミナル」⇒「新しいターミナル」を選択する。
VSCodeの下部にターミナルウィンドウが表示されるので、その中にコマンドを打ち込んでいく。
git config --global user.name 'username'
git config --global user.email 'mail@address.com'
git config --global core.editor 'code --wait'
git config --global merge.tool 'code --wait "$MERGED"'
git config --global push.default simple
user.name, user.email: ユーザ名とメールアドレスの設定。これがないとgitが使えません。
core.editor, marge.tool: エディタとマージツールにVSCodeを指定。
push.default: gitのpush方式を指定。しないと警告が出る場合があるらしい。
GitHubとの連携
GitHubとの連携を行います。先にGitHubへの登録を済ませておきましょう。
「GitHub Pull Requests and Issues」というGitHub公式の拡張機能をインストールします。
先ほどの日本語化と同じ方法でインストールできます。
インストール出来たらGitHubにサインインします。
VSCodeの左下にある「アカウント」アイコンをクリックします。
「Sign in to Github.com」をクリックするとブラウザが開くのでGithubにログインします。
ログインに成功するとVSCodeとGithubの連携が終わります。
ここまで終了したら一度PCを再起動します。
これで基本的なセッティングは終わりです。
Discussion