Ansibleを使用して、CentOS 7に VSCodeと拡張機能をインストールする

# Ansibleを使用して、CentOS 7に VSCodeと拡張機能をインストールする
Ansibleとは何ぞや?という方は、下記をご一読いただければと思います。
- [Ansibleをはじめる人に](https://qiita.com/t_nakayama0714/items/fe55ee56d6446f67113c)
- [Ansibleではじめるサーバー・ネットワークの自動化（2018/07/05）](https://www.slideshare.net/akira6592/ansible-svnw-automation20180705)

## 作成するに至った経緯
- proxy環境下でCentOS 7 にVSCodeの拡張機能のインストールを行うのが地味に面倒くさかったため
- これを機に自動化をしておこうと思ったため

## 対象者
- CentOS 7 にVSCodeと拡張機能を簡単にインストールしたい方

## 前提条件
- Ansibleはインストール済みであるとする
- config、inventoryの設定は完了済みであるとする
- 鍵生成、鍵交換、疎通確認は完了済みであるとする
- 今回は、proxy環境下ではないものとする

## 実行環境

```
# cat /etc/redhat-release
CentOS Linux release 7.7.1908 (Core)
# ansible --version
ansible 2.8.4
  config file = /etc/ansible/ansible.cfg
  configured module search path = [u'/root/.ansible/plugins/modules', u'/usr/share/ansible/plugins/modules']
  ansible python module location = /usr/lib/python2.7/site-packages/ansible
  executable location = /bin/ansible
  python version = 2.7.5 (default, Aug  7 2019, 00:51:29) [GCC 4.8.5 20150623 (Red Hat 4.8.5-39)]
```

## 本playbookで行っていることの概要
- yum updateの実施
- VSCode + Markdown + PlantUMLの環境構築に必要なパッケージのインストール
- VSCodeのインストール
- VSCodeの日本語化
- 拡張機能のインストール

## 本playbook実行後に得られるもの
- 一般ユーザーでログイン後、[アプリケーション] -> [プログラミング] -> VSCodeが表示されている
- VSCode起動時に、日本語表示で起動される
- VSCodeでファイル編集時に、日本語入力ができる
- .mdファイル作成後、[Ctrl] + [Shift] + [V]　でMarkdownのプレビューが表示されるようになる
- .puファイル作成後、[Alt] + [D] でUMLが描画されるようになる
- playbookにインストールした各拡張機能がすぐに使える環境が整う

## 本playbookの実行方法
```
# cd [playbookを格納しているディレクトリ]
# ansible-playbook SetupVSCode.yml
```

## デバッグ時のplaybookの実行方法
```
# ansible-playbook SetupVSCode.yml -v
```

## 拡張機能のインストールから実行したい場合のplaybookの実行方法
```
# ansible-playbook SetupVSCode.yml --start-at="install a list of extension"
```


## VSCodeと拡張機能をインストールするplaybook
- 自宅で動作確認したので、hosts: localhost になっております。
- 異なる環境下で使用する場合は、環境に合わせて設定変更が必要となります。

``` SetupVSCode.yml
- name: install VSCode
  hosts: localhost
  vars:
    vscode_extension_list:
    ## Convert Tool
    - ahebrank.yaml2json
    - buianhthang.xml2json
    - khaeransori.json2csv
    - tuxtina.json2yaml
    ## Development Support
    - 2gua.rainbow-brackets
    - aaron-bond.better-comments
    - afmicc.GetterAndSetterGenerator
    - alefragnani.Bookmarks
    - chrmarti.regex
    - CoenraadS.bracket-pair-colorizer
    - Compulim.vscode-ipaddress
    - emilast.LogFileHighlighter
    - esbenp.prettier-vscode
    - fosshaas.fontsize-shortcuts
    - humao.rest-client
    - IBM.output-colorizer
    - ionutvmi.path-autocomplete
    - mechatroner.rainbow-csv
    - romanpeshkov.vscode-text-tables
    - ryu1kn.partial-diff
    - ryu1kn.text-marker
    - shardulm94.trailing-spaces
    - wayou.vscode-todo-highlight
    ## Git
    - codezombiech.gitignore
    - donjayamanne.githistory
    - donjayamanne.git-extension-pack
    - eamodio.gitlens
    - GitHub.vscode-pull-request-github
    - huizhou.githd
    - ivangabriele.vscode-git-add-and-commit
    - mhutchie.git-graph
    - shaharkazaz.git-merger
    - waderyan.gitblame
    ## Icons + Theme
    - 74th.monokai-charcoal-high-contrast
    - akamud.vscode-theme-onedark
    - azemoh.one-monokai
    - PKief.material-icon-theme
    - SolarLiner.linux-themes
    - vscode-icons-team.vscode-icons
    ## Java + Jetty + Maven + SpringBoot + Tomcat
    - adashen.vscode-tomcat
    - GabrielBB.vscode-lombok
    - Pivotal.vscode-boot-dev-pack
    - Pivotal.vscode-spring-boot
    - SummerSun.vscode-jetty
    - vscjava.vscode-java-debug
    - vscjava.vscode-java-pack
    - vscjava.vscode-java-test
    - vscjava.vscode-maven
    - vscjava.vscode-spring-boot-dashboard
    - vscjava.vscode-spring-initializr
    ## JSON
    - andyyaldoo.vscode-json
    - Arjun.swagger-viewer
    - eriklynd.json-tools
    - nickdemayo.vscode-json-editor
    - quicktype.quicktype
    - richie5um2.vscode-sort-json
    - stormwarning.json-template
    - ZainChen.json
    ## Markdown + PlantUML
    - arichika.previewseqdiag-vscode
    - bierner.markdown-checkbox
    - bierner.markdown-preview-github-styles
    - DavidAnson.vscode-markdownlint
    - goessner.mdmath
    - jebbs.plantuml
    - shd101wyy.markdown-preview-enhanced
    - yzane.markdown-pdf
    - yzhang.markdown-all-in-one
    - telesoho.vscode-markdown-paste-image
    ## Microsoft
    - vscoss.vscode-ansible
    - ms-azuretools.vscode-docker
    - ms-python.python
    - ms-vscode.cpptools
    - ms-vscode.csharp
    - ms-vscode.Go
    - MS-CEINTL.vscode-language-pack-ja
    - VisualStudioExptTeam.vscodeintellicode
    ## RedHat
    - redhat.java
    - redhat.vscode-xml
    - redhat.vscode-yaml
  tasks:
  - name: upgrade all packages
    yum:
      name: '*'
      state: latest

  - name: install a list of packages
    yum:
      name:
        - doxygen
        - graphviz
        - ibus-kkc
        - ipa-gothic-fonts
        - ipa-mincho-fonts
        - ipa-pgothic-fonts
        - ipa-pmincho-fonts
        - java-1.8.0-openjdk
        - vim
        - vlgothic-*
        - "@Development tools"
      state: latest

  - name: install the key
    rpm_key:
      key: https://packages.microsoft.com/keys/microsoft.asc
      state: present

  - name: Insert/Update vscode.repository in /etc/yum.repos.d/vscode.repo
    blockinfile:
      path: /etc/yum.repos.d/vscode.repo
      create: yes
      regexp: '^[code] '
      insertafter: '^#[code] '
      block: |
        [code]
        name=Visual Studio Code
        baseurl=https://packages.microsoft.com/yumrepos/vscode
        enabled=1
        gpgcheck=1
        gpgkey=https://packages.microsoft.com/keys/microsoft.asc

  - name: install code
    yum:
      name: code
      state: latest

  - name: remove old settings.json
    file:
      path: /home/testuser/.config/Code/User/settings.json
      state: absent

  - name: setting locale
    blockinfile:
      path: /home/testuser/.config/Code/User/settings.json
      create: yes
      state: present
      owner: testuser
      group: testuser
      mode: '0755'
      marker: ""
      block: |
        {
          "locale": "ja",
          "workbench.colorTheme": "Default High Contrast",
          "workbench.iconTheme": "vscode-icons",
        }

  - name: install a list of extension
    shell: code --install-extension {{ item }}
    become: yes
    become_user: testuser
    with_items: "{{ vscode_extension_list }}"
```

## 本playbookの使い方、解説
今回使用したモジュールは、末尾に記載しております。
各モジュールの解説は、公式のドキュメントが大変読みやすいのでそちらを参照願います。

#### インストールしたい拡張機能を変数 [vscode_extension_list] に列挙する
``` インストールしたい拡張機能リスト
  vars:
    vscode_extension_list:
    - ahebrank.yaml2json
    - buianhthang.xml2json
(以下省略)
``` 
上記のように、インストールしたい拡張機能の識別子を列挙していきます。
ここは、インストールしたい拡張機能を記述していきましょう。
識別子の探し方を下記表に記載いたします。

|No|操作内容|
|:--|:--|
|1|Marketplaceにアクセスする|
|2|インストールしたい拡張機能を検索し、クリックする|
|3|[More Info]に記載されている値をコピーする|
|4|[vscode_extension_list]にペーストする|

[Extensions for the Visual Studio family of products](https://marketplace.visualstudio.com/)

Pythonを例に挙げると、下記表の太字部分が該当します。

|項目|値|
|:--|:--|
|Version|2019.9.34911|
|Released on|2016/1/20 0:03:11|
|Last updated|2019/9/7 8:05:11|
|Publisher|Microsoft|
|Unique Identifier|**ms-python.python**|
|Report|Report Abuse|

#### yum updateの実施
念のため、実施しております。不要な場合は削除願います。

``` SetupVSCode.yml
  - name: upgrade all packages
    yum:
      name: '*'
      state: latest
```

#### VSCode + Markdown + PlantUMLの環境に必要なパッケージのインストール

``` SetupVSCode.yml
  - name: install a list of packages
    yum:
      name:
        - doxygen
        - graphviz
        - ibus-kkc
        - ipa-gothic-fonts
        - ipa-mincho-fonts
        - ipa-pgothic-fonts
        - ipa-pmincho-fonts
        - java-1.8.0-openjdk
        - vim
        - vlgothic-*
        - "@Development tools"
      state: latest
```

#### VSCodeのインストール

```　SetupVSCode.yml
  - name: install the key
    rpm_key:
      key: https://packages.microsoft.com/keys/microsoft.asc
      state: present

  - name: Insert/Update vscode.repository in /etc/yum.repos.d/vscode.repo
    blockinfile:
      path: /etc/yum.repos.d/vscode.repo
      create: yes
      regexp: '^[code] '
      insertafter: '^#[code] '
      block: |
        [code]
        name=Visual Studio Code
        baseurl=https://packages.microsoft.com/yumrepos/vscode
        enabled=1
        gpgcheck=1
        gpgkey=https://packages.microsoft.com/keys/microsoft.asc

  - name: install code
    yum:
      name: code
      state: latest
```
ちなみに、手動入力時の手順は下記になります。
整頓された手順を参考に、playbookを作成していくイメージになります。

```手動入力時の手順
# sudo rpm --import https://packages.microsoft.com/keys/microsoft.asc
# sudo sh -c 'echo -e "[code]\nname=Visual Studio Code\nbaseurl=https://packages.microsoft.com/yumrepos/vscode\nenabled=1\ngpgcheck=1\ngpgkey=https://packages.microsoft.com/keys/microsoft.asc" > /etc/yum.repos.d/vscode.repo
# yum check-update
# sudo yum install code
```

#### VSCodeの日本語化
settings.jsonに "locale":"ja" を追加して日本語設定にします。
また、配色テーマとアイコンも設定します。
異なる環境下で使用する場合は、testuser の箇所を使用する環境に合わせて変更してください。

``` SetupVSCode.yml
  - name: remove old settings.json
    file:
      path: /home/testuser/.config/Code/User/settings.json
      state: absent

  - name: setting locale
    blockinfile:
      path: /home/testuser/.config/Code/User/settings.json
      create: yes
      state: present
      owner: testuser
      group: testuser
      mode: '0755'
      marker: ""
      block: |
        {
          "locale": "ja",
          "workbench.colorTheme": "Default High Contrast",
          "workbench.iconTheme": "vscode-icons",
        }
```
ちなみに、marker:"" を設定しない場合、settings.jsonの内容は下記のようになります。

```
# BEGIN ANSIBLE MANAGED BLOCK
{
  "locale": "ja",
  "workbench.colorTheme": "Default High Contrast",
  "workbench.iconTheme": "vscode-icons",
}
# END ANSIBLE MANAGED BLOCK
```
JSON形式にならなくなってしまうので、marker:""は必須となります。

### 拡張機能のインストール
変数 [vscode_extension_list] に拡張機能を順番にインストールします。
異なる環境下で使用する場合は、testuser の箇所を使用する環境に合わせて変更してください。

``` SetupVSCode.yml
  - name: install a list of extension
    shell: code --install-extension {{ item }}
    become: yes
    become_user: testuser
    with_items: "{{ vscode_extension_list }}"
```

## 現状の課題
- 複数人のVSCode環境を一括で整備する場合、"testuser"の箇所を変数にする必要がある
  - ※解決できるかを今後検証

## 今後
- 複数人に統一した開発環境を整備したい場合、[become_user]を変数にする必要がある
- proxy環境下で実行する場合、settings.jsonに要設定追加

## 追記
VSCodeを起動すると、Gitの更新を催促されますので、Gitを更新するplaybookを作成いたしました。興味があれば、下記も参照していただければと思います。
- [Ansibleを使用して、CentOS 7にGit(v2.9.5)をインストールする](https://qiita.com/GENO/items/39f7df3fb3932628fbbc)

## 参考URL
#### 今回使用したモジュール
- [yum – Manages packages with the yum package manage](https://docs.ansible.com/ansible/latest/modules/yum_module.html?highlight=yum)
- [shell – Execute shell commands on targets](https://docs.ansible.com/ansible/latest/modules/shell_module.html?highlight=shell)
- [blockinfile – Insert/update/remove a text block surrounded by marker lines](https://docs.ansible.com/ansible/latest/modules/blockinfile_module.html?highlight=blockinfile)
- [rpm_key – Adds or removes a gpg key from the rpm db](https://docs.ansible.com/ansible/latest/modules/rpm_key_module.html?highlight=rpm_key)

#### VSCodeのインストール関連
- [Visual Studio Code on Linux](https://code.visualstudio.com/docs/setup/linux)
- [CentOS7.6にVisual Studio Code をインストール](https://qiita.com/kusanoiskuzuno/items/c323446f2707f9950ebb)
- [Visual Studio Code [vsCode] 日本語化](https://qiita.com/ntkgcj/items/e77331932c7983dea830)
- [VSCodeのオススメ拡張機能 24 選 (とTipsをいくつか)](https://qiita.com/sensuikan1973/items/74cf5383c02dbcd82234#18-todo-)