Vue Template in VS Code doesn't allow Emmet

Ryan Carter — Mon, 10 Aug 2020 22:13:37 +0000

I've recently been writing in Vue a lot more, and I ran into an issue in VS Code. Vue's doesn't recognize Emmet abbreviations in VS Code. It doesn't seem like such a big deal I guess, but it makes everything slower when I'm coding and is a bit of an annoyance at best. I found a fix and wanted to share in case you have the same issue.

What is Emmet?

If you don't know Emmet.io it allows you to write HTML code in short CSS-like abbreviations and expand it into UI in seconds. For example, I might type something like this:



#page>div.logo+ul#navigation>li*5>a{Item $}

Note: this is one of the examples from the emmet website. The brackets with a $ inside allows you to use dynamic values inside your expanded elements.

Hitting tab with Emmet installed will USUALLY give you this, unless you're using Vue:



<div id="page">
    <div class="logo"></div>
    <ul id="navigation">
        <li><a href="">Item 1</a></li>
        <li><a href="">Item 2</a></li>
        <li><a href="">Item 3</a></li>
        <li><a href="">Item 4</a></li>
        <li><a href="">Item 5</a></li>
    </ul>
</div>

I use emmet as much as I can, and it really makes life easier. I can make a mess of divs all in one line and hit tab to ensure every semantically-elegant developer hates me for all time. Sorry devs, old habits die hard. Divs are just easier sometimes to get things done when I don't need to fight with the default styles on ULs and LIs, etc. Sometimes semantics are just that, semantics. Don't @ me. #sorrynotsorry

Anyway, to get Vue to play nice with VS Code, and particularly Emmet inside the Vue tag, you apparently can install a great Vue addon called Vetur, and then modify the emmet section of your user settings.

Installing VS Code Addons

In case you're new to VS Code, here's how to install the Vetur addon. If you've done this before, feel free to skip this part. You'll want to continue down at the "Updating your Emmet User Settings" heading below.

Note: Apologies but in this case I'm using Windows to develop. Not preferred, but Mac and Linux are very similar if you're using them.

To install Vetur:

Next, type your search and click install. It may not be the first listing, but you want the one by Pine Wu. There are a few others that are not the right one, FYI.

Updating your Emmet User Settings

Go To File > Preferences > Settings

Search for "Emmet: Syntax" and click the "edit settings.json" link

Edit settings.json

add the emmet.syntaxProfiles property if it doesn't exist already.
Be sure to add a comma if there isn't one between the last property and the new emmet block.
Be sure to save the settings file.

Fair warning: Your list of properties will probably look different from mine.

You may need to close VS Code, and reopen (after saving the settings file) to be sure things loaded in correctly, but now you should be able to use Emmet code expansion inside the Vue tag. This should also work if you're writing Gridsome or Nuxt.js, since they are also pretty much just Vue code structured differently with some extras.

It does seem like there may be a few edge cases related to this for some people, but this wasn't my issue. The above fix is what worked for me so I wanted to share if you have the same thing.

Thanks for reading and Happy Coding!

Git: Your Email is not a member of team!

Ryan Carter — Tue, 04 Aug 2020 23:24:35 +0000

Have you ever seen this kind of message when trying to push code to gitlab (or possibly github, not sure)?

The output



remote: GitLab: Author 'your@email.com' is not a member of team
 ! [remote rejected] TCKT-1234 -> TCKT-1234 (pre-received hook declined)
error: failed to push some refs to 'git@gitlab.com/reponame'

Only I never added my personal git email ID to this machine, at least not that I remember. Look it's been "a year", okay? Too much going on. So how did this happen? Better than that, how do you fix it? Quick! I was supposed to push this an hour ago and things are broken. Ahhhh! I hate it when I have the dumb.

If you have the same problem, I know how you feel. I had the same problem too. I will likely have it again at some point, who knows?

What's the issue?

The issue is that another git ID got onto my computer somehow. Maybe I was exploring and trying out a new technology, signed into it with my personal git account, I backed out, or I fiddled with my settings for another project. Whatever the case, the damage was already done. To be honest, I don't even remember. #2020

Things I tried:

First I thought, okay, well, maybe I got the wrong ID in my config. I'll just reset it. So I did.

Global Git Config Settings:



# In terminal:
git config --global user.name "John Doe"
git config --global user.email "john@doe.org"

that didn't work, so I tried to do locally.

Local (this repo only) Git Config Settings:



# In terminal:
git config --local user.name "John Doe"
git config --local user.email "john@doe.org"

This MUST fix it right? Wrong author, so I reset the author. Makes sense? I tried to push again, same issue. Why? It turns out the latest commit was fine, but not the second to last commit I made. That one was a mistake. Clearly.

So what to do? Git log held the answer. Seems like I knew this at one point but hadn't needed it in a while so I forget how helpful it is. Log is a super useful command.

How to fix it:

1. Check git log to see your last commits



# In terminal:
git log

and I got a print out of all my recent commits. Screenshot redacted to protect client information security.

2. Copy the commit ID

The next step is to copy the commit ID from the one you want to change. The one with the wrong email on it.

3. git rebase

Then you want to run this to start the edit:



# In terminal:
git rebase -i 975479bb630b8495ac44d8a95c4e056c989b5a04

Where your commit ID is 975479bb630b8495ac44d8a95c4e056c989b5a04.

You should see it open your default text editor and give you a line with pick at the beginning.



# In Nano/Vim/text editor:
pick 1a2b3c commit message here

Change the "pick" to "edit" and be sure not to delete the space after edit. It should read:



# In Nano/Vim/text editor:
edit 1a2b3c commit message here

where 1a2b3c is the shorter version of the commit ID (it is auto added for you, don't need to add it yourself)

4. Save the File.

Now you're in "edit" mode for this commit.

5. Update the author info with this:



# In Terminal:
git commit --amend --author="Your Name <correctemail@company.com>"

If that goes well, then you continue the rebase with this:



# In Terminal:
git rebase --continue

If it doesn't go well, I would google the error that you get and see if you can find more info on it. Usually I learn more this way than any other.

Once you solve any issues, you should see something like this:



# In Terminal:
Successfully rebased and updated refs/heads/develop.

This is how you know things worked with the rebase. Now you can push your branch or merge or whatever you were trying to do before.

I did see a few good tutorials out there, but none that had the whole process, so I tried to piece this together from a few of them.

Warning:

Please be careful with rebasing. You normally shouldn't need to rebase much, and if you leave off the commit id you can end up rewriting the repo's history which will cause more issues. to learn more about what a rebase is and does, check out Atlassian's very good rebase article with pictures!

I'm a long time developer, but I'm learning new stuff every day, which is what I find most attractive about programming.

Let me know what you think of my first article and how you think I might improve it. Thanks for your feedback.

DEV Community: Ryan Carter