10 ms·

Ask HN: What extensions/packs of VS Code are must for web/developers to install?

• AlchemistCamp 5y ago
  If I could only have two VS Code plugins, they'd be Live Share (Microsoft) and Vim (vscodevim).
  • MonaroVXR 5y ago
    >(vscodevim) Is it good enough without any quirks or are there several VIM extensions?
    • AlchemistCamp 5y ago
      It's not perfect, but it's mostly there. The biggest gaps I notice are related to visual things that VS Code basically replaces (e.g. nerdtree) and global functions. It's a huge improvement compared to using VS Code without it.
  • sherwinski 5y ago
    +1 for Live Share. It can be a source of frustration on initial connection but overall it has provided a huge boost to team collaboration during remote work. It is now a staple on my team for pair/mob programming.
• myroon5 5y ago
  If using CloudFormation: https://marketplace.visualstudio.com/items?itemName=kddejong.vscode-cfn-lint https://marketplace.visualstudio.com/items?itemName=kddejong...
• johnl1479 5y ago
  Pretty subjective, but I'm a fan of code-folding, so I rely heavily on the Auto Fold extension. https://marketplace.visualstudio.com/items?itemName=bobmagicii.autofoldyeah https://marketplace.visualstudio.com/items?itemName=bobmagic...
• mohanmcgeek 5y ago
  Over the years, gitlens is an extension I've installed everytime I installed vscode on a new machine. Other than that, the kubernetes extension is something that I use often enough although others say the Lens IDE is better for this purpose.
  • bebop 5y ago
    +1 for gitlens. I often use jetbrains for development work but fire up vs code with gitlens for tricky merge conflicts or a deep dive with blame.
    • d3nj4l 5y ago
      I've found JetBrains IDEs have pretty good Git tooling, and can show you history for selection and viewing complex commit histories. What do you use in GitLens that you find better than IDEA? I'm curious if it is worth making the jump.
      • mohanmcgeek 5y ago
        I'm not sure why but a lot of people using idea to write the actual code then switch to vscode to resolve a merge conflict or some other git mess that needs cleaning.. I think it's more about comfort levels. So if you're already comfortable doing this in IDEA, you don't stand to gain anything. Also, for Jvm languages, idea is still a better choice than vscode
    • pkaye 5y ago
      How does gitlens help with merge conflicts?
• leonsegal 5y ago
  tabnine - ai in the same vein as GitHub copilot. Speeds coding up quite a lot
  • anaganisk 5y ago
    In my experience Tabnine isn’t even near to Copilot. Tabnine is glorified autocomplete, where as copilot somehow takes the entire file into context including comments and I could many times just hit tab several times to almost build what I need. I had very good results in Java, Scala and python.
• dboreham 5y ago
  Bookmarks
• zerkten 5y ago
  >> They may even be used at FAANGs Why would this matter?
  • airstrike 5y ago
    Also isn't it MAANGs now? Or possibly MAANA, but in that case I'd rather rewrite it as MAAAN...
    • tester756 5y ago
      MAGMA <3
      • mastersip 5y ago
        NAGMA (Bollywood edition)
      • dilippkumar 5y ago
        I second this.
    • ant6n 5y ago
      Shouldn't Microsoft be included these days as well? Working for the MMAAAN... ...you gotta use these fancy VS Code extensions
      • gardaani 5y ago
        Shouldn't Tesla be included? Largest companies by market cap: Apple, Microsoft, Alphabet, Amazon, Tesla, Meta = TAMAMA
        • ant6n 5y ago
          But Nvidia and Netflix too, right? TA MMAANN?
  • m00dy 5y ago
    Working at FAANGs is not cool anymore. Go and build your thing at web3. Stakeholder capitalism is the new cool kid in town.
• andyonthewings 5y ago
  VS Code Remote - Containers [1] is a game changer. https://code.visualstudio.com/docs/remote/containers https://code.visualstudio.com/docs/remote/containers
  • vanillax 5y ago
    Yea when you have tons of python packages to install, VS code containers become real nice. I was new to VS code containers and had a issue trying to debug python inside of it. I wrote an article for anyone who might be having the same issue. https://python.plainenglish.io/python-debugging-within-visual-studio-code-dev-containers-f42f8878f7ca https://python.plainenglish.io/python-debugging-within-visua...
  • arcbyte 5y ago
    Yep, although I mostly do Remote WSL these days.
  • danieka 5y ago
    I'm considering contains for frontend development (Vue) at work. What are the biggest benefits in your experience?
    • zamalek 5y ago
      1. Team onboarding is almost zero effort. I spent upwards of a week onboarding in the past (install this library, install this server, install is broken, try again, etc.). That becomes clone, click, and forget with dev-containers. 2. If you CI you dev-container and publish to a private registry, only one computer is spending the time installing and setting up dependencies. Everyone else simply bases their local image off of that one (and saving productive working time). 3. If you mess up the dev environment with some failed experiment, simply recreate the container and carry on. 4. The dockerfile is a form of documentation: what is needed for this thing to run. 5. If you use Github, you can run your environment in a browser if you are in a pinch. I've only done this once, but it was hella useful.
  • dzonga 5y ago
    probably not running into issues with node modules symlink like you would with plain wsl
• m00dy 5y ago
  Github's copilot
• tester756 5y ago
  Remote SSH https://code.visualstudio.com/docs/remote/ssh https://code.visualstudio.com/docs/remote/ssh
  • emerged 5y ago
    That one literally changed my life. It probably doubled my productivity without exaggerating and maybe more.
• nikivi 5y ago
  Here are ones I use: https://wiki.nikitavoloboev.xyz/text-editors/vs-code/vs-code-extensions https://wiki.nikitavoloboev.xyz/text-editors/vs-code/vs-code... For web dev I like: Error Lens, Version Lens, Tailwind CSS IntelliSense & Highlight Matching Tag
• jbirer 5y ago
  Tomorrow and Tomorrow night color scheme "ES7 React/Redux/GraphQL/React-Native snippets" Vim
• Waterluvian 5y ago
  Not exactly an extension, but a practice that I'm shocked many people don't seem to use is to set up autoformatting on save. I will hit ctrl+s after every few lines of code or so, allowing my "coding wingman" to tidy things up as I go. It releases me from caring, in the slightest, about formatting, so I'm focused entirely on writing syntactically valid code, and letting the formatter worry about the deterministic minutiae that is formatting. The reason I like doing this in real-time rather than some `run formatting before committing` workflow is that I benefit instantly from tidy code as I'm writing it. If you are _ever_ thinking about formatting and you spend time manipulating proper spacing and layout, semicolons, or other language-specific quirks yourself, you may be wasting time that could be spent on the non-trivial parts of writing code. Consider trying it!
  • rolisz 5y ago
    I just tried enabling that this week, but I found that I often press Ctrl-S out of habit, even when I have syntactically invalid code and then the autoformatter messes things up royally and I get lost. For now, I just memorized the shortcut for autoformatting and I'm running it manually when I feel the need to "tidy up" the code.
    • Waterluvian 5y ago
      I’m curious what language you’re working on and what formatter it uses? In my experience many formatters will not run if the AST is invalid.
      • rolisz 5y ago
        I'm using Python and PyCharm. It happily underlines the invalid syntax and then reformats things more or less randomly.
    • goodells 5y ago
      Mine won't do any auto-formatting when the syntax is invalid, so when I hit CMD + S and it _doesn't_ format it's a cue to start looking for errors.
• aigo 5y ago
  The MSFT team themselves have some of the best extensions. The remote pack - containers, SSH, docker - is fantastic.
• rsweeney21 5y ago
  Could not imagine living without Prettier. It's a code formatter. The team agrees on how we want to do formatting, and we check in our Prettier preferences, so everyone's code on the team is formatted the same automatically. Helps keep the entire code base formatted consistently. Prettier - Code formatter https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode https://marketplace.visualstudio.com/items?itemName=esbenp.p...
  • RobertRoberts 5y ago
    I came here to add Prettier as well.
  • ChicagoBoy11 5y ago
    I think this is probably the only piece of software that I can think of that we pretty much lived our entire lives without, then almost immediately after it was launched not a single person who knew about it could ever fathom not having it.
    • SwiftyBug 5y ago
      It even changed my personal coding style. Things I chose to do before now look ugly to me.
      • zoover2020 5y ago
        I stopped caring about any coding style, as long as we agreed on a prettier configuration. Not caring about this saves me so much mental capacity, I would recommend it
  • AlchemistCamp 5y ago
    I couldn't disagree more. The whole debacle around break before else caused me to avoid using them for any projects going forward: https://github.com/prettier/prettier/issues/840 https://github.com/prettier/prettier/issues/840 For JS formatting, I either use Rome or ESLint.
• johnx123-up 5y ago
  1. Starter Bundle https://marketplace.visualstudio.com/items?itemName=JasonAMartin.starter-bundle https://marketplace.visualstudio.com/items?itemName=JasonAMa... 2. And occasionally skimming through https://marketplace.visualstudio.com/search?target=VSCode&category=Extension%20Packs&sortBy=Installs https://marketplace.visualstudio.com/search?target=VSCode&ca...
• shmde 5y ago
  I find myself use "Live Server" extension alot.
  • SippinLean 5y ago
    It's no longer maintained, Five Server replaced it https://marketplace.visualstudio.com/items?itemName=yandeu.five-server https://marketplace.visualstudio.com/items?itemName=yandeu.f...
• luciomartinez 5y ago
  a.k.a. the reason of why I use IntelliJ, everything built in.
  • jackdh 5y ago
    Their remote development is still lacking compared to VS Code however I've found.
  • 5e92cb50239222b 5y ago
    What kind of work do you do? I use have about a dozen plugins, and I hate installing them, so that's only things that are absolutely necessary (like prettier).
  • crdrost 5y ago
    Is there a way to script IntelliJ? I find myself in a job with 30ish coupled microservices, because they are coupled flipping between them is not unusual... But trying to set up a project that has all of them as parallel sub-projects, (a) gives me no way to impose a folder hierarchy and (b) it seems like I have to set up Cloud Code and each individual subproject separately. So I am using VS Code for java dev despite its shortcomings (in particular in the same setup it does not work well with a monorepo hosting those other repos as git submodules, so you want to just load up a plain folder with the microservices in subfolders, but then the Java plugins do not recognize that you have loaded a Java project...) and like it's ok but I did prefer the testing of IntelliJ and some other features... But is there anyway to take these things that take 5 minutes or less to configure on a single microservice/subproject, and apply them to everything with 10 minutes of effort, rather than hours of doing it by hand?
    • 5e92cb50239222b 5y ago
      Well, database result exporters (into CSV/TSV/whatever) and JPA entity generators are built as IDE scripts, so there is at least some level of support. I could never find any decent documentation though. Look into Alt+1 → Scratches and consoles → Extensions And here's a random "blog post" with some additional examples: https://gist.github.com/gregsh/b7ef2e4ebbc4c4c11ee9 https://gist.github.com/gregsh/b7ef2e4ebbc4c4c11ee9
• cdaringe 5y ago
  I write markdown everyday. Tables are slow to format by hand in GFM. This extension lets you write your tables nearly at the speed of plaintext. Excellent extension https://marketplace.visualstudio.com/items?itemName=RomanPeshkov.vscode-text-tables https://marketplace.visualstudio.com/items?itemName=RomanPes...
  • WithinReason 5y ago
    Another good Markdown extension (e.g. live preview): https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one https://marketplace.visualstudio.com/items?itemName=yzhang.m...
• marpstar 5y ago
  Excel Viewer[1] and Rainbow CSV[2] are very useful for anyone regularly working with CSV files in Code. [1]: https://marketplace.visualstudio.com/items?itemName=GrapeCity.gc- https://marketplace.visualstudio.com/items?itemName=GrapeCit... [2]: https://marketplace.visualstudio.com/items?itemName=mechatroner.rainbow-csv https://marketplace.visualstudio.com/items?itemName=mechatro...
• zwarag 5y ago
  1. Auto Rename Tag (for xml tag renaming) 2. Conventional Commits 3. Git Graph 4. IntelliJ IDEA Keybindings (as someone who uses both it's a blessing) 5. Path Intellisense 6. Peacock (changes color of vscode instance when it's in the background, usefull when multiple are open)
  • windock 5y ago
    Would you care to share reasons of using both IDEA and VS Code?
    • jb1991 5y ago
      It’s pretty common to have two different IDEs open on the same project. For example QT developers will often have the QT creator as well as VS code open. Developers on Apple‘s platforms almost always keep Xcode open, while they may also have another IDE open alongside it that allows them to work in the project with greater productivity, but still build and profile and do other things that are only available in Xcode.
    • ChefboyOG 5y ago
      I had a similar setup at a previous job. Basically, the journey went like: 1. I already used VSCode as my daily driver. 2. Backend team all used IDEA for their Java codebase/had some workflows designed with it in mind. 3. I familiarized myself with IDEA for working on the backend, but used VSCode for the rest of the codebase.
    • 5e92cb50239222b 5y ago
      Not OP, but I'm doing the same thing. I spend 95% of my time in IDEA, though. VSC is for Ansible playbooks (because it has a relatively decent extension), and when I need a quick and dirty fix in some other projects (so you don't have to wait five times as long for IDEA to warm up).
• thex10 5y ago
  If you have the godforsaken Touch Bar, I've found Nasc VSCode Touchbar extension helpful. Now I can finally use the Touch Bar for various text manipulation shortcuts.
• AlbinoDrought 5y ago
  Indent rainbow for staying sane while editing YAML files: https://open-vsx.org/extension/oderwat/indent-rainbow https://open-vsx.org/extension/oderwat/indent-rainbow
  • maleldil 5y ago
    Have you tried the built-in `"editor.guides.bracketPairs": true`? It will colour the indent guides.
    • WorldMaker 5y ago
      For those not following the release notes `"editor.bracketPairColorization.enabled": true` is a new option in VSCode (since September's release) after the team saw how common extensions like Indent Rainbow and Bracket Pair Colorizer 2 were and how many complaints were out there about how slow they were, so they decided to add it as a built in feature that can reuse the same processes as the core indent guides. Also a lot of interesting work went into optimizing the algorithms at work: https://code.visualstudio.com/blogs/2021/09/29/bracket-pair-colorization https://code.visualstudio.com/blogs/2021/09/29/bracket-pair-... An interesting case of the team watching the extensions ecosystem for ideas to make the core product better.
• merpnderp 5y ago
  VIM. I don't know how people program without being able to quickly move the cursor around, quickly regex code, or any of the million of things VIM does.
  • SwiftyBug 5y ago
    You mean do regex-based searches on the code? I couldn't think of a bigger mental overhead than that.
  • anaganisk 5y ago
    So do you also visit threads about Tesla to promote Ford?
    • merpnderp 5y ago
      VSCode has a VIM plugin. This would be more like saying you use CarPlay in your Tesla instead of the built in Tesla software for navigating the radio.
• throwaddzuzxd 5y ago
  Two lesser known extensions I always install are: - "Bookmarks", to persistently mark some lines and easily find them later (there's even an explorer pane with the bookmarks by file). It's must have when navigating a big code base - "Todo Tree", to list all the TODOs and FIXMEs from the codebase in a panel
• kall 5y ago
  In theory, I prefer to keep extensions to a minimum to keep UX and performance light. In practice I am using 3 different extensions and a bunch of custom CSS to make vscode look like Xcode. It‘s all superfluous though. I think "project specific" stuff is all I actually need and would recommend to someone else, including a language appropriate auto formatter. For me currently that‘s Prettier, ESLint and Apollo GraphQL.
  • jb1991 5y ago
    I’m just curious, why are you going through that effort just to make it look like a different IDE? What are you gaining exactly from that?
    • kall 5y ago
      For no good reason whatsoever. Because I am the kind of nerd that has on old copy of the Apple Human Interface Guidelines on their bookshelf and VS Code is leagues above any well designed editor for TS.
    • 0x1062 5y ago
      Presumably they prefer the look of one IDE and the features of another?
• cipher_system 5y ago
  Project Manager. For quickly switching between projects.
• eitland 5y ago
  Related: anyone figured out how we are supposed to have install an extension in only one workspace instead of installing it once and then do "disable in this workspace" in the other 6 workspaces?
• bitwidget 5y ago
  Peacock is pretty important for me. When I have multiple VSCode windows open, the extension lets me have different colors for these windows and helps me quickly identify what project is on what window.
  • hikarudo 5y ago
    Awesome, thanks for the suggestion!
• samrohn777 5y ago
  Tabnine extension. Improves my productivity with auto code completion
• bobblywobbles 5y ago
  (Note) self-promotion I needed cells in Excel to be translated into a list that SQL would like. I copied rows from Excel into VSCode, and would run a series of regex commands to format it into a valid SQL list. I got tired of running this manually, and turned it into an extension. https://marketplace.visualstudio.com/items?itemName=reZach.listtosql https://marketplace.visualstudio.com/items?itemName=reZach.l...
  • yarinr 5y ago
    Find myself doing that often too (not specifically from Excel, but generally formatting lines to SQL list with regex). Will definitely give your extension a try!
    • bobblywobbles 5y ago
      Thanks for trying it out!
    • lazyeye 5y ago
      Also try NimbleText (windows) which is really useful for translating csv data into sql or whatever other format you require
• jwalton 5y ago
  This is the set of VSCode plugins I install: https://github.com/jwalton/environment/blob/master/vscode-extensions.txt https://github.com/jwalton/environment/blob/master/vscode-ex... If you're after some snippets, this is my modest collection: https://github.com/jwalton/environment/tree/master/vscode/prefs/snippets https://github.com/jwalton/environment/tree/master/vscode/pr... Mostly I add snippets like `rrrfn` to create a new react function component (it starts with `rrr` so it won't show up in suggestions unless I explicitly want it), or "jestfile" to scaffold out a test case.
• gremlinsinc 5y ago
  github copilot is something I don't think I could do without now that I've tried it... just don't use it exclusively, use the code suggestions sure, but be sure it does what you want it to do. Know your code!
• princevegeta89 5y ago
  String manipulation, Random generator (supports strings and UUIDs), Remote Containers ( must have for Docker), Rainbow brackets, Settings Sync, Markdown Preview, Editorconfig Support, Intellij Keybindings?, A lot of themes!
• kevinslin 5y ago
  I find that the biggest aspect for development is keeping track of information (eg. documentation, tasks, playbooks, etc) Dendron (https://marketplace.visualstudio.com/items?itemName=dendron.dendron https://marketplace.visualstudio.com/items?itemName=dendron....) is a note taking tool for developers - its open source, built on plaintext markdown, and integrated with VSCode. You can use it to manage your own personal knowledge base and to document your code base. Disclaimer: I'm the creator of Dendron. We recently did a Launch HN post where you can find more details on what we're building: https://news.ycombinator.com/item?id=29176158 https://news.ycombinator.com/item?id=29176158
  • JoBrad 5y ago
    Dendron looks awesome - thanks for linking to it! I really prefer Markdown, but have been using OneNote simply because of the mobile accessibility. Do you have a mobile app that you like using with Markdown? I’m on iOS, if that matters.
• rahimnathwani 5y ago
  SQLTools and SQLTools PostgreSQL Driver You can use VSCode to edit your SQL queries, and run them without pasting into PGAdmin or whatever.
• legobmw99 5y ago
  “Live Server” is great for launching a local web server when you’re editing web files
• beagle3 5y ago
  Probably the best thread to ask this on: Being paranoid, I want to install some extensions (and their updates, etc.), but I am afraid of originally malicious extensions, and of malicious-takeovers (as was very common, and still happens, for Chrome and Firefox extensions). Developers and their machines are, in general, more lucrative targets for bad actors than your average Web person. How do you protect your setup with minimal cost to usefulness and productivity?
• slmjkdbtl 5y ago
  I think it's helpful to take a weekend to learn to write extensions, it's very helpful to be able to make your own little tools for your own workflow. However it's also easy to fall into the void of endless tweaking and no real code especially if you're on vim or emacs.
• namaljayathunga 5y ago
  I use these productive extensions https://marketplace.visualstudio.com/items?itemName=Gruntfuggly.bettercomment https://marketplace.visualstudio.com/items?itemName=Gruntfug... https://marketplace.visualstudio.com/items?itemName=alefragnani.Bookmarks https://marketplace.visualstudio.com/items?itemName=alefragn... https://marketplace.visualstudio.com/items?itemName=EdgardMessias.clipboard-manager https://marketplace.visualstudio.com/items?itemName=EdgardMe... https://marketplace.visualstudio.com/items?itemName=fabiospampinato.vscode-diff https://marketplace.visualstudio.com/items?itemName=fabiospa... https://marketplace.visualstudio.com/items?itemName=geeebe.duplicate https://marketplace.visualstudio.com/items?itemName=geeebe.d... https://marketplace.visualstudio.com/items?itemName=letrieu.expand-region https://marketplace.visualstudio.com/items?itemName=letrieu.... https://marketplace.visualstudio.com/items?itemName=plrenaudin.gotolastedit https://marketplace.visualstudio.com/items?itemName=plrenaud... https://marketplace.visualstudio.com/items?itemName=vincaslt.highlight-matching-tag https://marketplace.visualstudio.com/items?itemName=vincaslt... https://marketplace.visualstudio.com/items?itemName=gazugafan.vscode-indent-on-paste https://marketplace.visualstudio.com/items?itemName=gazugafa... https://marketplace.visualstudio.com/items?itemName=ms-vscode.sublime-keybindings https://marketplace.visualstudio.com/items?itemName=ms-vscod... https://marketplace.visualstudio.com/items?itemName=yatki.vscode-surround https://marketplace.visualstudio.com/items?itemName=yatki.vs... https://marketplace.visualstudio.com/items?itemName=fabiospampinato.vscode-todo-plus https://marketplace.visualstudio.com/items?itemName=fabiospa... https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag https://marketplace.visualstudio.com/items?itemName=formulah... https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens https://marketplace.visualstudio.com/items?itemName=eamodio.... https://marketplace.visualstudio.com/items?itemName=mkloubert.vscode-kanban https://marketplace.visualstudio.com/items?itemName=mklouber... https://marketplace.visualstudio.com/items?itemName=xyz.local-history https://marketplace.visualstudio.com/items?itemName=xyz.loca... https://marketplace.visualstudio.com/items?itemName=kruemelkatze.vscode-dashboard https://marketplace.visualstudio.com/items?itemName=kruemelk... https://marketplace.visualstudio.com/items?itemName=Gruntfuggly.todo-tree https://marketplace.visualstudio.com/items?itemName=Gruntfug...