Save 37% off PRO during our Black Friday Sale! »

AnsibleユーザーのためのVS Code拡張機能の紹介 / VS Code Ansible Extension for Dummies

0e3cc0e218e5bcb4c4da827fb5668f5a?s=47 えんでぃ
November 20, 2021

AnsibleユーザーのためのVS Code拡張機能の紹介 / VS Code Ansible Extension for Dummies

VS Code Conference Japan 2021 の登壇資料です。
Ansible拡張機能の導入方法と使い方を紹介します。

イベント情報
https://vscode.connpass.com/event/221961/

資料の最新版は、Google Slidesにあります。
https://docs.google.com/presentation/d/1kxGktDEQNDKf9s1OaeeQsmtVavStt0vttKUEfy5131s/edit?usp=sharing

0e3cc0e218e5bcb4c4da827fb5668f5a?s=128

えんでぃ

November 20, 2021
Tweet

Transcript

  1. Ansibleユーザーのための VS Code拡張機能の紹介 2021/11/20 えんでぃ 資料のリンク、引用、スクリーンショット等はご自由にどうぞ

  2. 自己紹介 ハンドルネーム えんでぃ VS Code の使い方 Ansible Playbook、Python、ブログ (Markdown) 外部コミュニティ

    Ansibleユーザー会 2 https://ansible-users.connpass.com/ Connpassからイベント開催を通知します (ハンズオン、Ansible Night、座談会など) 特定技術領域に特化したイベントもあります (ネットワーク部、Developer部、VMware部) LinuxやNWのことを書きます (個人ブログ) https://endy-tech.hatenablog.jp/archive
  3. コンテンツ • Ansibleとは • Ansible拡張機能 (基本編) • Ansible拡張機能 (応用編) •

    その他のおすすめ拡張機能 動作環境 Ansible拡張機能: v0.4.5 OS: Linux (Fedora Server 33) ansible-core: 2.11.5 ansible-lint: 5.1.3 yamllint: 1.26.3 3
  4. Ansibleとは 1スライドで説明します 4

  5. Ansible Server Ansible とは Ansible の基本動作 (Playbookを読み込んで命令実行) • 複数の機器の設定変更・情報取得を一括で実行する自動化ツール •

    NW機器、Windows、Linux、vSphere、その他Rest API に対応 • Simple, Powerful, Agentless (簡単、高機能) • 非プログラマーによる自動化推進の強い味方 Playbook (YAML形式で処理内容を記述したもの) - hosts: linux tasks: - yum: state: installed name: - bind - bind-utils Playbook (1) 読込み (2) SSH / HTTPS ↑ 今回は、Ansible Playbookを  VS Code で便利に書く機能を紹介します 1 2 3 4 5 6 7 5
  6. Ansible拡張機能 (基本編) 概要 セットアップ方法 機能紹介 6

  7. 2017 2018 2019 2020 2021 Ansible公式拡張機能の変遷 • 色々な拡張機能があって迷う... • 現時点ではredhat.ansibleが推奨

    7 Ansible (vscoss.vscode-ansible, Microsoft製) 公開停止 (Unpublished) Ansible Language (zbr.vscode-ansible) YAML (redhat.vscode-yaml, Red Hat製) 依存関係 Ansible (tomaciazek.ansible) Ansible (redhat.ansible) 移行 マージ [1] 非推奨 (Deprecated) 第一 世代 第二 世代 第三 世代
  8. Ansible (redhat.ansible) 機能名 機能詳細 Syntax Hightlighting ソースコードの色分け Validation 文法、コーディング規約の警告・エラー表示 Auto

    Completion キーワードやモジュール名の入力補完。FQCNにも対応 Documentation Reference キーワードやモジュールの説明表示 8 • Ansible Language Server • Ansibleに関連するYAML言語サポートの強化 (主にPlaybook) Ansible Language Server https://github.com/ansible/ansible-language-server
  9. * 必須の依存パッケージをインストールしないと Validation機能が動作せず、エラーのポップアップが出る (Validation以外の機能は正しく動作する ) * VS Codeの設定で ansible.ansibleLint.enabled を

    false にセットすることで、 Validationを無効化し、ポップアップを抑止できる セットアップ手順 9 パッケージ名 必須 / 任意 説明 ansible-lint 必須 Ansible観点のコーディング規約の警告のため ansible-core 必須 Ansible 観点の文法チェックのため (ansible-playbook --syntax-check) yamllint 任意 YAML観点のコーディング規約の警告のため * 任意だが、インストール推奨 pip install --user \ ansible-core \ ansible-lint \ yamllint 1. 通常の手順でredhat.ansibleをインストールする 2. Validation 機能を動作させるため、以下の依存パッケージをインストールする
  10. 機能1. Syntax Highlighting • YAMLよりもAnsibleに特化した色分け • 色の違いでミスに気付ける YAML の場合 Ansible

    の場合 Playbookキーワード モジュール名 モジュールオプション ★非キーワード Jinja2 の括弧 10
  11. 機能2. Validation • 3つの観点で、文法やコーディング規約のエラーを表示する # 内部実行コマンド 検知対象 検知タイミング (1) ansible-playbook

    --syntax-check Ansible 観点の文法エラー ファイル保存時 (Ctrl+S) (2) ansible-lint Ansible 観点のコーディング規約違反 リアルタイム (3) yamllint YAML 観点のコーディング規約違反 リアルタイム (2) (3) (1) ルール名 syntax-check -> (1) yaml -> (3) 上記以外 -> (2) 行,列番号 11
  12. * ansible.ansible.useFullyQualifiedCollectionNames を False に変更すると、FQCNを使わずに補完する Falseの場合、ansible-coreに含まれるキーワードや collections keyword に指定されたものは省略形で、それ以外のものは FQCNで補完する

    機能3. Auto Completion (Intellisense) • キーワード補完 + 解説表示 (Ctrl+Space) • モジュールオプションも補完可能 • デフォルトでは、FQCNによって補完する (*) Ctrl + Space 12
  13. 機能4. Documentation Reference • 説明文の表示 (キーワードにマウスカーソルを合わせる) 13 • ソースコードにジャンプ (モジュール名を右クリックして

    Go to Definition) Go to Definition ソースコードの表示
  14. Ansible拡張機能 (応用編) Ansible 拡張機能を使えない問題の回避 YAML拡張機能との競合回避 Ctrl+F5 によるAnsible実行 Ctrl+Shift+I によるAuto Formatter実行

    14
  15. Tip 1. Ansible 拡張機能を使えない問題の回避 • Ansible拡張機能は、VS Code上でフォルダを開いて使用すること (File > Open

    Folder) • 上記で開いたフォルダ以外で YAMLファイルを開いた場合、 Ansible 拡張機能が使えなくなる (Language Server が起動しないため ) • ファイルを保存せずに開いたり、 Ctrl+Oで別フォルダのファイルを開くと本事象にヒットするので注意 15 ↑ VS Code で開いているフォルダ配下に playbook.ymlがあるため、入力補完が正しく動作する ↑ VS Code でフォルダを開いていない場合、 入力補完に失敗する
  16. Tip 2. YAML拡張機能との競合回避 • Ansible と YAML (redhat.vscode-yaml) の両方をインストールしていると競合する可能性あり •

    両方をインストールした状態で「 .yml」か「.yaml」ファイルを開くと、デフォルトでは YAMLが起動し、Ansibleは起動しない • VS Codeの設定変更により回避可能 16 "files.associations ": { "**/playbooks/*.yml ": "ansible", "**/playbooks/*.yaml ": "ansible", "**/hostvars/*.yml ": "ansible", "**/group_vars/*.yml ": "ansible", "**/tasks/*.yaml ": "ansible", "**/tasks/*.yml ": "ansible", "**/defaults/*.yaml ": "ansible", "**/defaults/*.yml ": "ansible", "**/vars/*.yaml ": "ansible", "**/vars/*.yml ": "ansible", "**/meta/*.yaml ": "ansible", "**/meta/*.yml ": "ansible", "**/handlers/*.yaml ": "ansible", "**/handlers/*.yml ": "ansible" } ↑File Associations の設定変更 [1] 以下の設定をVS Codeの設定 (Ctrl + ,) に追記し、Ansible関連ファイルを設定通りに格納する。 ユーザー指定のファイル拡張子指定がデフォルトの動作よりも優先されるという仕様を利用している。 [1] https://github.com/ansible/vscode-ansible/issues/162
  17. Tip 3. Ctrl+F5 によるAnsible実行 • 基本的には、Ctrl+F5による保存&実行や F5によるデバッグは不可 (2021/10現在、Ansible拡張機能にデバッグ機能がないため ) •

    Commands (usernamehw.commands) という拡張機能を使えば、 Ctrl+F5 による保存 & 実行が可能となる • 一部制限あり。次スライド参照 17 手順1. Commands 拡張機能のインストール (usernamehw.commands) 通常の手順でインストールする。 単一のショートカットキーに対して複数のアクションを割り当てることができるようになる (他にも機能多数)。 手順2. VS Code のsettings.json に以下を追記 (Ctrl+Shift+P → workbench.action.openSettingsJson) 以下の2コマンドを順に実行する、新たなコマンドを生成 (saveAndExecuteAnsiblePlaybook)。  ・ファイル保存 (workbench.action.files.save)  ・ansible-playbook実行 (extension.ansible-playbook.run) "commands.commands": { "saveAndExecuteAnsiblePlaybook": { "sequence": [ "workbench.action.files.save", "extension.ansible-playbook.run", ] } },
  18. Tip 3. Ctrl+F5 によるAnsible実行 18 手順3. keybindings.json の編集 (Ctrl+Shift+P →

    workbench.action.openGlobalKeybindingsFile) 手順2で作成したコマンドにショートカットキーを割り当てる。 言語がAnsibleである場合のみショートカットキーが有効となる 設定を入れるため、 GUIではなくjsonを直接編集している { "key": "ctrl+f5", "command": "saveAndExecuteAnsiblePlaybook", "when": "editorLangId == ansible" }, 手順4. Ansible設定ファイルの編集 (任意) ショートカットキーで実行する際、 -i によってインベントリファイルを指定できない。 デフォルトの/etc/ansible/hosts以外のパスを利用する場合は、 ansible.cfgで指定しておく[1]。 # ~/.ansible.cfg (in the home directory) [defaults] inventory = $PWD/hosts [1] ansible.cfgのパス, https://docs.ansible.com/ansible/latest/reference_appendices/general_precedence.html#configuration-settings
  19. Tip 3. Ctrl+F5 によるAnsible実行 19 手順5. 使う Playbookのエディタにカーソルがあっている状態で Ctrl+F5を押せば、ansible-playbookが実行される 制限事項

    • ショートカットキーを使えるのは、エディタにマウスカーソルがあっている時のみ * 手順3のeditorLangIdの制約 [1] • ansible-playbook コマンドにオプションを渡すことはできない * extension.ansible-playbook.run の制約 [1] When clause contexts, https://code.visualstudio.com/api/references/when-clause-contexts#available-contexts
  20. Tip 3. Ctrl+F5 によるAnsible実行 20 ▪(補足) コマンドラインオプションを渡す方法 Ansible拡張機能の命令を使わなくなる関係で、 Ctrl+F5から実行した時に拡張機能のオプションが無視されるので、推奨はしない 。

    例えば、ansible-playbook実行ファイルパスの設定 (ansible.ansiblePlaybook.path) が効かなくなる。 手順2のsettings.jsonの記載内容を以下のように変更する。 以下は、--check オプションをデフォルトで有効にする例。 “args” 配下で${file} を変数展開できるように、 commands.variableSubstitutionEnabled をTrueにセットしている[1]。 --tags, --diff などのデフォルト値を指定したい場合は、 ansible.cfg による設定を先に検討するのが推奨 "commands.commands": { "saveAndExecuteAnsiblePlaybook": { "sequence": [ "workbench.action.files.save", { "command": "commands.runInTerminal", "args": "ansible-playbook ${file} --check" } ] } } "commands.variableSubstitutionEnabled": true, [1] Predefined variables, https://code.visualstudio.com/docs/editor/variables-reference Skip
  21. Tip 4. Ctrl+Shift+I によるAuto Formatter実行 21 • 2021/10 現在、Ansible拡張機能にはAuto Formatter

    機能がない (*) • しかし、工夫すればYAML拡張機能のAuto Formatter を呼び出すことはできる * Auto Formatter は、Ctrl+Shift+I で空行やインデントなどの体裁を自動で整えてくれる機能 * yamllint のエラーをある程度自動修正してくれるスグレモノ 手順1. Commands 拡張機能のインストール (usernamehw.commands) 通常の手順でインストールする。 単一のショートカットキーに対して複数のアクションを割り当てることができるようになる。 アクションに引数を付けて実行できる。 (他にも機能多数) 手順2. YAML拡張機能のインストール (redhat.vscode-yaml) 通常の手順でインストールする
  22. Tip 4. Ctrl+Shift+I によるAuto Formatter実行 手順3. VS Code のsettings.json に以下を追記

    (Ctrl+Shift+P → workbench.action.openSettingsJson) 以下の3コマンドを順に実行する、新たなコマンドを生成 (formatAnsible)。  ・エディタ言語をYAMLに変更 (commands.setEditorLanguage)  ・Auto Format の実行 (extension.ansible-playbook.run)  ・エディタ言語をAnsibleに戻す (commands.setEditorLanguage) 22 "commands.commands ": { "formatAnsible ": { "sequence ": [ { "command": "commands.setEditorLanguage ", "args": "yaml" }, { "command": "editor.action.formatDocument " }, { "command": "commands.setEditorLanguage ", "args": "ansible" } ] }, # "saveAndExecuteAnsiblePlaybook": {  # Tip3 の設定 },
  23. Ctrl+Shift+I Tip 4. Ctrl+Shift+I によるAuto Formatter実行 手順4. keybindings.json の編集 (Ctrl+Shift+P

    → workbench.action.openGlobalKeybindingsFile) 手順3で作成したコマンドにショートカットキーを割り当てる。 言語がAnsibleである場合のみショートカットキーが有効となる 設定を入れるため、 GUIではなくjsonを直接編集している 23 { "key": "ctrl+shift+i", "command": "formatAnsible", "when": "editorLangId == ansible" }, 手順5. 使う (Shift+Ctrl+I) 先頭の無駄な空行が削除する例
  24. Tip 4. Ctrl+Shift+I によるAuto Formatter実行 24 制限事項 • ショートカットキーを使えるのは、エディタにマウスカーソルがあっている時のみ *

    手順3のeditorLangIdの制約 [1] Tip 3と同じ [1] When clause contexts, https://code.visualstudio.com/api/references/when-clause-contexts#available-contexts
  25. その他のおすすめ機能 その他オススメの拡張機能 25

  26. Editor: Render Whitespace (editor.renderWhitespace) 26 • 標準機能 • 設定 (Ctrl+,)

    → editor.renderWhitespace → all • スペースやタブ文字を可視化する ↑デフォルト (selection) ↑設定変更後 (all) 3行目にタブx4、4行目に半角スペースx1
  27. SSHで遠隔操作 Remote - SSH (ms-vscode-remote.remote-ssh) • 拡張機能 • Windows/Mac のVS

    CodeからLinuxを遠隔操作する • Windows / Mac の使い勝手と、Linux 開発環境を両立できる • Ansible はWindows上では動作しないので、Windowsユーザーにはほぼ必須の機能 27 Windows / Mac Linux * Remote Development using SSH https://code.visualstudio.com/docs/remote/ssh
  28. Indent Rainbow (oderwat.indent-rainbow) • 拡張機能 • インデントの違いを色で強調する 28 * Indent

    Rainbow https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow ↑拡張機能なし ↑拡張機能あり
  29. Highlight Bad Chars (wengerk.highlight-bad-chars) • 拡張機能 • 良くない文字を強調表示する 29 *

    Highlight Bad Chars https://marketplace.visualstudio.com/items?itemName=wengerk.highlight-bad-chars ↑拡張機能なし ↑拡張機能あり (全角スペース) ↑拡張機能あり (ゼロ幅スペース) ↑拡張機能なし
  30. Highlight Bad Chars (wengerk.highlight-bad-chars) • カスタマイズ例 30 * NG文字のデフォルト値 ,

    https://github.com/WengerK/vscode-highlight-bad-chars/blob/master/src/bad-characters.ts * スタイルのデフォルト値 , https://github.com/WengerK/vscode-highlight-bad-chars/blob/master/package.json#L40 * スタイルに利用可能なパラメータ , https://code.visualstudio.com/api/references/vscode-api#DecorationRenderOptions // タブ文字もNGに加える "highlight-bad-chars.additionalUnicodeChars": [ "\u0009" ] // スタイルのカスタマイズ "highlight-bad-chars.badCharDecorationStyle": { "backgroundColor": "rgba(255,255,255,0.3)", "borderColor": "rgba(255,255,255,0.4)", "borderRadius": "4px" },
  31. ENDy 31