How to Create Custom React TypeScript (.tsx) Code Snippets in Visual Studio Code

Mahabub Azam — Thu, 22 Aug 2024 18:09:14 +0000

VS Code is a wonderful tool when it comes to code editing you can just make your own custom code snippet and improve development productivity. If you write a lot of React components or anything else that is kind of boilerplate-ish and repetitive it makes sense to create custom snippets as well so your code stays nice, neat, concise i.e. DRY (Don't Repeat Yourself) across all projects. This blog will walk you through setting up a custom React TypeScript. tsx snippet in VS Code.

Step 1 🚀: Find the User Snippet

Open Visual Studio Code.
To access the user snippet, go to top menu > File> Preferences> User Snippets (or press Ctrl+Shift+P and type Snippets.)
Select the Language that you want to create a snippet for. Choose TypeScript React ( for a snippet of react-typescript code. tsx).

Step 2 🚀: Create a New Snippet

Once you click the language for which you want to define your new snippet, VS Code will open a JSON file were you should write down your custom snippets. Template to get you started

Step 3 🚀: Understand the Snippet Structure

prefix: This is the word that triggers your snippet. If you type "rfc" as a code, this is what the snippet shows up in your suggestions.

body - The code that will be embedded in document Using {} in this way you can define placeholders and tab stops where a user input should go.

description – Used to write a brief description of what the snippet does so that it will be easier for one to identify in suggestions.

Step 4 🚀: Store & Resue Your Code Snippet

Save the JSON file after creating this snippet. This way from now on, whenever you create a new. When you are working on a.tsx file in VS Code for example, if you type rfc, the snippet will expand into a complete React functional component skeleton.

Conclusion

Written by Chad, posted on 02-05–2019 Meta: VScode snippets can save you a metric f**k tonne of time when coding so that's an easy start point to look into. With such a guide in hand, you should be able to create React TypeScript snippets of your own that are tailored directly toward the way you work. Get going with writing your own snippets and how they change the way you write code!

CSS Box Model & Media Query Explained!

Mahabub Azam — Sun, 19 Dec 2021 16:36:53 +0000

> CSS Box Model:
When HTML elements are treated as a box, there are special benefits to web page design. This is a very convenient method to design the layout of any web page in particular. The CSS box model is the combined position of borders, margins, padding, and elements or content around HTML elements. Box model properties define border, margin, padding, or outline around any content.

Parts of CSS Box Model:
Margin - The margin is defined as the space around the border. No color can be used on the surface or background of the margin, it is completely transparent.
Border - The border is located around the content padding, that is, between the margins and the padding. The color of the surface or background influences the border.
Padding - The space around the content is determined using padding. No color can be used on the padding surface or background, it is completely transparent.
Content Itself- Any content in the box model is text, images, etc., which are displayed on the web page.

With CSS, when we define the width and height of an HTML element, we actually define the full width and height for only the content, such as - an image, a paragraph, etc. But in order to display any content beautifully on a web page, you must determine the padding, borders and margins.

> Explanation of CSS Media Query:
Media query is a method integrated with version 3.0 of CSS that makes it easy to make any web page responsive. Run or execute CSS style codes within the media query only if certain conditions are true.
The @media property is used to access CSS media queries. The width of the HTML elements is usually defined for different devices and a certain number of CSS style codes are specified for all devices of that width.

There is an example below, where CSS's @media property has been used. Normally the color of the surface or background is blue, but when the browser window is 600px or less, the color of the surface or background will be light blue.

A web page should be designed for a mobile or smartphone device before it is designed to be responsive to the desktop screen, so that the web page loads or appears faster on smaller screens like mobile.

DEV Community: Mahabub Azam

How to Create Custom React TypeScript (.tsx) Code Snippets in Visual Studio Code

CSS Box Model & Media Query Explained!