VS Code Meetup #8 での発表資料です。 https://vscode.connpass.com/event/196685/ 紹介している拡張機能 indent-rainbow https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow YAML https://marketplace.visualstudio.com/items?itemName=redhat.vscode-yaml Ansible https://marketplace.visualstudio.com/items?itemName=redhat.vscode-yaml

1. Ansible でお世話になっている機能と拡張
2020/12/18 VS Code Meetup #8
株式会社エーピーコミュニケーションズ
技術開発部 ⾃動化グループ 横地 晃
1

2. はじめに
¡ Visual Studio Code は Ansible の Playbook を書くときにも便利です
¡ 私が使っている機能や拡張機能をご紹介します
2

3. ⾃⼰紹介
3
所属 エーピーコミュニケーションズ
業務 ネットワーク⾃動化の⽀援、アウトプット
コミュニティ Ansible ユーザー会、JANOG
共著・寄稿
Ansible実践ガイド 第3版
Software Design 2018年12⽉号 他
横地 晃 @akira6592
https://book.impress.co.jp/books/1118101094
https://tekunabe.hatenablog.jp/
https://gihyo.jp/magazine/SD/archive/2018/201812
てくなべ（ブログ）

4. Ansible とは︖
YAML で定義する ⾃動化ツール
4

5. Simple、Powerful、Agentless な⾃動化ツール
¡ サーバー、クラウド、ネットワーク機器などに対応
¡ Playbook （YAML 形式）で処理を定義
5
---
- hosts: ios
gather_facts: false
tasks:
# show ip route の実行
- name: show ip route
ios_command:
commands:
- show ip route
register: res_route
# デバッグ
- name: debug
debug:
msg: "{{ res_route.sdtiout_lines[0] }}"
Playbook の例

6. 便利な標準機能
標準機能でも
6

7. 標準機能でもそこそこ捗る
7
スペースの可視化（・）
"editor.renderWhitespace": "all"
インデントガイド（縦線）
"editor.renderIndentGuides": true
（デフォルト）
シンタックスハイライト

8. 便利な拡張機能
実際に使っている機能を抜粋してご紹介
8

9. 「indent-rainbow」によるインデントの⾊分け
9https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow
※ 分かりやすさのため濃い⾊に変更済み
インデントの
階層ごとに⾊分け

10. 「YAML」によるシンタックスチェック
10https://marketplace.visualstudio.com/items?itemName=redhat.vscode-yaml
YAML的なエラーを検出
（例︓キーの重複）
PROBLEMS（問題）
にもリアルタイム表⽰

11. 「YAML」によるフォーマット
11https://marketplace.visualstudio.com/items?itemName=redhat.vscode-yaml
不要な末尾スペース、深すぎるインデント
などが修正される
不要
不要
不要

12. 「Ansible」によるキーワード補完
12https://marketplace.visualstudio.com/items?itemName=vscoss.vscode-ansible
キーワード、モジュール名
の補完
その他の機能例
・スニペット
・Docker などの環境を指定したPlaybook実⾏

13. まとめ
13

14. まとめ
¡ YAML はちょっとしたことでハマることがあるが、エディタの⼒で捗る
¡ Playbook を書く⼈にとっても Visual Studio Code は便利
¡ 拡張機能でより便利に
¡ indent-rainbow
¡ https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow
¡ YAML
¡ https://marketplace.visualstudio.com/items?itemName=redhat.vscode-yaml
¡ Ansible
¡ https://marketplace.visualstudio.com/items?itemName=redhat.vscode-yaml
14

15. 参考
¡ VSCodeのAnsible Extension｜SHIFT Group
¡ https://note.com/shift_tech/n/nd3572aba4e9b
¡ [Ansible] Visual Studio Code で Playbook を書く時に便利な拡張たち
¡ https://tekunabe.hatenablog.jp/entry/2019/09/21/vscode_playbook
15