Client-side framework extensions

VS Code is very popular for open source development. Being an advanced editor, it provides many features that are usually available only in full-fledged IDEs. One of its core features is IntelliSense, which can be added via necessary extensions for specific platforms. In this section, we will discuss some code snippet extensions that can be used alongside different client-side frameworks when building applications on top of it. Whether you are working on plain vanilla JavaScript-based projects or creating an application on Angular or React Native, these extensions are useful and can help you generate code snippets on the fly for faster development.

Code snippet extensions for client-side frameworks

There are several extensions that are available for various frameworks and platforms. With snippet extensions, we can generate code on the fly by just typing or using their short code. For example, with the JavaScript (ES6) code snippet extension in the StandardJS Style extension, we can easily generate a snippet to generate a forEach loop in ES6 syntax.

Tip

Write some code and hit Tab to generate the snippet.

Some of the most common code snippet extensions that are used for building projects on JavaScript, Angular and React Native are discussed in the following sections.

JavaScript code snippets

This extension contains code snippets for JavaScript in ES6 syntax for the VS Code editor. Some of the snippets and their triggers are shown in the following list:

• cas: Console alert method – console.assert(expression, object)
• ccl: Console clear – console.clear()
• cco: Console count – console.count(label)
• cdi: Console dir console.dir
• cer: Console error – console.error(object)
• cgr: Console group – console.group(label)
• cge: Console groupEnd – console.groupEnd()
• clg: Console log – console.log(object)
• clo: Console log object with the name – console.log('object :', object);
• ctr: Console trace – console.trace(object)
• cwa: Console warn – console.warn
• cin: Console info – console.info
• clt: Console table – console.table
• cti: Console time – console.time
• cte: Console timeEnd – console.timeEnd

You can refer to https://github.com/xabikos/vscode-javascript to see the complete list of JavaScript code snippets.

React Native code snippets

For React Native projects, the ES7 React/Redux/GraphQL/React Native snippet is one of the best extensions that provides collections of React Native code snippets, which are useful for React Native/React/Redux ES6/ES7 and flowtype/TypeScript, Storybook.

Some of the snippets and their methods are shown in the following list:

• imr - import React from 'react'
• imrd - import ReactDOM from 'react-dom'
• imrc - import React, { Component } from 'react'
• imrcp - import React, { Component } from 'react' & import PropTypes from 'prop-types'
• imrpc - import React, { PureComponent } from 'react'
• imrpcp - import React, { PureComponent } from 'react' & import PropTypes from 'prop-types'
• imrm - import React, { memo } from 'react'
• imrmp - import React, { memo } from 'react' & import PropTypes from 'prop-types'
• impt - import PropTypes from 'prop-types'
• imrr - import { BrowserRouter as Router, Route, NavLink} from 'react-router-dom'
• imbr - import { BrowserRouter as Router} from 'react-router-dom'
• imbrc - import { Route, Switch, NavLink, Link } from react-router-dom'
• imbrr - import { Route } from 'react-router-dom'

You can refer to https://github.com/dsznajder/vscode-es7-javascript-react-snippets to see the complete list of React Native code snippets.

Angular code snippets

For Angular code snippets, you can check out Angular Snippets (version 9), developed by John Papa. This is one of the most popular extensions that is used with Angular projects. This extension contains collection of snippets that are used to generate code for Angular projects.

Here is a list of some of the snippets and their purpose that you can use them for in your projects:

• a-component: Component
• a-component-inline: Component with inline template
• a-component-root: Root app component
• a-ctor-skip-self: Angular NgModule's skipself constructor
• a-directive: Directive
• a-guard-can-activate: CanActivate guard
• a-guard-can-activate-child: CanActivateChild guard
• a-guard-can-deactivate: CanDeactivate guard
• a-guard-can-load: CanLoad guard
• a-httpclient-get: httpClient.get with Rx observable
• a-http-interceptor: Empty Angular HttpInterceptor for HttpClient
• a-http-interceptor-headers: Angular HttpInterceptor that sets headers for HttpClient
• a-http-interceptor-logging: Angular HttpInterceptor that logs traffic for HttpClient

There are a lot of other client-side framework snippet extensions available as well that can be used to develop applications faster using various technologies and on various platforms.