Atom auto rel="noopener"

snippets.cson

##
 # Are you looking for a front-end developer? I’m looking for a new role!
 #
 # andycdev@gmail.com
 # andycochrane.co.uk
 ##

'*.html':
    'Target Blank (with rel="noopener")':
        'prefix': 'blank'
        'body': 'target="_blank" rel="noopener"'

target="_blank" has unexpected performance and security concerns[1], so should always be complemented with rel="noopener". This Atom snippet will automatically generate both for you. Simply type blank and hit <Tab>.

1. https://jakearchibald.com/2016/performance-benefits-of-rel-noopener/

Great! Would love if it could also be enforced by a linter, have any knowledge in that area?

Hey there @mendaomn,

You could probably create a custom linter based on the base linter which enforces this particular practice. However, I don’t think it is necessary or even appropriate for a linter to enforce this specific attribute as linters are more concerned with analysing code for general style consistency and potential errors.

I’ve created a variation on this snippet for you which will get you most of the way to autocompleting rel="noopener". To use this snippet you would use autocomplete to input your target="_blank" attribute and then use your snippets:expand key binding to append rel="noopener". Your key binding for snippets:expand will likely be the same as for autocomplete-plus:confirm so would just require an extra press. For example, I would begin typing target then hit tab 3 times and I will have a fully completed snippet like so: target="_blank" rel="noopener"

Here is the variation on the snippet (warning: it isn’t pretty)

'*.html':
    'Target Blank (with rel="noopener")':
        'prefix': '_blank'
        'body': '_blank" rel="noopener'

So, unfortunately, there is no enforcement happening here and you still have to remember the extra key press to add the rel="noopener" attribute, but we don’t have to remember the prefix name for the entire snippet.

Hope that helps.

Cheers,

Andy