Go to Qiita Advent Calendar 2024 Top
LoginSignup
5
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@GENO(ジーノ)

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

Last updated at Posted at 2019-09-23

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

Ansibleとは何ぞや?という方は、下記をご一読いただければと思います。

作成するに至った経緯

  • 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

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を作成いたしました。興味があれば、下記も参照していただければと思います。

参考URL

今回使用したモジュール

VSCodeのインストール関連

5
6
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
Sign upLogin
5
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?