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 https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync

    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 : https://marketplace.visualstudio.com/items?itemName=humao.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

          Lynda.com is my favorite (paid)

  4. 2

    My Installed Extensions: HTML Developer

    [
    "auto-rename-tag",
    "beautify",
    "code-beautifier",
    "code-settings-sync",
    "debugger-for-chrome",
    "framer-syntax",
    "html-css-class-completion",
    "HTMLHint",
    "jquerysnippets",
    "LiveServer",
    "material-theme",
    "path-intellisense",
    "phpserver",
    "prettier-vscode",
    "project-manager",
    "smarty",
    "spacegray-vscode",
    "stylelint",
    "view-in-browser",
    "vsc-community-material-theme",
    "vsc-material-theme",
    "vsc-material-theme-icons",
    "vscode-csstree",
    "vscode-great-icons",
    "vscode-tailwindcss"
    ]

    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 dev.to https://dev.to/ryan1/the-best-setting-json-for-php-development-with-visual-studio-code-4agc

    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
    -Prettier
    -Javascript(ES6)Code Snippets
    -ES7 React/Redux/GraphQL/React-Native Snippets
    -HTML/CSS Support
    -ES Lint
    -Emmet Live
    -Babel JavaScript
    -npm Intellisense
    -Gulp
    -Ruby
    -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 Draw.io integration ❤️

  11. 1

    Bookmarks for marking and finding various parts of your code ( particularly HTML ) where Control+Shift+P won't go - https://marketplace.visualstudio.com/items?itemName=alefragnani.Bookmarks

    Bracket Pair Colorizer so it is easier to see where your closing tags are - https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer

  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,
    "workbench.tree.indent":6,
    "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",
    }