DEV Community: Abdullah Al Jahid

MUST USE VSCODE EXTENSIONS

Abdullah Al Jahid — Tue, 31 May 2022 19:05:36 +0000

What is VS Code Extensions?

Extensions are add-ons that allow you to customize and enhance your experience in Visual Studio by adding new features or integrating existing tools. An extension can range in all levels of complexity, but its main purpose is to boost your productivity and cater to your workflow.

VS Code extensions let you add languages, debuggers, and tools to your installation to support your development workflow.

How to install extensions in VS Code?

You can browse and install extensions from within VS Code. Bring up the Extensions view by clicking on the Extensions icon in the Activity Bar on the side of VS Code or use the View: Extensions command (Ctrl+Shift+X) to bring up the Extensions view.
This will show you a list of the most popular VS Code extensions on the VS Code Marketplace.

Installation of Extensions

To install an extension, select the Install button. Once the installation is complete, the Install button will change to the Manage gear button.You can also add the extensions from command line terminal.

Note: Sometimes you may need to restart your VS Code finish the installation process.

Let's have a look on some must use VS Code extensions.

Each extension in the list includes a brief description, the publisher, the download count, and a five star rating. You can select the extension item to display the extension's details page where you can learn more.

Prettier

Go to extensions view page and search for Prettier and install it.
Command for installing it from terminal:

code --install-extension esbenp.prettier-vscode

ESLint

Go to extensions view page and search for ESLint and install it.
Command for installing it from terminal:

code --install-extension dbaeumer.vscode-eslint

TSLint

Go to extensions view page and search for TSLint and install it.
Command for installing it from terminal:

code --install-extension ms-vscode.vscode-typescript-tslint-plugin

Code Spell Checker

Go to extensions view page and search for Code Spell Checker and install it.
Command for installing it from terminal:

code --install-extension streetsidesoftware.code-spell-checker

GitLens — Git supercharged

Go to extensions view page and search for GitLens — Git supercharged and install it.
Command for installing it from terminal:

code --install-extension eamodio.gitlens

TODO Highlight

Go to extensions view page and search for TODO Highlight and install it.
Command for installing it from terminal:

code --install-extension wayou.vscode-todo-highlight

Color Highlight

Go to extensions view page and search for Color Highlight and install it.
Command for installing it from terminal:

code --install-extension naumovs.color-highlight

NPM Intellisense

Go to extensions view page and search for npm Intellisense and install it.
Command for installing it from terminal:

code --install-extension christian-kohler.npm-intellisense

Path Intellisense

Go to extensions view page and search for Path Intellisense and install it.
Command for installing it from terminal:

code --install-extension christian-kohler.path-intellisense

IntelliCode

Go to extensions view page and search for IntelliCode and install it.
Command for installing it from terminal:

code --install-extension visualstudioexptteam.vscodeintellicode

GitHub Copilot

Go to extensions view page and search for GitHub Copilot and install it.
Command for installing it from terminal:

code --install-extension github.copilot

Thanks

Markdown Cheat Sheet

Abdullah Al Jahid — Sat, 19 Jun 2021 10:15:46 +0000

What is Markdown?

Markdown is a lightweight markup language with a plain text formatting syntax. It can be converted into HTML/XHTML and others formats. It's main purpose is readability and ease of use.

What It Is Used For?

README files (Github , etc.)
Forum and Blog Posts (dev.to, Medium etc)
Many static site generators.

Now let's have a look what can we do using markdown and how can we use it.

Headings

For Heading1

For Heading2

For Heading3

For Heading4

For Heading5

For Heading6

Alternatively, you can use an underline-ish style for H1 and H2:

For H1

For H2

Italic

Use single *asterisks* or _underscores_ for Italic.

Use single asterisks or underscores for Italic.

Bold/Strong

Use double **asterisks** or __underscores__ for Bold/Strong.

Use double asterisks or underscores for Bold/Strong.

Combined

**Bold and *Italic1* & _Italic2_**

Bold and Italic1 & Italic2

Strikethrough

Use two tildes ~~to scratch/strikethrough this.~~

Use two tildes ~~to scratch/strikethrough this.~~

Horizontal Rule

You can use any of the following...
Using Hyphens

---

Using Asterisks

***

Using Underscores

___

Using three Hyphens

Using three Asterisks

Using three Underscores

Blockquotes

> This line is quoted.
> This line is part of the same quote.

Paragraph:
> You can write a paragraph inside a blockquote. You can also use different markdown here. Such as *itlic*, **bold**, ~~strike~~ etc.

This line is quoted.
This line is part of the same quote.

Paragraph:

You can write a paragraph inside a blockquote. You can also use different markdown here. Such as itlic, bold, ~~strike~~ etc.

Links

There are two ways to create links.
1. Inline Link

[Abdulah Al Jahid](https://username.medium.com/)

Abdulah Al Jahid

1. Inline Link With a Title

[Abdulah Al Jahid](https://github.com/username "My Github Account")

Abdulah Al Jahid

Tricky way to add links in a button

<a target="_blank" href=""><img src="https://img.shields.io/badge/-%23.svg?&style=plastic&logo=&logoColor=white" alt=""></a>

Github link:

Medium Blog Link

<a target="_blank" href="https://github-readme-medium-recent-article.vercel.app/medium/@username/articleId"><img src="https://github-readme-medium-recent-article.vercel.app/medium/@username/articleId" alt="Alternative text">

Youtube Video Link

<a href="http://www.youtube.com/watch?feature=player_embedded&v=YOUTUBE_VIDEO_ID" target="_blank"><img src="http://img.youtube.com/vi/YOUTUBE_VIDEO_ID/0.jpg" 
alt="Alternative text" width="240" height="180" border="10" /></a>

Images

Inline Style:
![Markdown Logo](https://markdown-here.com/img/icon256.png)

Reference Style:
![Markdown logo][logo]
`[logo]: https://markdown-here.com/img/icon256.png`

Inline Style:

Reference Style:

Inline Code Block

This is inline `code block` using `back-ticks`.

This is inline code block using back-ticks.

Code Blocks and Syntax Highlighting

Normal Code blocks

Bash:

npm install
npm run dev

Javascript:

function add(number1, number2) {
  return number1 + number2;
}

Python:

def add(number1, number2):
  return number1 + number2

List

UL
You can use */-/+ in unordered list

* Item 1
* Item 2
    * Item 2.1
    * Item 2.2
        * Item 2.2.1

Item 1
Item 2
- Item 2.1
- Item 2.2
  - Item 2.2.1

1. Item 1
2. Item 2
3. Item 3

Item 1
Item 2
Item 3

Table

| First Name    | Last Name     | Id    |
| ------------- |---------------| ------|
| Mark          | Down          |   1   |
| Abdullah Al   | Jahid         |   2   |
| Awesome       | Table         |   0   |

First Name	Last Name	Id
Mark	Down	1
Abdullah Al	Jahid	2
Awesome	Table	0