Steve Kinney

Visual Studio Code

Visual Studio Code Snippet Exercises

  1. Basic Function: Create a snippet that, when you type func, generates a basic TypeScript function declaration. It should include placeholders for the function name, parameters, and return type, with tab stops to easily navigate between them. Add a descriptive label.
  2. Arrow Function: Design a snippet triggered by arrfunc that creates a basic TypeScript arrow function. Include placeholders for the variable name, parameters, and return type, with tab stops for navigation. Add a description.
  3. Async Function: Develop a snippet with the prefix asyncfunc that generates an asynchronous TypeScript function declaration. It should have placeholders for the function name, parameters, and return type (within a Promise), and use tab stops for easy editing. Include a description.
  4. Basic Class: Create a snippet that, upon typing class, generates a basic TypeScript class structure, including the constructor. Use placeholders for the class name and constructor parameters, with tab stops for easy filling. Add a description and ensure it spans multiple lines.
  5. Class Method: Design a snippet with the prefix classmethod to generate a public method within a TypeScript class. Include placeholders for the method name, parameters, and return type, with tab stops for navigation. Add a description.
  6. Private Property: Develop a snippet triggered by privateprop to quickly declare a private property within a TypeScript class. Include placeholders for the property name and its type, with tab stops. Add a description.
  7. Basic Import: Create a snippet that, when you type import, generates a basic TypeScript import statement using curly braces for named imports. Include placeholders for the module name(s) and the import path. Add a description.
  8. Import All: Design a snippet with the prefix importall to generate a TypeScript import statement that imports all modules from a path under a given alias. Include placeholders for the alias and the import path. Add a description.
  9. Type Alias: Develop a snippet with the prefix typealias to declare a TypeScript type alias. Include placeholders for the type name and the type definition. Add a description.
  10. Promise: Design a snippet with the prefix promise to generate a basic structure for creating a new Promise in TypeScript, including the resolve and reject callbacks. Include a placeholder for the Promise’s type and another for the body of the Promise. Ensure it’s multiline and has a description.
  11. Basic fetch Request: Create a snippet that, when you type ffetch, sets up the basic structure for a fetch request in TypeScript. It should include placeholders for the URL, the HTTP method (consider using a choice placeholder for ‘POST’, ‘PUT’, ‘PATCH’, ‘DELETE’, ‘GET’), and an empty body (for relevant methods). Include basic error handling with a try/catch. Use tab stops to navigate through the URL, method, and body. Add a description.
  12. Import Default Export: Design a snippet triggered by importdef that generates a TypeScript import statement specifically for importing the default export from a module. It should include placeholders for the variable name that will hold the default export and the path to the module. Add a description.
  13. Basic Express Route: Develop a snippet with the prefix expressroute that lays out the basic structure of an Express route handler in TypeScript. It should include placeholders for the route path, the HTTP method (consider a choice placeholder for get, post, put, patch, delete), and the request (req), response (res), and next (next) parameters. Include a basic res.send() or similar within the handler. Ensure it’s multiline and has a description.
  14. Basic React Component: Create a snippet that, upon typing rc, generates the basic structure of a functional React component in TypeScript. It should include placeholders for the component name, and a basic return statement with a div or similar. Consider including a basic import for React if needed. Ensure it’s multiline and has a description.
  15. File Header Snippet: Create a snippet that, when you type fileheader, generates a standard file header comment in TypeScript, automatically including the current filename and the current date. Use the appropriate Visual Studio Code predefined variables for this. Add a description.
  16. Transform to Uppercase: Design a snippet with the prefix toupper that takes a word as input through a placeholder and then inserts both the original word and its uppercase version. Use a transform to convert the placeholder text to uppercase. Add a description.
  17. Surround with try…catch: Develop a snippet with the prefix trycatch that is designed to surround selected TypeScript code with a try…catch block. It should use the $TM_SELECTED_TEXT variable to represent the highlighted code. Add a description.

You can take a look at some of the proposed solutions here.

Last modified on .