Category: vscode

[Programmer Tools] VSCode Extensions

The list have been obtained with the help of VisualAPI, former BlocklyAutomation.
You can obtain a list on your device by running


dotnet tool update --global programmerall --no-cache
programerall

Then browse to http://localhost:37283/blocklyAutomation/automation/loadexample/extVsCode and press Execute
( You can have automation the same for your site – just contact me)

Those are my VSCode extensions

  1. Angular Language Service:Angular Language Service

    Features
    This extension provides a rich editing experience for Angular tem…

  2. Auto Close Tag:Auto Close Tag

    Automatically add HTML/XML close tag, same as Visual Studio IDE or Sublime Text d…

  3. Auto Rename Tag:Auto Rename Tag

    Automatically rename paired HTML/XML tag, same as Visual Studio IDE does.
    Sponso…

  4. Azure Account:Azure Account and Sign In
    The Azure Account extension provides a single Azure sign in and subscripti…
  5. Azure Functions:Azure Functions for Visual Studio Code
    Use the Azure Functions extension to quickly create, debug, m…
  6. Azure Pipelines:Azure Pipelines for VS Code
    Get it on the VS Code Marketplace!
    This VS Code extension adds syntax hi…
  7. Azure Resources:Azure Resources for Visual Studio Code (Preview)
    View and manage Azure resources directly from VS Co…
  8. Better Align:Better Align

    Features
    Align your code by colon(:), assignment(=,+=,-=,*=,/=) and arrow(=>).
    It ha…

  9. Better Comments:Better Comments
    The Better Comments extension will help you create more human-friendly comments in y…
  10. Better Solarized:Better Solarized
    This is a modified version of the Boxy Solarized Theme for Sublime Text, with the …
  11. Bookmarks:What’s new in Bookmarks 13.3

    Adds Icon customization
    New Sticky Engine
    Adds Virtual Workspaces supp…

  12. C#:C# for Visual Studio Code (powered by OmniSharp)
    Welcome to the C# extension for Visual Studio Code!…
  13. C# XML Documentation Comments:XML Documentation Comments Support for Visual Studio Code

    Generate XML documentation comments f…

  14. CodeQL:CodeQL extension for Visual Studio Code
    This project is an extension for Visual Studio Code that add…
  15. CodeQL:CodeQL extension for Visual Studio Code
    This project is an extension for Visual Studio Code that add…
  16. CodeTour:CodeTour ️
    CodeTour is a Visual Studio Code extension, which allows you to record and play back gu…
  17. Cucumber (Gherkin) Full Support:Cucumber Full Language Support
    VSCode Cucumber (Gherkin) Language Support + Format + Steps/PageObjec…
  18. Debugger for Chrome::rotating_light: Important
    This extension has been deprecated as Visual Studio Code now has a bundle…
  19. Debugger for Firefox:VS Code Debugger for Firefox

    Debug your JavaScript code running in Firefox from VS Code.

  20. Dev Containers:Visual Studio Code Dev Containers
    The Dev Containers extension lets you use a Docker container as a …
  21. Diff Folders:Diff Folders
    Compare two folders in Visual Studio Code.

    Welcome to version 1.0 of the extension Dif…

  22. Docker:Docker for Visual Studio Code
    The Docker extension makes it easy to build, manage, and deploy co…
  23. ESLint:VS Code ESLint extension

    Integrates ESLint into VS Code. If you are new to ESLint check the documen…

  24. Excel to Markdown table:excel-to-markdown-table README
    This VSCode extension converts Excel data to Markdown table format. A…
  25. Git Graph:Git Graph extension for Visual Studio Code
    View a Git Graph of your repository, and easily perform G…
  26. Git History:Git History, Search and More (including git log)

    View and search git log along with the graph and d…

  27. GitDoc:GitDoc
    GitDoc is a Visual Studio Code extension that allows you to automatically commit/push/pull…
  28. GitLens — Git supercharged:GitLens supercharges Git inside VS Code and unlocks untapped knowledge within each repository. It he…
  29. Highlight Matching Tag:Everyone occasionally envies their colleague the amazing speed at which they seem to move around in …
  30. indent-rainbow:Indent-Rainbow
    A simple extension to make indentation more readable
    If you use this plugin a lot, pl…
  31. IntelliSense for CSS class names in HTML:IntelliSense for CSS class names in HTML
    A Visual Studio Code extension that provides CSS class name…
  32. Jupyter:Jupyter Extension for Visual Studio Code
    A Visual Studio Code extension that provides basic notebook…
  33. Jupyter Cell Tags:Jupyter Cell Tags support in VS Code
    Contributing
    This project welcomes contributions and suggestion…
  34. Jupyter Slide Show:Jupyter Slide Show support in VS Code
    Contributing
    This project welcomes contributions and suggestio…
  35. Live Share:Microsoft Visual Studio Live Share
    Visual Studio Live Share enables you to collaboratively edit and …
  36. Live Share Audio:Visual Studio Live Share Audio

    Visual Studio Live Share Audio enhances the existing Visual Studio L…

  37. Live Share Extension Pack:Live Share Extension Pack

    If you’re not already familiar with Visual Studio Live Share, refer here …

  38. Markdown All in One:Markdown Support for Visual Studio Code

    All you need for Markdown (keyboard shortcuts, table o…

  39. Markdown PDF:Markdown PDF
    This extension converts Markdown files to pdf, html, png or jpeg files.
    Japanese README…
  40. Markdown Table:Markdown Table
    Add features to edit markdown table.
    1. Features

    Title
    Command
    Default Keybinding

  41. Mermaid Editor:Mermaid Editor

    Mermaid Editor is vscode extension inspired by official mermaid live editor to pr…

  42. Microsoft Office Add-in Debugger:Microsoft Office Add-in Debugger for Visual Studio Code
    The “Microsoft Office Add-in Debugger” Exten…
  43. MongoDB for VS Code:MongoDB for VS Code

    MongoDB for VS Code makes it easy to work with MongoDB, whether your own insta…

  44. Night Owl:Night Owl

    A Visual Studio Code theme for the night owls out there. Fine-tuned for those of us w…

  45. npm:Node npm

    ❗IMPORTANT: This extension has been deprecated. Support for running npm scripts is now…

  46. npm Intellisense:Npm Intellisense
    Visual Studio Code plugin that autocompletes npm modules in import statements.

    Spo…

  47. Paste JSON as Code:Supports TypeScript, Python, Go, Ruby, C#, Java, Swift, Rust, Kotlin, C++, Flow, Objective-C, JavaSc…
  48. Path Autocomplete:Path Autocomplete for Visual Studio Code
    Provides path completion for visual studio code.

    Features

  49. Peacock:Peacock for Visual Studio Code

    Subtly change the color of your Visual Studio Code workspace. Ideal …

  50. Polacode:Polacode — Polaroid for your code

    Why?
    You have spent countless hours finding the perfect Java…

  51. Polyglot Notebooks:This extension is currently in preview.
    Polyglot Notebooks
    With the Polyglot Notebooks extension, yo…
  52. PostgreSQL:PostgreSQL
    This is a query tool for PostgreSQL databases. While there is a database explorer it is …
  53. PowerShell:PowerShell for Visual Studio Code

    This extension provides rich PowerShell language support for …

  54. Prettier – Code formatter:Prettier Formatter for Visual Studio Code
    Prettier is an opinionated code formatter. It enforces a c…
  55. Rainbow CSV:Rainbow CSV
    Main Features

    Highlight columns in comma (.csv), tab (.tsv), semicolon and pipe – separ…

  56. React Native Tools:React Native Tools

    Stable:

    Preview:

    React Native Tools Preview
    The extension has a nightly vers…

  57. Remote – SSH:This is a pre-release version of this extension for early feedback and testing. This extension works…
  58. Remote – SSH: Editing Configuration Files:Visual Studio Code Remote – SSH: Editing Configuration Files
    The Remote – SSH extension lets you use…
  59. Remote Development:Visual Studio Code Remote Development Extension Pack
    The Remote Development extension pack allows yo…
  60. Remote Explorer:Visual Studio Code Remote Explorer
    The Remote – SSH and Remote – Tunnels extensions let you use any …
  61. REST Client:REST Client

    REST Client allows you to send HTTP request and view the response in Visual Studi…

  62. SQL Bindings:Microsoft SQL Bindings for VS Code
    Overview
    Microsoft SQL Bindings for VS Code enables users to deve…
  63. SQL Server (mssql):mssql for Visual Studio Code
    Welcome to mssql for Visual Studio Code! An extension for developing Mi…
  64. Terminal Here:Exposes the command terminalHere.create that creates a terminal at the current file’s directory. Thi…
  65. Test Adapter Converter:vscode-test-adapter-converter
    This is an extension that converts from the Test Explorer UI API into …
  66. Test Explorer UI:Test Explorer for Visual Studio Code
    This extension provides an extensible user interface for runnin…
  67. TODO Highlight:VSCODE-TODO-HIGHLIGHT

    Highlight TODO, FIXME and other annotations within your code.
    Sometimes y…

  68. Todo Tree:Todo Tree

    This extension quickly searches (using ripgrep) your workspace for comment tags like TODO…

  69. TSLint:❗IMPORTANT: TSLint has been deprecated in favor of ESLint and this extension has also been deprecate…
  70. Tye:Tye for Visual Studio Code (Preview)

    The Tye extension makes it easier to run and debug applicati…

  71. Visual Studio Keymap:Visual Studio Keymap for Visual Studio Code
    This extension ports popular Visual Studio keyboard shor…
  72. VSCode Dimmer:vscode-dimmer
    Features
    Dims text outside of selections by reducing the opacity of the text. Supports…
  73. VSCode React Refactor:This simple extension provides JSX refactor code actions for React developers.
    Features

    Extract JSX…

  74. vscode-base64:vscode-base64
    Quickly base64 encode/decode your text selections.

    Commands:

    Base64 Encode
    Base64 De…

  75. vscode-icons:vscode-icons

    Bring real icons to your Visual Studio Code
    minimum supported version: 1.40.2

  76. vscode-pdf:pdf
    Display pdf in VSCode.

    Contribute
    Upgrade PDF.js

    Download latest Prebuilt.
    Extract the ZIP fil…

  77. vscode-solution-explorer:vscode-solution-explorer
    This extension adds a Visual Studio Solution File explorer panel in Visual …
  78. WSL:Visual Studio Code WSL
    The WSL extension lets you use VS Code on Windows to build Linux applications…
  79. XML Tools:XML Tools for Visual Studio Code

    Features

    XML Formatting
    XML Tree View
    XPath Evaluation
    XQuery…

  80. YAML:YAML Language Support by Red Hat
    Provides comprehensive YAML Language support to Visual Studio Code,…

Web site–Angular- part 40

Creating  Angular app

ng new InfovalutarWebAng

Then customizing to add angular material

ng add @angular/material

and https://material.angular.io/guide/schematics#navigation-schematic 

ng generate @angular/material:nav banks

Delete everyhing in app component ( without

<div class=”content” role=”main”>

add

<app-banks></app-banks>

)

See if it works. If yes, move the router outlet and footer to app-banks.

Now, I want to solve the CD and to run in a container for the people that do not have Angular installed  – or do not want to.

Remember how it was for .NET Core , that I need just an Internet Connection , Docker and VSCode  ? http://msprogrammer.serviciipeweb.ro/2019/12/04/debug-application-under-vscode-and-dockerpart-22/ 

Now it does not work – cannot load application because some bug in .NET Core . Why ? I have been going to .NET Core 3.1 and not updated the docker file…

ARG DOTNETCORE_VERSION=3.1

Now it loads – however, saying that the methid has not an implementation. Solving later.

Now going to

https://github.com/microsoft/vscode-dev-containers

to find same for Angular…

After some attempts, I have this files into .devcontainer

devcontainer.json

// For format details, see https://aka.ms/vscode-remote/devcontainer.json or the definition README at
// https://github.com/microsoft/vscode-dev-containers/tree/master/containers/alpine-3.10-git
{
     “name”: “Angular”,
     “dockerFile”: “DockerfileAng”,   
     // Uncomment the next line to have VS Code connect as an existing non-root user in the container.
     // On Linux, by default, the container user’s UID/GID will be updated to match your local user. See
     // https://aka.ms/vscode-remote/containers/non-root for details on adding a non-root user if none exist.
     // “remoteUser”: “vscode”,

    // Uncomment the next line if you will use a ptrace-based debugger like C++, Go, and Rust
     // “runArgs”: [ “–cap-add=SYS_PTRACE”, “–security-opt”, “seccomp=unconfined” ],
    
     // Use ‘settings’ to set *default* container specific settings.json values on container create.
     // You can edit these settings after create using File > Preferences > Settings > Remote.
     “settings”: {
         // This dev container does include /bin/bash if you prefer to use it instead of ash.
         “terminal.integrated.shell.linux”: “/bin/ash”
     },

    // Use ‘appPort’ to create a container with published ports. If the port isn’t working, be sure
     // your server accepts connections from all interfaces (0.0.0.0 or ‘*’), not just localhost.
     // “appPort”: [],

    // Uncomment the next line to run commands after the container is created.
     // “postCreateCommand”: “uname -a”,

    // Add the IDs of extensions you want installed when the container is created in the array
     // below. Note that some extensions may not work in Alpine Linux due to glibc dependencies
     // in native code inside the extension. See https://aka.ms/vscode-remote/linux for details.
     “extensions”: [],
     “postCreateCommand”: “cd InfovalutarWebAng && npm i”,
     “overrideCommand”:true,
     “shutdownAction”: “stopContainer”
}

and DockerFileAng

#————————————————————————————————————-
# Copyright (c) Microsoft Corporation. All rights reserved.
# Licensed under the MIT License. See https://go.microsoft.com/fwlink/?linkid=2090316 for license information.
#————————————————————————————————————-
FROM alpine:3.10

# This Dockerfile adds a non-root user with sudo access. Use the “remoteUser”
# property in devcontainer.json to use it. On Linux, the container user’s GID/UIDs
# will be updated to match your local UID/GID (when using the dockerFile property).
# See https://aka.ms/vscode-remote/containers/non-root-user for details.
ARG USERNAME=vscode
ARG USER_UID=1000
ARG USER_GID=$USER_UID

# Install git, bash, dependencies, and add a non-root user
RUN apk add –no-cache git bash libgcc libstdc++ \
     #
     # Create a non-root user to use if preferred – see https://aka.ms/vscode-remote/containers/non-root-user.
     && addgroup -g $USER_GID $USERNAME \
     && adduser -S -s /bin/bash -u $USER_UID -G $USERNAME $USERNAME \
     # [Optional] Add sudo support for the non-root user
     && apk add –no-cache sudo \
     && echo $USERNAME ALL=\(root\) NOPASSWD:ALL > /etc/sudoers.d/$USERNAME\
     && chmod 0440 /etc/sudoers.d/$USERNAME

RUN apk add –update npm
RUN npm install -g @angular/cli

Now I can run in remote container and ng serve from remote container ( do not forget to be in Angular folder and forward port from VSCode !)

Debug Application under VSCode and Docker–part 22

What I wanted is that people that have only a container application ( docker) and  VSCode ( not Visual Studio , nor .NET Core Framework) be able to debug the application and run it. That means, I no longer require to install .NET Core SDK on the local PC

Read a lot

https://code.visualstudio.com/docs/remote/containers#_devcontainerjson-reference

https://github.com/microsoft/vscode-dev-containers/tree/master/containers/dotnetcore-3.0

https://code.visualstudio.com/docs/remote/containers

Some important things :

  1. in the devcontainer.json put  “shutdownAction”: “stopContainer”
  2. Delete continuously the vscode image if something wrong

docker container prune -f

docker images “vs*”

docker image rm <id of the prev image>

Now I have all in place ( see commit https://github.com/ignatandrei/InfoValutar/commit/474698d33e20e1aa6fc9e2fd6f4c42ea73e50b03 )

A .devContainer folder with a DockerFile and devcontainer.json ( to construct the docker container)

A .vscode folder with launch.json , devcontainer.json, settings.json  – to run F5 into the container

All I need is to Launch VSCode, press Remote-Container : Open Folder in Container, goto Infovalutar folder that has the .sln. Then press F5 in VS Code  and voila!

Now, anywhere I go, I can launch VSCode and debug the application.

Infovalutar

And one hour passes...
(This is the result of 1 hour per day auto-challenge as a full cycle developer for an exchange rates application)
( You can see the sources at https://github.com/ignatandrei/InfoValutar/ )
NrPost 
1Start
2Reading NBR from internet
3Source control and build
4Badge and test
5CI and action
6Artifacts and dotnet try
7Docker with .NET Try
8ECB
9Intermezzo - Various implementations for programmers
10Intermezzo - similar code - options
11Plugin implementation
12GUI for console
13WebAPI
14Plugin in .NET Core 3
15Build and Versioning
16Add swagger
17Docker - first part
18Docker - second part
19Docker - build Azure
20Pipeline send to Docker Hub
21Play with Docker - online
22Run VSCode and Docker
23Deploy Azure
24VSCode see tests and powershell
25Code Coverage
26Database in Azure
27Sql In Memory or Azure
28Azure ConString, RSS
29Middleware for backward compatibility
30Identical Tables in EFCore
31Multiple Data in EFCore
32Dot net try again
33Start Azure Function
34Azure function - deploy
35Solving my problems
36IAsyncEnumerable transformed to IEnumerable and making Azure Functions works
37Azure functions - final
38Review of 37 hours
39Last Commit in AzureDevOps
40Create Angular WebSite
41Add static Angular to WebAPI .NET Core
42Docker for Angular
43Angular and CORS
44SSL , VSCode, Docker
45Routing in Angular
46RxJS for Routing
47RxJs Unsubscribe

VSCode and Docker

I am super-excited about Docker – because it gives a new meaning about “ it works on my PC”! ( I have a presentation ready –   https://github.com/ignatandrei/presentations/tree/master/2019/shorts/DockerForDevs/ )

However, I want to state something more important: VSCode is now ready to open Docker Containers!

You have to install:

1.

Name: Docker
Id: ms-azuretools.vscode-docker
Description: Adds syntax highlighting, commands, hover tips, and linting for Dockerfile and docker-compose files.
Version: 0.6.4
Publisher: Microsoft
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-docker

2. 

Name: Remote – Containers
Id: ms-vscode-remote.remote-containers
Description: Open any folder inside (or mounted into) a container and take advantage of Visual Studio Code’s full feature set.
Version: 0.59.0
Publisher: Microsoft
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers

Or this extension:

Name: Remote Development
Id: ms-vscode-remote.vscode-remote-extensionpack
Description: An extension pack that lets you open any folder in a container, on a remote machine, or in WSL and take advantage of VS Code’s full feature set.
Version: 0.15.0
Publisher: Microsoft
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.vscode-remote-extensionpack

I have tried with dotnet try the extensions ( for your reference, you can generate the docker image and run the container by using the files from https://github.com/ignatandrei/Presentations/tree/master/2019/shorts/NetCoreGlobalTools/dotnetTry . Then use the externsion to open the dotnet try files under usr folder )

However, the VSCode has now capabilities over SSH, VSL and Docker. It is a wonderfull world, and now we can say : : it works on my Docker!

( My only regret is that VS 2019 has not  those capabilities)

Andrei Ignat weekly software news(mostly .NET)

* indicates required

Please select all the ways you would like to hear from me:

You can unsubscribe at any time by clicking the link in the footer of our emails. For information about our privacy practices, please visit our website.

We use Mailchimp as our marketing platform. By clicking below to subscribe, you acknowledge that your information will be transferred to Mailchimp for processing. Learn more about Mailchimp's privacy practices here.