DEV Community

Cover image for VS Code Tips & Tricks & Extensions
NIKHIL GAUTAM
NIKHIL GAUTAM

Posted on • Edited on

2 1

VS Code Tips & Tricks & Extensions

  1. Code Runner - Run your code with just one click.
  2. Live Server Extension - Each time you save your code, you’ll quickly see the progressions
  3. JavaScript (ES6) Code Snippets - This extension includes all code snippets for JavaScript programming in ES6 syntax for Vs Code editor.
  4. HTML and CSS Support - 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 - 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 - autocomplete, syntax highlighting, and linting.
  7. ES7+ React/Redux/React-Native snippets
  8. Live Preview - live preview for HTML
  9. Markdown Emoji - to add emoji
  10. Thunder Client - lightweight Rest API Client Extension (An alternative for Postman)
  11. Code Spell Checker -

For Beautifying your Code

  1. Auto Rename Tag - Automatically rename paired HTML/XML tag
  2. Prettier – Code Formatter
  3. Better Comments - Add meaningful comments..

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

Themes :

  1. Atom One Dark Theme
  2. Dracula
  3. Cobalt2 Theme Official
  4. One Dark Pro
  5. Shades of Purple
  6. Palenight Theme 7.Monokai Pro 8.Material Theme

Icons :
1.Material Icon Theme
2.vscode-icons
3.Easy icon theme
4.Nomo Dark Icon Theme

Enable Emmet for JSX & Typescript

Go to setting.json file and paste this code below.

"emmet.includeLanguages": {
    "javascript": "javascriptreact",
    "typescript": "typescriptreact"
}
Enter fullscreen mode Exit fullscreen mode

AWS GenAI LIVE image

How is generative AI increasing efficiency?

Join AWS GenAI LIVE! to find out how gen AI is reshaping productivity, streamlining processes, and driving innovation.

Learn more

Top comments (3)

Collapse
 
ccoveille profile image
Christophe Colombier

I like your list, but I would suggest you to add links to extensions.

First to make it easier, you know we, developers, are hard workers, but also damn lazy 😅

But also because it avoid the confusion about what extension you are talking about exactly. For example for code runner, there are few extensions that could match.

Collapse
 
nikhilgautam090696 profile image
NIKHIL GAUTAM

Okay I'll add the link.

Collapse
 
ccoveille profile image
Christophe Colombier

Thanks for doing it

Eliminate Context Switching and Maximize Productivity

Pieces.app

Pieces Copilot is your personalized workflow assistant, working alongside your favorite apps. Ask questions about entire repositories, generate contextualized code, save and reuse useful snippets, and streamline your development process.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay