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

Angular Language Service:Angular Language Service

Features
This extension provides a rich editing experience for Angular tem…
Auto Close Tag:Auto Close Tag
Automatically add HTML/XML close tag, same as Visual Studio IDE or Sublime Text d…
Auto Rename Tag:Auto Rename Tag
Automatically rename paired HTML/XML tag, same as Visual Studio IDE does.
Sponso…
Azure Account:Azure Account and Sign In
The Azure Account extension provides a single Azure sign in and subscripti…
Azure Functions:Azure Functions for Visual Studio Code
Use the Azure Functions extension to quickly create, debug, m…
Azure Pipelines:Azure Pipelines for VS Code
Get it on the VS Code Marketplace!
This VS Code extension adds syntax hi…
Azure Resources:Azure Resources for Visual Studio Code (Preview)
View and manage Azure resources directly from VS Co…
Better Align:Better Align
Features
Align your code by colon(:), assignment(=,+=,-=,*=,/=) and arrow(=>).
It ha…
Better Comments:Better Comments
The Better Comments extension will help you create more human-friendly comments in y…
Better Solarized:Better Solarized
This is a modified version of the Boxy Solarized Theme for Sublime Text, with the …
Bookmarks:What’s new in Bookmarks 13.3
Adds Icon customization
New Sticky Engine
Adds Virtual Workspaces supp…
C#:C# for Visual Studio Code (powered by OmniSharp)
Welcome to the C# extension for Visual Studio Code!…
C# XML Documentation Comments:XML Documentation Comments Support for Visual Studio Code
Generate XML documentation comments f…
CodeQL:CodeQL extension for Visual Studio Code
This project is an extension for Visual Studio Code that add…
CodeQL:CodeQL extension for Visual Studio Code
This project is an extension for Visual Studio Code that add…
CodeTour:CodeTour ️
CodeTour is a Visual Studio Code extension, which allows you to record and play back gu…
Cucumber (Gherkin) Full Support:Cucumber Full Language Support
VSCode Cucumber (Gherkin) Language Support + Format + Steps/PageObjec…
Debugger for Chrome::rotating_light: Important
This extension has been deprecated as Visual Studio Code now has a bundle…
Debugger for Firefox:VS Code Debugger for Firefox
Debug your JavaScript code running in Firefox from VS Code.

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

Welcome to version 1.0 of the extension Dif…
Docker:Docker for Visual Studio Code
The Docker extension makes it easy to build, manage, and deploy co…
ESLint:VS Code ESLint extension
Integrates ESLint into VS Code. If you are new to ESLint check the documen…
Excel to Markdown table:excel-to-markdown-table README
This VSCode extension converts Excel data to Markdown table format. A…
Git Graph:Git Graph extension for Visual Studio Code
View a Git Graph of your repository, and easily perform G…
Git History:Git History, Search and More (including git log)
View and search git log along with the graph and d…
GitDoc:GitDoc
GitDoc is a Visual Studio Code extension that allows you to automatically commit/push/pull…
GitLens — Git supercharged:GitLens supercharges Git inside VS Code and unlocks untapped knowledge within each repository. It he…
Highlight Matching Tag:Everyone occasionally envies their colleague the amazing speed at which they seem to move around in …
indent-rainbow:Indent-Rainbow
A simple extension to make indentation more readable
If you use this plugin a lot, pl…
IntelliSense for CSS class names in HTML:IntelliSense for CSS class names in HTML
A Visual Studio Code extension that provides CSS class name…
Jupyter:Jupyter Extension for Visual Studio Code
A Visual Studio Code extension that provides basic notebook…
Jupyter Cell Tags:Jupyter Cell Tags support in VS Code
Contributing
This project welcomes contributions and suggestion…
Jupyter Slide Show:Jupyter Slide Show support in VS Code
Contributing
This project welcomes contributions and suggestio…
Live Share:Microsoft Visual Studio Live Share
Visual Studio Live Share enables you to collaboratively edit and …
Live Share Audio:Visual Studio Live Share Audio
Visual Studio Live Share Audio enhances the existing Visual Studio L…
Live Share Extension Pack:Live Share Extension Pack
If you’re not already familiar with Visual Studio Live Share, refer here …
Markdown All in One:Markdown Support for Visual Studio Code
All you need for Markdown (keyboard shortcuts, table o…
Markdown PDF:Markdown PDF
This extension converts Markdown files to pdf, html, png or jpeg files.
Japanese README…
Markdown Table:Markdown Table
Add features to edit markdown table.
1. Features

Title
Command
Default Keybinding
…
Mermaid Editor:Mermaid Editor
Mermaid Editor is vscode extension inspired by official mermaid live editor to pr…
Microsoft Office Add-in Debugger:Microsoft Office Add-in Debugger for Visual Studio Code
The “Microsoft Office Add-in Debugger” Exten…
MongoDB for VS Code:MongoDB for VS Code
MongoDB for VS Code makes it easy to work with MongoDB, whether your own insta…
Night Owl:Night Owl
A Visual Studio Code theme for the night owls out there. Fine-tuned for those of us w…
npm:Node npm
❗IMPORTANT: This extension has been deprecated. Support for running npm scripts is now…
npm Intellisense:Npm Intellisense
Visual Studio Code plugin that autocompletes npm modules in import statements.

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

Features
…
Peacock:Peacock for Visual Studio Code
Subtly change the color of your Visual Studio Code workspace. Ideal …
Polacode:Polacode — Polaroid for your code
Why?
You have spent countless hours finding the perfect Java…
Polyglot Notebooks:This extension is currently in preview.
Polyglot Notebooks
With the Polyglot Notebooks extension, yo…
PostgreSQL:PostgreSQL
This is a query tool for PostgreSQL databases. While there is a database explorer it is …
PowerShell:PowerShell for Visual Studio Code
This extension provides rich PowerShell language support for …
Prettier – Code formatter:Prettier Formatter for Visual Studio Code
Prettier is an opinionated code formatter. It enforces a c…
Rainbow CSV:Rainbow CSV
Main Features

Highlight columns in comma (.csv), tab (.tsv), semicolon and pipe – separ…
React Native Tools:React Native Tools
Stable:

Preview:

React Native Tools Preview
The extension has a nightly vers…
Remote – SSH:This is a pre-release version of this extension for early feedback and testing. This extension works…
Remote – SSH: Editing Configuration Files:Visual Studio Code Remote – SSH: Editing Configuration Files
The Remote – SSH extension lets you use…
Remote Development:Visual Studio Code Remote Development Extension Pack
The Remote Development extension pack allows yo…
Remote Explorer:Visual Studio Code Remote Explorer
The Remote – SSH and Remote – Tunnels extensions let you use any …
REST Client:REST Client
REST Client allows you to send HTTP request and view the response in Visual Studi…
SQL Bindings:Microsoft SQL Bindings for VS Code
Overview
Microsoft SQL Bindings for VS Code enables users to deve…
SQL Server (mssql):mssql for Visual Studio Code
Welcome to mssql for Visual Studio Code! An extension for developing Mi…
Terminal Here:Exposes the command terminalHere.create that creates a terminal at the current file’s directory. Thi…
Test Adapter Converter:vscode-test-adapter-converter
This is an extension that converts from the Test Explorer UI API into …
Test Explorer UI:Test Explorer for Visual Studio Code
This extension provides an extensible user interface for runnin…
TODO Highlight:VSCODE-TODO-HIGHLIGHT
Highlight TODO, FIXME and other annotations within your code.
Sometimes y…
Todo Tree:Todo Tree
This extension quickly searches (using ripgrep) your workspace for comment tags like TODO…
TSLint:❗IMPORTANT: TSLint has been deprecated in favor of ESLint and this extension has also been deprecate…
Tye:Tye for Visual Studio Code (Preview)
The Tye extension makes it easier to run and debug applicati…
Visual Studio Keymap:Visual Studio Keymap for Visual Studio Code
This extension ports popular Visual Studio keyboard shor…
VSCode Dimmer:vscode-dimmer
Features
Dims text outside of selections by reducing the opacity of the text. Supports…
VSCode React Refactor:This simple extension provides JSX refactor code actions for React developers.
Features

Extract JSX…
vscode-base64:vscode-base64
Quickly base64 encode/decode your text selections.

Commands:

Base64 Encode
Base64 De…
vscode-icons:vscode-icons
Bring real icons to your Visual Studio Code
minimum supported version: 1.40.2

…
vscode-pdf:pdf
Display pdf in VSCode.

Contribute
Upgrade PDF.js

Download latest Prebuilt.
Extract the ZIP fil…
vscode-solution-explorer:vscode-solution-explorer
This extension adds a Visual Studio Solution File explorer panel in Visual …
WSL:Visual Studio Code WSL
The WSL extension lets you use VS Code on Windows to build Linux applications…
XML Tools:XML Tools for Visual Studio Code
Features

XML Formatting
XML Tree View
XPath Evaluation
XQuery…
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 :

in the devcontainer.json put “shutdownAction”: “stopContainer”
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/ )

Nr	Post
1	Start
2	Reading NBR from internet
3	Source control and build
4	Badge and test
5	CI and action
6	Artifacts and dotnet try
7	Docker with .NET Try
8	ECB
9	Intermezzo - Various implementations for programmers
10	Intermezzo - similar code - options
11	Plugin implementation
12	GUI for console
13	WebAPI
14	Plugin in .NET Core 3
15	Build and Versioning
16	Add swagger
17	Docker - first part
18	Docker - second part
19	Docker - build Azure
20	Pipeline send to Docker Hub
21	Play with Docker - online
22	Run VSCode and Docker
23	Deploy Azure
24	VSCode see tests and powershell
25	Code Coverage
26	Database in Azure
27	Sql In Memory or Azure
28	Azure ConString, RSS
29	Middleware for backward compatibility
30	Identical Tables in EFCore
31	Multiple Data in EFCore
32	Dot net try again
33	Start Azure Function
34	Azure function - deploy
35	Solving my problems
36	IAsyncEnumerable transformed to IEnumerable and making Azure Functions works
37	Azure functions - final
38	Review of 37 hours
39	Last Commit in AzureDevOps
40	Create Angular WebSite
41	Add static Angular to WebAPI .NET Core
42	Docker for Angular
43	Angular and CORS
44	SSL , VSCode, Docker
45	Routing in Angular
46	RxJS for Routing
47	RxJs 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:

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

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)