Want to Customize VSCode? You Might Have to Start from Scratch.
Like many new coders, as soon as I started using VSCode, I wanted to customize the crap out of it. I downloaded extension upon extension, installing anything I could find that was in any way related to what I was working on in my coding bootcamp.
When we started building Rails applications with lots html.erb files, I was relieved to know that my handy-dandy extensions would help me with the cumbersome erb tags required in Rails view files. Unfortunately, nothing was working quite the way I wanted it. I searched through my plethora of extensions, but after installing so many of them, I didn’t even know what I was looking for. Was I supposed to turn a setting off or on? Did I have too many extensions, or not enough? I realized I had gotten myself in too deep and needed to nuke VSCode.
Resetting VSCode to its default settings proved more difficult than I anticipated. You see, VSCode is a pretty smart program, and it does a great job of tracking your activities and settings. Even after uninstalling all my extensions, things still weren’t working the way I wanted them to.
I know, I know. It’s a lot of work for some carats and %s. But after talking to my classmates, I found that many of them had similar complications getting everything to work *just so*. And although I found many guides for customizing VSCode (linked below), and a few for returning the program to its default settings (also below), I couldn’t find anything explaining what to do if you’ve followed the guides and things still aren’t working quite right. And so, this blog post was born.
In this post I’m going to offer you various options to both reset VSCode and start customizing your erb capabilities. So, first thing’s first: how to deal with those pesky extensions.
- Disabling Installed Extensions
First, go to your extensions either by navigating to Code > Preferences > Extensions in the menu bar…
…or hit shift-command-x. After that, in the Extensions menu bar in the upper left corner of your window (most likely), click on the three dots on the right side of the bar:
From there, you can choose to disable all installed extensions:
2. Deleting extensions and settings
If you want something a little more extreme, you can delete your extensions and settings completely. There are two ways of accomplishing this goal: a) deleting the contents of settings.json, or b) removing your settings file completely.
2a) To delete the contents of settings.json, simply go to Code > Preferences > Settings, then click on the text-file icon in the top right corner of the window. It looks like this:
From there, simply delete (or comment out) the code. Now, there may be code in other settings files that’s continuing to affect VSCode, unbeknownst to you. We’ll get to that later.
2b) If you’re not satisfied with erasing file contents and want to blast the whole thing to hell, you might consider removing settings files completely using the command line. But tread carefully; deleting files is a one-way trip. In the words of Name Name, author of a helpful Macworld guide to the command line:
If I sound ominous when discussing the powers of the
rmcommand, there’s a good reason. As I said before, this command deletes files; it nukes them. You can’t get them back. You can’t click on the Trash icon and retrieve files you’ve accidentally deleted.
Now that you’ve been warned, this Stack Overflow post offers several solutions for deleting VSCode settings. I’ve distilled the information for you here. To delete your settings file, open up your favorite terminal app, and enter the following code:
rm $HOME/Library/Application Support/Code/User/settings.jsonTo delete your extensions file:
rm ~/.vscode/extensionsAt this point, your version of VSCode should be totally wiped. Now for the fun part. If you want to build erb files like a pro, this Medium post is the most helpful guide I’ve found. Seriously, read this post. I’m not going to summarize everything in it, but instead offer a solution the author omits. To access VSCode’s built-in autocompletion for html tags in html.erb files, access your settings (if you don’t know how by now, what have you been reading??), search for “Emmet.” You’re going to be adding functionality to Emmet’s “Include Languages” setting:
If you were to open up Emmet’s json file, you’d find a has with included languages. Luckily for you, VSCode allows you to edit this file from the user interface. Add “erb” under “item” and “html” under “value,” and you should be autocompleting html tags in html.erb files in no time.
Erb settings are even more fun! (This is fun, right? Right?? Hey come back!)
For this step, you’re going to navigate to Code > Preferences > User Snippets and search for “erb” in the search bar. You’re looking for a file titled erb.json; if no such file exists, you can make one yourself! Once you’re in the erb settings file, try pasting the following code snippet from Graham Flaspoehler, author of the aforementioned very useful Medium post on html.erb settings:
Once you’ve saved this file, navigate to an html.erb file. Start typing “snowcone,” “squid,” or “cmmt,” and you should notice that VSCode is suggesting an autocomplete solution. Just press enter and you should see the appropriate erb tags. And the cool part is, you can make your own! Here’s a snippet I wrote to easily create a form_for with a submit tag:
"form_for with submit": {"prefix": "ffs","body": ["<%= form_for @${1:model} do |f| %>\n\t$0\n <%= f.submit %>\n<%end%>\n"],"description": "form_for with submit tag",}
The “prefix” is what you type into VSCode to generate an autocompleted tag. Play around with this file and have some fun! Oh, and go ahead and download some extensions if you want, but like all things coding, be intentional—you don’t want to have to start over and read this post all over again!
