Snippets Css

One of the advantages of having a snippets is avoiding the repetition of writing the same block code, this in addition to generating a small delay in relation to the duration of the development of the code you are writing, it may happen that we copy a block of code from another project and not changing the variables and not realizing this, our code at the time of executation or compilation would end up failing.

With the intention of ending this problem of always repeating the same structure of the code block, we can generate a custom snippet, from which it would be enough to type just one word and our code block will already be built for us!!

This generates a greater time gain, since it is no longer necessary to copy and paste the same structure.

The snippet that we are going to create will be useful in the CSS language, as it will be responsible for creating a structure for resetting the styles for the HTML tags.

And to generate this snippet is very easy, just follow the steps below and your snippet will be working!!

How to create our snippet

1. Click on the File option from the top menu of VSCode.
2. Among the options suggested by File, click on Preferences.
3. In the Preferences options click on User Snippets.
4. After clicking on User Snippets a block will appear with options to create a snippet or select an existing snippet.
5. A list of several programming languages will also appear, as you can create a snippet for a specific language (which is what we are going to do) or you can also create a global snippet that will work regardless of the language you are coding.
6. In the input field, type css and click on the css.json (CSS) option.
7. After clicking this option, a css.json file will open in your editor.
8. In this file, just copy and paste the content below in your css.json file.

{
    // Place your snippets for css here. Each snippet is defined under a snippet name and has a prefix, body and 
    // description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
    // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the 
    // same ids are connected.
    // Example:
    // "Print to console": {
    //  "prefix": "log",
    //  "body": [
    //      "console.log('$1');",
    //      "$2"
    //  ],
    //  "description": "Log output to console"
    // }
    "Reset Css": {
        "prefix": "reset-css",
        "body": [
            "* {",
                "\tmargin: 0;",
                "\tpadding: 0;",
                "\tbox-sizing: border-box;",
            "}",

            "",

            "body {",
                "\tfont: 400 1rem '$1', sans-serif;",
            "}",

            "",

            "ul,",
            "li {",
                "\tlist-style: none;",
            "}",

            "",

            "a {",
                "\ttext-decoration: none;",
            "}",

            "",

            "img {",
                "\tdisplay: block;",
                "\tmax-width: 100%;",
            "}",
        ],
        "description": "Create a structure to reset the styling of html tags"
    },
}

1. After copying and pasting this content in the css.json file, just save it, and create a file with .css extension.
2. After creating this file, just type reset-css and press "enter" and that's it, your snippet is already working.

Explaining the snippet structure

• In the part that says "Reset Css" is just the title of your snippets (this is not the title that appears when you type in the .css file)
• prefix: This is the title references for you to type in the .css files that will be responsible for generating the structure of you snippets.
• body: Structure you want to generate.
• description: Description of what your snippets do.
• "\t" - Creates a space for indentation.
• "" - Quote alone is responsible for generating a line break (skips a line).
• $1 - Responsible for indicating to the mouse cursor where to appear to start typing.

Comments

1. Since we generated the snippet in the css.json file, this snippet will only work on files with the .css extension. If you want this snippet to be global, for all languages, just click on the New Global Snippets file option instead of typing css in step 6 of the tutorial.
2. The names of the structures that form the snippets (prefix, body, description) must not be changed.