LoginSignup
14
18

More than 3 years have passed since last update.

VSCodeにGitLensをインストールしてソースコード管理の開始

Last updated at Posted at 2019-10-14

はじめに

今回は、Visual Studio Codeでソースコード管理を開始する方法をまとめます。
Visual Studio Codeでは、最初からGitを使ってソースコード管理する機能が備わっています。
Alexaのスキル開発でNode.jsを使って行っており、前々からソースコード管理しようと思っていたのですが、それほど大きなソースでもなかったことから、TODO管理さえしていればなんとでもなったのですが、色々始めるとだんだんとコードも複雑になり、コードの履歴とか、前バージョンからの差分チェックなど必要となってきたため、実施することにしました。
ソースコード管理と言っても、今のところはローカルで実施するだけでいいかなと思っています。GitHubに入れるほどでもないというか、面倒なのでそこまでまだしていないというか、それよりもすることがあるというか。
なお、Alexaのスキル開発に特化した記載になりますのでご注意ください。

今回実施する内容

Visual Studio Codeで、Gitを使ってソースコード管理を開始します。
なお、Alexaのスキル開発に特化した記載になりますのでご注意ください。

環境

OS:Windows 10 JP
Alexaスキル言語:Node.js
Editor:Visual Studio Code
Alexa developer console

参考

用語

Visual Studio Code (VSCode)

マイクロソフトのフリーのプログラムのエディター。

前提条件

特になし。

GitLensのインストール

Gitでソース管理をするにあたり、VSCodeでは標準でGitに対応しているため、特に問題なく使えるとは思うのですが、ソース管理された情報を閲覧するには、extensionをいれたほうがいいのかなと思います。
というかよく吟味しているわけではなく、extensionにいくつかあるため、単に入れてみただけですが、標準状態よりは少なくともよいと思います。
調べたところ、GitLensが見つかっただけで、どれがいいのかまで精査していません。
これから使ってみて何か不備や不都合があれば買えるかもしれません。

  1. VSCodeの拡張ボタンから、GitLensを検索して、インストールする。 GitLens.jpg これで、インストールは完了で、左端のメニューボタンにGitLensのボタンが現れます。

Git管理対象外ファイルの作成

Gitでソース管理しようとすると、結構不要なファイルやフォルダーまで管理してくれます。
AlexaのNode.jsでいえば、node_modulesのような、モジュールのフォルダは、自分のソースコードでもないし、編集もすることがないため、ソースコード管理する必要がないんです。
ファイル単位ではなく、一気にフォルダ単位で抜いてしまったほうが楽です。どうしたらいいのかなと思い、以下を見つけました。
Visual studio codeで.vscodeディレクトリをgit管理から外す

これを参考にすれば、フォルダごとソースコード管理対象から外すことができます。
管理を始める前にこれをやっておけば最初にたくさんのファイルのコミットをしなくてよいため、いいかなと思い、最初に実施することにしました。
この作業は、VSCode上で実施せず、Windows上で実施しました。VSCode上で実施してもよいと思います。

  1. ソースコード管理対象のフォルダを決める。
    VSCodeでソースコード管理するにあたり、どのフォルダは以下を対象にするのか決める必要があります。一般的にはプロジェクト配下だと思います。
    私の場合のプロジェクト配下のフォルダ構成は以下の通りです。

    \.ask
    \hooks
    \isps
    \lamda
    \models
    \node_modue
    .eslintrc.json
    .gitignore
    .package.json
    .package-lock.json
    .skill.json
    

    \.ask\hocks\node_modules.eslintrc.json.gitignore.package.json.package-lock.jsonは、管理不要と判断しました。
    これは、おそらく編集することがないためです。

  2. .gitignoreファイルをプロジェクトフォルダーに作成し、「対象外フォルダ」や「対象外のファイル」を当該ファイルに記載する。
    [Git] .gitignoreの仕様詳解を参考に、以下の通り、.gitignoreファイルを作成し、プロジェクト配下に置く。

    .gitignore
    .ask
    hooks
    node_modules
    .eslintrc.json
    .gitignore
    package.json
    package-lock.json
    skill.json
    

    「\」を記載しないで書くと、.gitignore以下のフォルダやファイルをサブフォルダまでみて、対象外にするようです。

.gitignoreに関する作業は以上です。

Gitによるソースコード管理設定

再び、VSCode上で作業します。

  1. メニューボタンから「ソースコード管理」ボタンを押下する。
  2. ソース管理メニューの「+」を押して管理するプロジェクトのフォルダを選択する。
    ソース管理ボタン.jpg
    こうすると、プロジェクトフォルダ配下にgitフォルダ(隠しフォルダ)が作成され、また画面上に以下のように管理対象のファイルが表示される(サンプルソースコードのためいたってシンプルです)。
    これがローカルリポジトリと思います。
    ソース管理対象ファイル.jpg

  3. チェックボタン「レ」ボタンを押して、メッセージ入力画面が表示されるため、「First edition.」とでも入力する。これで、コミット完了となる。

おわりに

今回は、以下について記載しました。

  • VSCodeにGitLensをインストールする方法
  • .gitignoreで管理対象フォルダやファイルを制限する方法
  • Gitでの最初のコミット

次回は、使い方について説明したいと思います。
さすがにこれだけだと、備忘にもなっていないので、もう少し次回記載します。

14
18
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
14
18