VS Code Tips & Tricks & Extensions
Tags: vscode, productivity, tooling, performance
Published: 2022-08-12 15:02:00

1. **[Code Runner](https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner)** - Run your code with just one click. 
2. **[Live Server Extension](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)** - Each time you save your code, you’ll quickly see the progressions
3. **[JavaScript (ES6) Code Snippets](https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets)** - This extension includes all code snippets for JavaScript programming in ES6 syntax for Vs Code editor.
4. **[HTML and CSS Support](https://marketplace.visualstudio.com/items?itemName=ecmel.vscode-html-css)** -  HTML id and class with auto-complete functionalities for Visual Studio Code.
`You can see a rundown of id and class suggested ideas by pressing ctrl + space.`
5. **[jQuery Code Snippets](https://marketplace.visualstudio.com/items?itemName=donjayamanne.jquerysnippets)** - provides Over 130 jQuery Code Snippets for JavaScript code. To use this extension effectively Just type the letters ‘jq’ in your code editor to get a list of all available jQuery Code Snippets.
6. **[Tailwind CSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss)** - autocomplete, syntax highlighting, and linting.
7. **[ES7+ React/Redux/React-Native snippets](https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets)**
8. **[Live Preview](https://marketplace.visualstudio.com/items?itemName=ms-vscode.live-server)** - live preview for HTML
9. **[Markdown Emoji](https://marketplace.visualstudio.com/items?itemName=bierner.markdown-emoji)** - to add emoji 
10. **[Thunder Client]
(https://marketplace.visualstudio.com/items?itemName=rangav.vscode-thunder-client)** - lightweight Rest API Client Extension (An alternative for Postman)
11. [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) - 

## For Beautifying your Code

1. **[Auto Rename Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag)** - Automatically rename paired HTML/XML tag
2. **[Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)** – Code Formatter
3. **[Better Comments](https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments)** -  Add meaningful comments..

>  [ * ] for highlighted text
>  [ ! ] for errors and warnings
>  [ ? ] for queries and questions
> [ // ] for strikethrough

Themes :
1. [Atom One Dark Theme](https://marketplace.visualstudio.com/items?itemName=akamud.vscode-theme-onedark)
2. [Dracula](https://marketplace.visualstudio.com/items?itemName=dracula-theme.theme-dracula)
3. [Cobalt2 Theme Official](https://marketplace.visualstudio.com/items?itemName=wesbos.theme-cobalt2)
4. [One Dark Pro](https://marketplace.visualstudio.com/items?itemName=zhuangtongfa.Material-theme)
5. [Shades of Purple](https://marketplace.visualstudio.com/items?itemName=ahmadawais.shades-of-purple)
6. [Palenight Theme](https://marketplace.visualstudio.com/items?itemName=whizkydee.material-palenight-theme)
7.[Monokai Pro](https://marketplace.visualstudio.com/items?itemName=monokai.theme-monokai-pro-vscode)
8.[Material Theme](https://marketplace.visualstudio.com/items?itemName=Equinusocio.vsc-material-theme)


 Icons :
1.[Material Icon Theme](https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme)
2.[vscode-icons](https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons)
3.[Easy icon theme](https://marketplace.visualstudio.com/items?
itemName=jamesmaj.easy-icons)
4.[Nomo Dark Icon Theme](https://marketplace.visualstudio.com/items?itemName=be5invis.vscode-icontheme-nomo-dark)

**Enable Emmet for JSX & Typescript**
> Go to setting.json file and paste this code below.

```
"emmet.includeLanguages": {
    "javascript": "javascriptreact",
    "typescript": "typescriptreact"
}
```