【VSCode】jenkinsfileを作るのに便利なVSCodeプラグインと、jenkinsfileとジョブの連携方法

# 最初に

どうも、ろっさむです。

今回は、VSCodeを用いてjenkinsfileを作成し、VSCode上であれこれ便利に編集する方法をまとめていきます。

Jenkinsのジョブ自体を久しぶりにメンテナンスする際に、構文がうろ覚え状態になることもあると思います。ですので、キーワード補間や、jenkinsfile側の構文に問題がないかをチェックするプラグインを使用して、快適に開発を進めましょう。

## 開発環境

- Visual Studio Code：**1.52.1**
- Windows：**Windows10**
- Jenkins：**2.263.1**
- **Decarativve Pipeline**を使用

# 今回おすすめするプラグイン

## JenkinsFile Support

**[JenkinsFile Support](https://marketplace.visualstudio.com/items?itemName=ivory-lab.jenkinsfile-support)**は、jenkinsfileを作成するにあたって必要になるキーワード補間やシンタックスハイライトなどの機能を提供してくれるプラグインです。
![image](https://user-images.githubusercontent.com/10665134/102842958-8df7df00-444b-11eb-82e3-ea960ef56109.png)

入れると以下のような感じになり、コーディングしやすくなります。
![image](https://user-images.githubusercontent.com/10665134/102857871-93195600-446c-11eb-801e-56fa374670c5.png)


## Jenkins Pipeline Linter Connector

**[Jenkins Pipeline Linter Connector](https://marketplace.visualstudio.com/items?itemName=janjoerke.jenkins-pipeline-linter-connector)**は構文が正しいかどうかをチェックすることができるプラグインです。
![image](https://user-images.githubusercontent.com/10665134/102843187-09599080-444c-11eb-97b5-c4951ffb545e.png)

### セットアップ

プラグインの画面にある歯車から、**`Extension Settings`**を押下します。
![image](https://user-images.githubusercontent.com/10665134/102859016-931a5580-446e-11eb-94b9-afec1ce32901.png)

必要な設定は以下の通りです。

![image](https://user-images.githubusercontent.com/10665134/102862298-391c8e80-4474-11eb-9a34-99d5f4408950.png)

|項目|概要|設定|
|---|-----|----|
|Url|Jenkins上のvalidaterのURL|http://[Jenkinsのダッシュボードを開いたときのURL]/pipeline-model-converter/validate (もしアドレスがデフォルトの場合は `http://localhost:8080/pipeline-model-converter/validate`)|
|Strictssl|JenkinsでSSL化している場合は設定が必要|`false`にするとinvalidのssl接続を許可します|
|User|Jenkinsユーザー名||
|Pass|Userで指定したユーザーのパスワード||

### 使用方法

設定が完了したら保存し、`jenkinsfile`を開いた状態でコマンドパレット(`Ctrl + Shift + P`)から `Validate Jenkinsfile`を実行するか、ショートカットキーである `Shift + Alt + V`を押下してください。
![image](https://user-images.githubusercontent.com/10665134/102863076-687fcb00-4475-11eb-804e-a05b6cc42aba.png)

そうすると`OUTPUT`に構文チェック結果が表示されます。

**「Jenkinsfile successfully validated.」**と表示されたら構文に問題はありません。
![image](https://user-images.githubusercontent.com/10665134/103051793-f88b5500-45da-11eb-8b9e-ce28e2984e62.png)

## Bracket Pair Colorizer 2

[Bracket Pair Colorizer 2](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2)は対応する括弧同士を色で認識することができるようになります。
![image](https://user-images.githubusercontent.com/10665134/103051516-68e5a680-45da-11eb-99d1-db822a29c165.png)

installするとこんな感じに↓
![image](https://user-images.githubusercontent.com/10665134/103051637-a5190700-45da-11eb-9979-5fee03eb691b.png)

# Jenkins側でのjenkinsfileを読み込む設定

まずはjenkinsfileをリポジトリ内の任意の場所に追加し、pushしておきます。

**「パイプライン > 定義」を「Pipeline script from SCM」に変更**し、SCMをGitかSubversionに変更します。RepositoryのURLやCredentials（ユーザー名とパスワード設定をここで行う）を設定します。また、**「Local module directory」にはそのジョブが存在するワーキングディレクトリからのcloneしてあるディレクトリへ相対パスを記述する**必要があります。

![image](https://user-images.githubusercontent.com/10665134/103070541-0bb31a80-4605-11eb-83c9-1e1c1513dd63.png)

ここまでやれば、コード自体のバージョン管理ができるようになります！

# 参考

- [【Jenkins】VSCodeからJenkinsのPipelineを編集/ビルドする](https://unagirabbit.hatenablog.com/entry/2020/02/08/161042)
- [VSCode上でのJenkinsfileのチェック(lint)](https://qiita.com/hisato_imanishi/items/6300105c39ccb922da97)
- [【Visual Studio Code】Jenkinsfile のシンタックスハイライトやスニペットが使用できる拡張機能「JenkinsFile Support」紹介](https://baba-s.hatenablog.com/entry/2019/04/15/104000)