VS Code JavaScript Shorthand & Snippets — Complete Guide with Tips

VS Code JavaScript Shorthand & Snippets — Code JS 10× Faster!

Hello friend! Writing long JavaScript lines repeatedly (like console.log(), document.querySelector(), document.addEventListener(), or try...catch blocks) slows down your development.

Did you know VS Code has powerful built-in JavaScript snippets, intelligent autocompletion, and support for custom shortcuts?

In this guide, we cover the most useful JavaScript shorthands, extension code snippets, custom snippet configurations, and pro tips to double your JS coding speed!

💡 No heavy setup needed! Most of these shortcuts work out of the box in VS Code!

If you want to explore more HTML, CSS, and JS tutorials:

1. Console Logging Shorthands

Print values into developer console quickly without typing console.log() manually every time:

Shorthand / Trigger	Expands To	Usage
`log` + `Tab`	`console.log();`	Standard console log
`clg` + `Tab`	`console.log();`	Quick console log shortcut
`warn` + `Tab`	`console.warn();`	Console warning (yellow text)
`error` / `cer`	`console.error();`	Console error (red text)
`clt` / `table`	`console.table();`	Print array/object as neat table
`dir` + `Tab`	`console.dir();`	Print object properties directory

💡 Pro Tip: Want instant console.log(variableName)? Install the Turbo Console Log extension! Select any variable name and press Ctrl + Alt + L to automatically insert a formatted console.log() on the line below!

2. Function & Arrow Function Shorthands

Arrow Functions & Declarations

Shorthand	Expands To	Description
`nfn`	`const name = (params) => { }`	Named arrow function
`anfn`	`(params) => { }`	Anonymous arrow function
`fof`	`for (const item of object) { }`	`for...of` loop
`fin`	`for (const key in object) { }`	`for...in` loop
`prom`	`new Promise((resolve, reject) => { })`	Create new Promise

Example - Named Arrow Function (nfn):

// Type 'nfn' and press Tab:
const fetchData = (url) => {
  
};

3. DOM Selector & Event Listener Shorthands

Interacting with the Web DOM requires typing selector methods frequently. Here are the fastest ways:

Shorthand	Expands To	Description
`qs`	`document.querySelector('')`	Select single DOM element
`qsa`	`document.querySelectorAll('')`	Select all matching DOM elements
`gid`	`document.getElementById('')`	Select element by ID
`ae`	`element.addEventListener('click', (e) => { })`	Add event listener

Example - DOM Selection & Event Listener:

// Type 'qs' + Tab and 'ae' + Tab:
const btn = document.querySelector('#submit-btn');

btn.addEventListener('click', (e) => {
  e.preventDefault();
  console.log('Button clicked!');
});

4. Async / Await & Fetch Shorthands

`try...catch` Block (`tc`)

Type tc and press Tab to generate error handling boilerplate:

try {
  
} catch (error) {
  console.error(error);
}

Async Fetch API (`asyncFetch`)

const getData = async (url) => {
  try {
    const response = await fetch(url);
    const data = await response.json();
    return data;
  } catch (error) {
    console.error("Error fetching data:", error);
  }
};

5. Array Methods Shorthands

JavaScript ES6 array methods (map, filter, forEach, reduce) can be written concisely with arrow function shorthands:

Shorthand / Method	Example Output
`.map()`	`items.map(item => item.name);`
`.filter()`	`numbers.filter(num => num > 10);`
`.forEach()`	`users.forEach(user => console.log(user));`
`.reduce()`	`arr.reduce((acc, curr) => acc + curr, 0);`
`.find()`	`users.find(user => user.id === 1);`

💡 Tip: Combine .filter() and .map() on a single chain for fast data transformation: users.filter(u => u.active).map(u => u.name)

6. Essential VS Code Extensions for JS Snippets

To get hundreds of pre-configured JavaScript shorthands out of the box, install these top VS Code extensions:

1. JavaScript (ES6) code snippets

Marketplace Name: JavaScript (ES6) code snippets by charalampos karypidis
Features: Provides ES6 syntax snippets (imp for import, exp for export, clg for console log, prom for promise, etc.).

2. ES7+ React/Redux/React-Native snippets

Marketplace Name: ES7+ React/Redux/React-Native snippets by dsznajder
Features: Must-have if you build React or modern JavaScript apps (rafce to generate React functional component, usf for useState, uef for useEffect).

3. Turbo Console Log

Marketplace Name: Turbo Console Log by Chakroun Anas
Features: Select any variable, press Ctrl + Alt + L to output console.log("file:line: variable", variable). Press Alt + Shift + D to delete all generated console logs!

4. Quokka.js

Marketplace Name: Quokka.js by Wallaby.js
Features: Instant JavaScript prototyping environment in VS Code. Displays execution results directly beside your code as you type!

7. How to Create Custom JS Snippets in VS Code

You can create your own custom JavaScript shortcuts in 1 minute!

Step 1: Open Snippets Config

Open VS Code.
Go to File → Preferences → Configure User Snippets (or Ctrl + Shift + P and type Snippets).
Select javascript (or javascript.json).

Step 2: Add Custom Snippets

Paste this JSON block into your javascript.json file:

{
  "Console Log": {
    "prefix": "clg",
    "body": ["console.log('$1');"],
    "description": "Log to console"
  },
  "Query Selector": {
    "prefix": "qs",
    "body": ["const $1 = document.querySelector('$2');"],
    "description": "Document Query Selector"
  },
  "Add Event Listener": {
    "prefix": "ae",
    "body": [
      "$1.addEventListener('$2', (e) => {",
      "  $3",
      "});"
    ],
    "description": "Add Event Listener"
  },
  "Async Fetch Function": {
    "prefix": "afetch",
    "body": [
      "const $1 = async (url) => {",
      "  try {",
      "    const response = await fetch(url);",
      "    const data = await response.json();",
      "    return data;",
      "  } catch (error) {",
      "    console.error('Fetch error:', error);",
      "  }",
      "};"
    ],
    "description": "Async Fetch Template"
  }
}

Now typing clg, qs, ae, or afetch inside any .js file will instantly expand into your custom code block! $1, $2, $3 represent tab stop positions where your cursor will jump.

8. Pro Tips for JavaScript Developers in VS Code

Tip 1: Automatic Imports for Modules

VS Code can automatically import functions, objects, and packages as soon as you type their name.

Enable this in .vscode/settings.json:

{
  "javascript.suggest.autoImports": true,
  "typescript.suggest.autoImports": true
}

Tip 2: Automatic JSDoc Comments

Type /** directly above any JavaScript function and press Enter. VS Code automatically generates JSDoc comment tags including @param and @returns!

/**
 * Calculate total price with tax
 * @param {number} price 
 * @param {number} taxRate 
 * @returns {number}
 */
function calculateTotal(price, taxRate) {
  return price + (price * taxRate);
}

Tip 3: Quick Fix & Refactor Menu (`Ctrl + .`)

Place your cursor on any variable or function, press Ctrl + . (or Cmd + . on Mac) to open the Quick Fix menu. You can convert functions to arrow functions, extract variables, add missing imports, and fix ESLint errors automatically!

Tip 4: Multi-Cursor Editing (`Alt + Click` or `Ctrl + D`)

Press Alt + Click to place multiple cursors anywhere on the screen.
Select a word and press Ctrl + D repeatedly to select all matching instances of that variable name across the file!

Summary — Top JavaScript Shorthands Reference

Shorthand	Expands To	Category
`clg` / `log`	`console.log()`	Console
`warn`	`console.warn()`	Console
`table`	`console.table()`	Console
`nfn`	`const fn = () => {}`	Functions
`tc`	`try { } catch(e) { }`	Error handling
`qs`	`document.querySelector()`	DOM Selection
`qsa`	`document.querySelectorAll()`	DOM Selection
`ae`	`.addEventListener()`	DOM Events
`afetch`	`async fetch()` template	API Calls
`Ctrl + Alt + L`	Instant console log (Turbo)	Extension

📚 Read More JavaScript Tutorials

Check out our complete list of JavaScript tutorials:

Happy coding JavaScript! 🎉 Speed up your workflow with these shorthands and custom snippets!