Developers May 22, 2020

Favorite VScode extensions?

Brayden W @BraydenTW

Hey IH community 👋

I am a huge fan of VScode mainly because of all of its extensions. A few of my favorites are:

  • SASS compiler
  • Live server
  • .MD viewer
  • ES6/ReactJS Snippets

... and so on.

Do you have a favorite? Let's help each other out by shouting out some helpful and easy-to-use extensions!

  1. 4

    Hands down

    Syncs your VSCode settings/plugins to Github. Helps me get setup on a new machine in a couple of minutes.

    1. 2

      This is already inbuilt in VS Code in the Preview channel though, and will soon ship to the stable channel!

    2. 1

      This would've been really helpful if I knew about this a couple months ago when I got a new laptop 😂. Will keep this in mind for the future 👏

  2. 2

    100% has to be REST Client :

    You can do SO MUCH with it. I use it to test new APIs I find online or to clear my CloudFlare cache from VSCode. You can easily create a list of requests and save them in your repo for future use. It's like having Postman inside VSCode, but with a much better/simpler interface and integrated within your current project.

  3. 2

    Some I use daily (React/Node/Python):

    • ESLint
    • Git History
    • MDX
    • Color highlight
    • npm Intellisense
    • String manipulation
    • Terraform
    • vscode-styled-components
    • Auto close tag
    • Auto import
    • Babel JavaScript
    • Python
    1. 2

      Very helpful! I am learning React and Python right now so those ones will be really helpful! 😀

      1. 2

        Just out of curiosity, slightly off topic, what are some resources you use for learning? (Newsletters, free and paid resources, communities, etc?)

        1. 2

 is my favorite (paid)

  4. 2

    My Installed Extensions: HTML Developer


    1. 2

      Yo, these are great dude! I’ll try them out! 😄

      1. 1

        Apart from jquerysnippets, I wouldn't use that in 2020 😂

  5. 2

    Vim keybindings!

    1. 2

      That. Nough' said.

  6. 1

    I wrote an article about which extensions are best for PHP development with VScode on

    This is my minimal setup for VScode when using it for PHP repos:

    • bmewburn.vscode-intelephense-client
    • mikestead.dotenv
    • ikappas.phpcs
    • neilbrayfield.php-docblocker
  7. 1

    The extensions I use on VS Code are:
    -Live Server
    -Live SASS Compiler
    -Auto Rename Tag
    -Javascript(ES6)Code Snippets
    -ES7 React/Redux/GraphQL/React-Native Snippets
    -HTML/CSS Support
    -ES Lint
    -Emmet Live
    -Babel JavaScript
    -npm Intellisense
    -VS Code Ruby
    -Git Lens

    1. 2

      @Bri219 looks like we like some of the same stuff, I trade options as well - premium selling, TT. I just followed you from my personal twitter account but saw messages were turned off. hmu if you wanna talk some shop.

      1. 1

        Hey @trainermade.I found you and followed back on Twitter.We can definitely build on some options trading.

    2. 2

      I love auto rename tag. Its very helpful. I'll have to try out git lens.

  8. 1

    Some of my favorites have already been mentioned in other replies. One remaining extension is: Import Cost that I am a huge fan of.

  9. 1

    I use the same as you and also Gitlens, Prettier, EsLint and Html Boilerplate!

  10. 1

    Python, GitLens, GitMoji and integration ❤️

  11. 1

    Bookmarks for marking and finding various parts of your code ( particularly HTML ) where Control+Shift+P won't go -

    Bracket Pair Colorizer so it is easier to see where your closing tags are -

  12. 1
    • prettier
    • “auto rename tags” for html tags - so useful!
    • ES7 React snippets
    • better comments
    1. 1

      I’ve never heard of better comments 🤦‍♂️. I’ll have to try it out 😄

  13. 1
    • Prettier (probably the most helpful one, for most languages except PHP)
    • PHP CS Fixer (for PHP)
    • ESLint

    I have started using code formatters for some languages after first being introduced to the one for Go (gofmt), and they have been extremely helpful. I can get very distracted formatting code and making sure it is all in a certain format and the fixers above have helped significantly.

    1. 1

      I love prettier too!

  14. 1
    • Prettier. Whenever I code without it and the code does not magically jump into the right format on save, I feel like something is wrong or broken.
    • Ungit, a great Git UI to quickly see history and branch relationships.
    1. 1

      Cool. I’ll check out ungit 👍

  15. 0

    my settings

    "editor.lineHeight": 32,
    "javascript.validate.enable": false,
    "javascript.updateImportsOnFileMove.enabled": "always",
    "bracketPairColorizer.forceIterationColorCycle": true,
    "editor.fontWeight": "500",
    "editor.fontLigatures": true,
    "editor.letterSpacing": 0.5,
    "editor.cursorWidth": 5,
    "editor.snippetSuggestions": "top",
    "editor.glyphMargin": true,
    "terminal.integrated.fontWeight": "400",
    "window.zoomLevel": -2,
    "files.trimTrailingWhitespace": true,
    "files.trimFinalNewlines": true,
    "terminal.integrated.fontSize": 14,
    "terminal.integrated.fontWeightBold": "700",
    "terminal.integrated.lineHeight": 1.6,
    "liveServer.settings.donotShowInfoMsg": true,
    "files.autoSave": "afterDelay",
    "editor.formatOnType": true,
    "editor.formatOnPaste": true,
    "html.format.indentInnerHtml": true,
    "liveServer.settings.AdvanceCustomBrowserCmdLine": "",
    "editor.defaultFormatter": "vscode.emmet",
    "editor.minimap.enabled": false,
    "workbench.colorTheme": "Outrun Electric",
    "editor.formatOnSave": true,
    "files.autoSaveDelay": 400,
    "emmet.showSuggestionsAsSnippets": true,
    "[scss]": {
    "editor.defaultFormatter": "HookyQR.beautify"
    "[html]": {
    "editor.defaultFormatter": "vscode.html-language-features"
    "git.ignoreLimitWarning": true,
    "editor.fontFamily": "Fira Code Retina, iA Writer Duospace, Menlo, Monaco, 'Courier New', monospace",