Completion, validation and tooltips in Visual Studio Code

Visual Studio Code (VS Code) supports auto-completion, validation, error highlighting and tooltips for Kubernetes through the Visual Studio Code Kubernetes Tools extension. This extension uses kubectl to interact with your Kubernetes cluster without leaving VS Code.

Prerequisites

  • VS Code is installed.
  • Kubernetes cluster with the Airlock Microgateway CRDs deployed.
  • kubectl is installed.
  • A valid kubeconfig to interact with your Kubernetes cluster.
  • The kubeconfig must fulfill the following requirements:
  • Allows to access the Kubernetes cluster where the Airlock Microgateway CRDs are deployed.
  • The current-context is set to this Kubernetes cluster.

The default kubeconfig is located in ~/.kube/config. For further information consult the Kubernetes manual: (Kubernetes) Kubeconfig

How to install the Kubernetes extension in VS Code

  1. Start Visual Studio Code.
  2. Open the extensions search tree with Ctrl+Shift+X and search for Kubernetes.
  3. Install the VS Code extension Kubernetes Tools. See also the list of included features in the extension description.
  4. The display name is Kubernetes and the full extension name is displayed in the Details tab.

  5. The Kubernetes icon appears in the left icon bar.
  6. Restart Visual Studio Code to reload the extension.
  7. With a click on the Kubernetes icon, a Kubernetes section with a list of reachable clusters appears.

Use Ctrl+Shift+P to open the command palette. Start typing Kubernetes will show all available Kubernetes-related commands such as Kubernetes: Apply which calls kubectl apply remotely.

YAML support is based on the Red Hat YAML language extension that is automatically installed as a dependency of the Kubernetes tools extension. VS Code Visual Studio code validates only the CustomResources with the OpenAPI schema specification within the CRD. This means, that it's only a syntactical validation but when applying the code, the semantic validation could still fail.

Visual Studio Code Desktop configuration

The VS Code for the web configuration is relevant to have autocompletion, validation, error highlighting and tooltips for the CRDs.

  1. Start VS Code on your desktop.
  2. Use Ctrl+Shift+P to open the command palette. Start typing Preferences and select Preferences: Open User Settings (JSON).
  3. Adjust settings.json to your needs. We used the following configuration:
  4. Show moreShow lesscopy
    { 
      "workbench.colorTheme": "Visual Studio Dark", 
      "workbench.iconTheme": "vscode-great-icons", 
      "editor.formatOnSave": true, 
      "editor.formatOnPaste": true, 
      "editor.tabSize": 2, 
      "[yaml]": { 
        "editor.insertSpaces": true, 
        "editor.tabSize": 2, 
        "editor.autoIndent": "keep", 
        "editor.wordBasedSuggestions": false 
      }, 
      "yaml.format.enable": true, 
      "yaml.format.singleQuote": false, 
      "yaml.format.bracketSpacing": true, 
      "yaml.format.proseWrap": "preserve", 
      "yaml.format.printWidth": 80, 
      "yaml.validate": true, 
      "yaml.hover": true, 
      "yaml.completion": true, 
      "yaml.disableAdditionalProperties": true, 
      "yaml.maxItemsComputed": 5000, 
      "yaml.trace.server": "off", 
      "diffEditor.ignoreTrimWhitespace": false, 
      "vs-kubernetes": { 
        "vs-kubernetes.crd-code-completion": "enabled", 
        "vs-kubernetes.namespace": "", 
        "vs-kubernetes.kubectl-path": "", 
        "vs-kubernetes.helm-path": "", 
        "vs-kubernetes.kubectlVersioning": "user-provided", 
        "vs-kubernetes.outputFormat": "yaml", 
        "vs-kubernetes.kubeconfig": "", 
        "vs-kubernetes.knownKubeconfigs": [], 
        "vs-kubernetes.autoCleanupOnDebugTerminate": false, 
        "vs-kubernetes.nodejs-autodetect-remote-root": true, 
        "vs-kubernetes.nodejs-remote-root": "", 
        "vs-kubernetes.nodejs-debug-port": 9229, 
        "vs-kubernetes.dotnet-vsdbg-path": "~/vsdbg/vsdbg", 
        "vs-kubernetes.local-tunnel-debug-provider": "", 
        "imageBuildTool": "Docker" 
      }, 
      "telemetry.telemetryLevel": "off", 
      "redhat.telemetry.enabled": false 
    }

The vs-kubernetes settings belong to the Kubernetes plugin mentioned on this page and must fit your setup. In addition, the setting editor.wordBasedSuggestions should be switched to false otherwise wrong suggestions are made.

...
   "[yaml]": { 
    ...
    "editor.wordBasedSuggestions": false 
  }, 
... 

Ensure that the mentioned settings are configured the way we did. For a simple test, you can also use our configuration.

Automatic validation example with Visual Studio Code

After configuring Visual Studio Code as described, completion, validation and tooltip is available while typing.

Microgateway-Visul-Studio-Code-CRD-completion-validation-tooltip