5 essential visual studio code extensions for web development
When working in web development, we spend the majority of our days working with our chosen text editor. Needless to say, your choice of editor is a personal thing so I’ll be passing no judgement!
I spent years using BBEdit then Sublime Text before moving over to Visual Studio Code last year; I’ll be focussing on that for this article. It should be noted though that most, if not all, of these extensions will have equivalent versions for the other popular editors as well.
The bulk of my work is with back-end web development, using a combination of PHP, javascript, and shell scripting so my choices here reflect that. Nonetheless, here are my five essential visual studio code extensions.
PHP Intelephense
Intelephense is a fully-featured PHP language server with a ton of features aimed at streamlining the development process. A few of my most often used include:
Code completion
Signature help for functions, methods, and constructors
Links to definitions on methods
Workspace wide searching of references to methods
It was only after using Intelephense for a while that I realised that I no longer needed to have php.net sitting open in a tab for the inevitable check on built-in function argument order checks or trying to remember seldom used function names. For this alone, it’s easily my favourite extension! Add in the ability to easily click through method signatures to their implementations and being able to easily find every instance where a particular method is being called from and you’ll very quickly see why this extension is so popular.
Better PHPUnit
Regular, easy testing of our code is an essential part of creating stable, reliable software and this extension lets us do both seamlessly; without having to leave our editor to run PHPUnit from the console. Better PHPUnit lets us set up key commands to run individual tests, all the tests in the current file, or even the entire test suite. It sounds like a little thing but not having to bounce between the console and editor means that running tests become second nature as part of the code writing process.
GitLens
Have you ever been editing a project and wondered who wrote the particular code that you are looking at? GitLens can give you a full history of authors, dates, and commits on a line-by-line basis. I find the annotation particularly useful. Bonus points if it turns out that the person that originally wrote the spaghetti code you are trying to decipher was you, six months ago!
Import Cost
Import Cost adds an annotation to your javascript import and requires calls showing the size of the code that will be included into your project. This gives us a very handy opportunity for preemptive optimisation as it is sometimes easy to forget that you don’t have to import an entire library if you are only using a small part of its functionality!
Auto Rename Tag
Auto Rename Tag simply makes sure that your ending HTML tag matches your opening HTML tag when you edit them. It seems like a small thing but is hugely helpful when working with older codebases or large templates as it is not always obvious which closing tag relates to which opening tag.
Do you use these code extensions, or have any suggestions from your own experience? We’re always up for a chat over on our Twitter @AfterDigitalUK – feel free to get in touch!
Or, if you currently work in web development and are looking for new opportunities, we are looking for a new front-end developer or full-stack developer to join our team. Check out our jobs page to find out more.