Best Visual Studio Code Extensions

GitLens
GitLens supercharges the Git capabilities built into Visual Studio Code. It helps you to visualize code authorship at a glance via Git blame annotations and code lens, seamlessly navigate and explore Git repositories, gain valuable insights via powerful comparison commands, and so much more.
https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens

 

Path Intellisence
Visual Studio Code plugin that autocompletes filenames.
https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense

 

NPM Intellisense
Visual Studio Code plugin that autocompletes npm modules in import statements.
https://marketplace.visualstudio.com/items?itemName=christian-kohler.npm-intellisense

 

Bracket Pair Colorizer
A customizable extension for colorizing matching brackets
https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer

 

ES7 React/Redux/GraphQL/React-Native snippets
Simple extensions for React, Redux and Graphql in JS/TS with ES7 syntax
https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets

 

Code Spell Checker
Spelling checker for source code
https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker

 

Live Server
Launch a development local Server with live reload feature for static & dynamic pages
https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

 

Auto Rename Tag
Automatically rename paired HTML/XML tag.
https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag

 

Better Comments
Improve your code commenting by annotating with alert, informational, TODOs, and more!
https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments

 

ESLint
Integrates ESLint JavaScript into VS Code.
https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

 

NPM
This extension supports running npm scripts defined in the package.json file and validating the installed modules against the dependencies defined in the package.json.
https://marketplace.visualstudio.com/items?itemName=eg2.vscode-npm-script

 

Sublime Text Keymap and Settings Importer
This extension imports keybindings and settings from Sublime Text to VS Code.
https://marketplace.visualstudio.com/items?itemName=ms-vscode.sublime-keybindings

 

VS Code Icons
Icons for Visual Studio Code
https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons

 

HTML Tag Wrap
Wraps selected code with HTML tags
https://marketplace.visualstudio.com/items?itemName=bradgashler.htmltagwrap

Highly scalable and highly available progressive single page web app

I developed a highly scalable, highly available progressive single page web app using Node.js, React and AWS.

Below are the technologies I used in building this app.

Demo: https://techvideos.jainath.com/

Node.js
React & Redux
Bootstrap 4
Webpack 4
REST API
Serverless Framework/Micro service
AWS – Lambda functions
AWS – DynamoDB
AWS – S3 Bucket
AWS – CloudFront
AWS – Certificate
AWS – API Gateway
AWS – Services
YouTube API
PWA (Progressive Web App)
Docker
GitLab – Source code hosting
GitLab – Pipeline

Tech videos architecture

Very soon I will write a detail article on this.

Dockerizing a Node.js app with Debugger

Created a node.js app with express.js and debugging support which runs inside a docker container.

Check below code hosted in gitlab.

https://gitlab.com/jainath/docker-nodejs-express-api

Getting started:

  • You need docker installed.
  • Run docker-compose build to Build or rebuild services.
  • Run docker-compose up which will create and start containers.
  • Node.js web app is running at http://localhost:3000.
  • Debugger is running at 9232 port. Check this link to know the status http://localhost:9232/json/status.
  • I have already added configuration for VS Code. If you use different IDE, use below configuration
    Port: 9232
    Remote root: /usr/src/app

To learn more about debugger check below links:
https://code.visualstudio.com/docs/editor/debugging
https://nodejs.org/api/debugger.html

To learn more about docker
https://docs.docker.com/

Creating a web application which supports multiple languages

This demo application show you how to create web application which supports multiple languages.

Step 1.
Put below meta tag in HTML HEAD section
For HTML5 applications
<meta charset="UTF-8">
For HTML 4.01 applications
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

Step 2.
If your application invloves data which comes from MySQL.
Make sure your MySQL table charset/collation is set to UTF8
DEFAULT CHARSET=utf8

Step 3.
Set MySQL charset to utf8 after creating MySQL connection.
$mysqli->set_charset("utf8");

That’s it. Your application is ready to support multiple languages.

You can download this MultiLanguageWebApplication demo code from
Github