Inspire your inner adventurer with our fearless Questocat by your side. From merging old pull requests to exploring new lands, you’ll always be ready to commit to adventure—just look at the back of your shirt if you need a reminder. This vintage game-inspired design is available now in the GitHub Shop.
The biggest barrier to code review is often time, but there’s a new way to easily understand how changes impact your code. Now you can navigate to changed methods and functions right from your pull request file finder.
Searching the file finder for a
We hope this helps make your review process even more efficient. Let us know if you have any feedback—or if there are other search functions you’d find useful using our help form.
We have a brand new thing for y’all that you can start using immediately: custom tab triggers!
For example, you could now easily set up the editor so that when you type
1337 then press tab, it could expand into:
I am the greatest developer ever.
Or, perhaps just slightly more practically… you could make
sitenav expand into:
You’d do this by going into your Editor Settings and adding it as a snippet:
These custom snippets are in addition to regular Emmet. Meaning you don’t need to make snippets for generic HTML. In Emmet, if you type
h1 and tab, you’ll get a
, like you always have. No need for a custom snippet for that.
Custom snippets work in both Pens and Projects. They basically do their thing in the editor anywhere you can edit code, as long as you are logged in.
To see everything they are capable of, check out the documentation.
The documentation covers the ins and outs of using them, including:
Custom snippets are broken into separate sections for HTML and CSS. That way, you can have custom triggers that only expand in the HTML editor, or only expand in the CSS editor. Perhaps you have a favorite block of CSS that you write a lot.
For example, I have a snippet
fullfill that expands into:
top: 0; left: 0; width: 100%; height: 100%;
Here are some more ideas for both:
It’s a big effort by creator Sergey Chikuyonok to break up it up into smaller parts:
Unlike current, monolithic implementation, new Emmet is a set of small composable and reusable parts. As a result, the abbreviation expander itself is just 66 kb minified (22 kb gzipped) instead of 218/64 kb of the previous version.
Emmet is what powers the custom snippets as well. That means you can (and probably should) use the Emmet syntax for HTML expansions. Doing it that way means that your snippets will expand into the correct language. For example, when you have Pug preprocessor turned on, your expansions will expand into Pug format.
This wasn’t possible before. Now, if you don’t like Emmet or custom snippets at all, you can just uncheck the checkbox and turn off Emmet entirely.
As a little bonus feature of the new Emmet, HTML tag editing has gotten a little easier. Now, the opening and closing tags edit at the same time.
I know I’m planning to make a full set of SVG snippets, where the basic shapes all expand into having all their attributes, like:
What are you gonna make?
The post New Feature for Everyone: Custom Tab Triggers! (and Emmet 2.0) appeared first on CodePen Blog.