DEV Community

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

Posted on • Edited on

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

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