Vscode

I recently learned that VScode let’s you create different profiles that let you switch between different sets of settings, keyboard shortcuts, snippets, and most importantly, extensions. This is really if, like me, you have various extensions for different types of projects and don’t need them all running all the time. For example, I have extensions for C#, react, angular, or markdown projects (apparently I had 86 extensions installed 😱). The profile editor is actually pretty nice, letting you copy from an existing profiles for from some builtin templates. ...

Today I learned about .http files that you can use to make/test requests to any api endpoint from within most IDEs/editors. This started with the Rest client vscode extension and then Visual Studio 2022 added support somewhat recently. It kinda acts like an alternative to something like Postman but without leaving your editor, but for me the nice thing is it can act like a runnable form of documentation for your api that you can commit alongside your code. ...

This is a simple thing but I just discovered that with a simple regex and find/replace in most editors, you can quickly add text to the end of every line. For instance, if you want to add a , to every line, all you need is $: Or if you want to replace whatever the last character then you can use .$ instead. Of course, I use vscode-neovim so I just type :%s/$/,/ 😁 ...

Today I learned that vscode has an option to preserve case with find and replace (I somehow never noticed the “AB” button before). I’ve always wanted this when having to rename an entity in a file with instances both capitalized and lowercase. I actually discovered this because I saw that this feature was just added to the latest Visual Studio 2022 preview And for vim users, there’s Vim Abolish 😁

Today I learned that dev containers are an actual spec. I’d been hearing the term more lately but I thought it was a general term for containers used for local development but it’s actually an open spec for configuring an entire development environment within a container and it’s what you use to configure a github codespace for a repo. But the cool thing is you can use the vscode Dev containers extension and vscode will reopen in a docker container with all the dependencies, extensions, and configuration specified in a devcontainers.json. ...

Today I learned that the latest version of VS code added a smart option to detect when you’re pasting a URL and automatically paste it as a markdown link in markdown files. You can enable it by setting the markdown.editor.pasteUrlAsFormattedLink setting to smart or always. See the release notes.

Using the builtin Emmet functionality, you select any arbitrary text or HTML and wrap it with new markup by executing the command Emmet: Wrap with Abbreviation and typing an Emmet abbreviation. I’m going to be using this all the time now! It even understands JSX so it’ll output className if you specify a css class.

If you hover over a CSS selector or property, VS Code will provide an HTML snippet that’s matched by the CSS rule, and it will also show the specificity. For example, this very specific rule that’s similar to one I came across recently: I also had to look up the ~ which is the General sibling combinator.

I’ve gone through the setup and daily use of a number of editors over the years including most current popular ones for front end development (i.e. sublime, atom, and vs code) and for me VS code is the best choice for front end development at the moment. The team has put a lot of effort into making it a great javascript experience out of the box and it shows (VS code itself is written in typescript and the team uses vs code to build vs code) and with some additional work you can have the best experience while writing javascript. ...