Visual Studio Code 101 #9 : 10+ CICD Jenkins, Gitlab, Github Action, and Azure-pipeline extension…

VSC Series

∘ Introduction
∘ Story Series
∘ Main Part on VSC extension
∘ 1. Jenkins support on VSC extension
∘ 2. Gitlab CI support on VSC extension
∘ 3. Github Action support on VSC extension
∘ 4. Azure-pipeline support on VSC extension
∘ Summary

Introduction

Visual Studio Code is a powerful and free IDE and support 10+ language development and rich of marketplace that is managed by Microsoft official. In this story, we would share the experience on 100+ extensions, and cutting the best extensions for CICD extension that you can’t miss. Moreover, we recommend these extensions to speed your productivity up 30% and high efficiency on writing your code.

In this section “Visual Studio Code 101 #9 : 10+ CICD Jenkins, Gitlab, Github Action, and Azure-pipeline extension in recommendation”, we recommend you can refer the 4 CI/CD system article Jenkins, Gitlab CI, Github Action, and Azure Pipelines. We can briefly know to use this tool to build, manage, and deploy our applications to cloud or somewhere. However, for my option, we should understand what is devops and know CI/CD is tool to help us complete the task automatically. For technical article, we focus on how to speed up these CICD build up with these extension. Let we start to introduce useful extensions.

Story Series

Now, I hope to share some experience to decrease the gap from a novice to an expert. This series will introduce Visual Studio Code 101 from 0 to 100 migration from the other IDE, it contains below parts :

Series

Visual Studio Code 101 #1 : Introduction and Get start
Visual Studio Code 101 #2 : 20+ Recommend VSC extension you have to install in general purpose
Visual Studio Code 101 #3 : 20+ Recommend VSC extension you have to install in advanced purpose
Visual Studio Code 101 #4 : 7+ C_C++ extension in recommendation (Clang-Format)
Visual Studio Code 101 #5 : 10+ Python extension in recommendation
Visual Studio Code 101 #6 : 10+ Javascript Node React extension in recommendation
Visual Studio Code 101 #7 : 10+ HTML CSS extension in recommendation
Visual Studio Code 101 #8 : 10+ Docker and kubernetes container extension in recommendation
Visual Studio Code 101 #9 : 10+ CICD Jenkins, Gitlab, Github Action, and Azure-pipeline extension in recommendation
Visual Studio Code 101 #10 : DevOps Engineer extension in recommendation
Visual Studio Code 101 #11 : Cloud Engineer extension in recommendation

Main Part on VSC extension

Got your Jenkins, Gitlab, Github Action, and Azure-pipeline CICD pipeline perfect fit in VSCode IDE!! First of all, we recommend read Jenkins, Gitlab CI, Github Action, and Azure Pipelines. Them, we introduce 4 part extension to map popular CICD tool on Jenkins, Gitlab, Github Action, and Azure-pipeline.

1. Jenkins support on VSC extension

Jenkinsfile Support

CodeName: secanis.jenkinsfile-support
Description: Adds syntax highlighting support for Jenkinsfile’s. In this version, it’s the same like Groovy is.
Given Ranking: ⭐⭐⭐⭐⭐ 5 stars
VSC Link: Link
Comment: You have to use that. I use this extension to edit the jenkins file with syntax highlighting support, but I notice it doesn’t update since 2016. However, you should try this if you use jenkins to run CICD pipeline.
Quick View:

Jenkins Pipeline Linter Connector

CodeName: janjoerke.jenkins-pipeline-linter-connector
Description: Validates Jenkinsfiles by sending them to the Pipeline Linter of a Jenkins server.
Given Ranking: ⭐⭐⭐⭐⭐ 5 stars
VSC Link: Link
Comment: You have to use that. I use this extension to connect my jenkins server to view the format so that I can avoid syntax error before triggering jenkins running process. I like this one to reduce lots of time on try run and commit code to try CICD pipiline in jenkins server. Truly recommendation.
Quick View:

Groovy Lint, Format and Fix

CodeName: janjoerke.jenkins-pipeline-linter-connector
Description: Lint, format and auto-fix groovy and Jenkinsfile.
Given Ranking: ⭐⭐⭐⭐⭐ 5 stars
VSC Link: Link
Comment: You have to use that. I use this extension to lint groovy on jenkins file, however, I like original jenkins language. If you like groovy on jenkins file, you don’t miss this extension. Truly recommendation.
Quick View:

Jenkins Jack

CodeName: tabeyti.jenkins-jack
Description: Jack into your Jenkins to streamline your Pipeline development and Jenkins management in VSCode. Execute Pipeline scripts remotely with real-time syntax highlighted output, access Pipeline step auto-completions, pull Pipeline step documentation, run console groovy scripts across multiple agents, man.
Given Ranking: ⭐⭐⭐⭐⭐ 5 stars
VSC Link: Link
Comment: You have to use that. I use this extension to connect remote jenkins server, execute job, or abort job, and I most likely the tree views on management such connection tree, pipeline tree, job tree, and node (agent) tree that are really useful. truly recommendation.
Quick View:

2. Gitlab CI support on VSC extension

GitLab Workflow

CodeName: GitLab.gitlab-workflow
Description: Official GitLab-maintained extension for Visual Studio Code.
Given Ranking: ⭐⭐⭐⭐⭐ 5 stars
VSC Link: Link
Comment: You should use it. I use this extension to format .env, shell, dockerfile, “.gitignore”, and “.dockerignore” files, and I very like it that support so many file types. Even, I don’t find better tool than this one in format function. It is good for me to resolve format problem. However, it could have different rule in shell (bash / sh file). Just try and think the trade off.
Quick View:

GitLab CI Validator

CodeName: cstuder.gitlab-ci-validator
Description: Validate the content of your GitLab CI YAML file.
Given Ranking: ⭐⭐⭐⭐ 4 stars
VSC Link: Link
Comment: You can use it. I use this extension to check my gitlab ci file, also you can check from gitlab ci web ui to configure your yaml file unit all thing are correct. Just another solution. However, it don’t update since 2018, so it got 4 star only in my score.
Quick View:

3. Github Action support on VSC extension

GitHub Actions

CodeName: cschleiden.vscode-github-actions
Description: GitHub Actions workflows and runs for github.com hosted repositories in VS Code. Simple, unofficial extension to interact with GitHub Actions from within VS Code.
Given Ranking: ⭐⭐⭐⭐⭐ 5 stars
VSC Link: Link
Comment: You have to use that. I use this extension to develop the github actions with auto-complete feature, and I mostly like the feature to inspect logs to see failures that I can debug and complete the pipeline more quickly. Truly recommendation.
Quick View:

GitHub Actions

CodeName: formulahendry.github-actions
Description: Language support for workflow file of GitHub Actions. Syntax Highlight and Snippet for GitHub Actions main.workflow file
Given Ranking: ⭐⭐⭐⭐ 4 stars
VSC Link: Link
Comment: You can use that. I use this extension to develop the github workflow file with syntax highlight and snippet, and I recommend to try this one if you have to develop github workflow.
Quick View:

4. Azure-pipeline support on VSC extension

Azure Pipelines

CodeName: ms-azure-devops.azure-pipelines
Description: Syntax highlighting, IntelliSense, and more for Azure Pipelines YAML.
Given Ranking: ⭐⭐⭐⭐⭐ 5 stars
VSC Link: Link
Comment: You have to use that. I use this extension to edit the azure pipelines yaml file and I mostly like syntax highlighting and autocompletion feature that I can debug and complete the pipeline more quickly. Truly recommendation.
Quick View:

Summary

In this post, we recommend to view the 4 CI/CD system article Jenkins, Gitlab CI, Github Action, and Azure Pipelines, then adding extension to create target CICD working environment from 4 extension category, and cutting the best extensions that you should try. Again, we recommend these extensions to speed your productivity up 30% and high efficiency on writing your code.

4 parts CICD category