Improving console.log on Atom

How to set up a shortcut in Atom for better console logging.

If you use Atom and you code in any form of javascript then “console.log()” is probably one of the most frequent lines that you write. Luckily Atom provides shortcuts — type “lo” and then pressing tab will yield a line like this

console.log();

I recently started using a linter which complains about the semi-colon at the end of this line. This led me to experimenting with the default snippet. My new console log looks like this:

Console log

Now when I type “l” then “tab” I get a console log without the semi colon and the console log includes a naming string. Most importantly I only have to type the name of the variable once and it gets replaced in both locations.

How to add a snippet in Atom

If you want to have the same in your Atom browser, just go to File > Snippets, and add the following:

'.source.js':
  'console.log':
    'prefix': 'l'
    'body': "console.log('${1:variable}', ${1:variable})"
  • ‘.source.js’: this tells Atom which language the snippet is for
  • ‘console.log’: this is a description for the snippet dialog
  • ‘prefix’: the letter/phrase that you type for Atom to suggest this snippet
  • ‘body’: this is output when you select the autocomplete snippet.

Take note of the ${1:} — this tells Atom that there is some further input required. You can add more of these (like ${2:}) and you can use any word after the colon to remind yourself what to write. For example, I could have done this: console.log(${1:REPLACE_ME}) which would give an autocomplete like so:

console.log(REPLACE_ME)