switchon@lavalamp.biz
+27(0) 83 419 4851 / +27(0) 21 036 1165
Application & software development
Get A Quote

    • Home
    • Services
      • Application & software development
      • Outsourced software development
      • Project based resourcing
      • Digital marketing & consulting
      • Graphic design & consulting
      • UI / UX design & consulting
      • Recruitment services
      • Lease an expert
    • About
      • How we work
      • NBConsult Group
      • Partners
      • Lightbox Digital
    • Blog
    • Join us
    • Contact

    • Home
    • Services
      • Application & software development
      • Outsourced software development
      • Project based resourcing
      • Digital marketing & consulting
      • Graphic design & consulting
      • UI / UX design & consulting
      • Recruitment services
      • Lease an expert
    • About
      • How we work
      • NBConsult Group
      • Partners
      • Lightbox Digital
    • Blog
    • Join us
    • Contact

    • Home
    • Services
      • Application & software development
      • Outsourced software development
      • Project based resourcing
      • Digital marketing & consulting
      • Graphic design & consulting
      • UI / UX design & consulting
      • Recruitment services
      • Lease an expert
    • About
      • How we work
      • NBConsult Group
      • Partners
      • Lightbox Digital
    • Blog
    • Join us
    • Contact

    • Home
    • Services
      • Application & software development
      • Outsourced software development
      • Project based resourcing
      • Digital marketing & consulting
      • Graphic design & consulting
      • UI / UX design & consulting
      • Recruitment services
      • Lease an expert
    • About
      • How we work
      • NBConsult Group
      • Partners
      • Lightbox Digital
    • Blog
    • Join us
    • Contact
    what is test driven development
    What Is Test Driven Development?
    Jul 25, 2022
    ubuntu
    Help! I’ve Had To SSH Into A Linux Box For The First Time (Part 3)
    Sep 12, 2022

    Making The Most Of VS Code With Code Snippets

    Categories
    • Software Development
    Tags
    • code
    • code editor
    • code snippet
    • code snippets
    • coding
    • javascript
    • microsoft
    • PHP
    • productivity
    • stack overflow
    • vc code
    vs code with code snippets
    vs code with code snippets

    Introduction


    Visual Studio Code is powerful yet lightweight and was ranked as the most popular code editor by Stack Overflow’s 2022 Developer Survey. Out of the box, Visual Studio Code comes with numerous quality of life and productivity features. One of my favourite features is the snippets feature due to its versatility and multiple use cases.



    What is a Code Snippets?


    Code snippets are templates that allow for the faster creation of repeating code patterns. One of the most common examples of a code snippet is the for loop, as the basic structure of a for loop does not change. To use a code snippet, you have to type the associated prefix and then it will appear in Visual Studio Code’s IntelliSense panel (Ctrl + Space). You can then select the snippet with your arrows and the enter key. Once selected, there will typically be different highlighted sections that can be changed for your use case and navigated between using the tab key.




    Where do you get Code Snippets?


    Visual Studio Code ships with commonly used snippets for different languages, like PHP and JavaScript. If you want to add more snippets to an existing language or a language that is not supported out of the box, you can search for snippets in Visual Studio Code’s market place using the @category:"snippets" filter to get community-created snippets.



    Still, you may find that this does not cover all your bases and would like something that is specific to your own coding style. Fortunately, Visual Studio Code allows us to easily create our own custom user snippets.



    Creating your own snippets


    To create custom snippets, navigate to File (or Code on macOS) > Preferences > User Snippets, and Visual Studio Code will display a command palette. The command palette is where you can choose the language you want to create the snippet for or the New Global Snippets file option if it should be available for all languages. Visual Studio Code will then open a JSON file where the snippet can be defined.



    Custom snippets in action


    For an example of a custom snippet, we will create a very basic implementation of DomPDF.

    "Dompdf": {
    "prefix": ["dompdf", "basic_dompdf"],
    "body": [
    "\\$dompdf = new Dompdf();",
    "\\$dompdf->loadHtml(${1:\\$html});",
    "\\$dompdf->setPaper('A4', 'landscape');",
    "\\$dompdf->render();",
    "\\$dompdf->stream();",
    "$0",
    ],
    "description": "A basic Dompdf implementation."
    }


    As you can see in the example, a defined snippet consists of a prefix defining the words used to display the snippet in Visual Studio Code’s IntelliSense, a description is optional and displayed by the IntelliSense, and the most important part is the body where the snippet is defined.

    The body is a JSON array where each element is a new line. Visual Studio Code automatically handles indentation based on context. Tab stops are defined by the dollar symbol with an associated number. Tab stops from $1 on words will have the cursor jump to them in ascending order, while tab stops from $0 indicate where the cursor will end. You can also define a default value for a tab stop by wrapping the number with curly braces and following it with a colon and the default value (${1:default}). If you want to use a dollar sign in your snippet, it can be escaped using two back slashes (\\$).



    Conclusion


    Visual Studio Code allows for highly customisable user snippets, but I have only scratched the surface.

    There are more advanced features for which you can consult the official documentation.

    Contact us


      Related posts:

      development teamThe Weird And Beautiful JavaScript Language sending files with auxiliary dataSimple Way To Send A File With Auxiliary Data Via Axios In VueJS laravel envoyer and forgeProvisioning A New Digital Ocean Server With Laravel Forge, And Deploying Code With Laravel Envoyer 7 design principles for web design7 Design Principles For Web Design
      Share
      0
      Pieter van der Meijden
      Pieter van der Meijden

      Leave a Reply Cancel reply

      Your email address will not be published. Required fields are marked *

      Lava Lamp Lab


      Like technology, a lava lamp constantly changes form, producing new conditions with every passing moment



      lava lamp lab facebook   lava lamp lab twitter   lava lamp lab linkedin   lava lamp lab instgram

      Services


      Application & software development

      Outsourced software development

      Project based resourcing

      Digital marketing & consulting

      Graphic design & consulting

      UI / UX design & consulting

      Contact Us


      +27(0) 83 419 4851

      +27(0) 21 036 1165


      switchon@lavalamp.biz


      Unit 4 Monaco Square,
      14 Church Street,
      Durbanville,
      Cape Town, 7550

      NBConsult Group


      nbconsult
      nbconnect msp
      nbclearning
      river broadband
      designer needed
      © 2023 Lava Lamp Lab (Pty) Ltd | All Rights Reserved | Privacy Policy
      Contact us now

        Application & software development

          Outsourced software development

            Project based resourcing

              Digital marketing & consulting

                Graphic design & consulting

                  UI/UX design & consulting

                    Lease an expert

                      Recruitment services

                        We are using cookies to give you the best experience on our website.

                        You can find out more about which cookies we are using or switch them off in settings.

                        Lava Lamp Lab
                        Powered by  GDPR Cookie Compliance
                        Privacy Overview

                        This website uses cookies so that we can provide you with the best user experience possible. Cookie information is stored in your browser and performs functions such as recognising you when you return to our website and helping our team to understand which sections of the website you find most interesting and useful.

                        Strictly Necessary Cookies

                        Strictly Necessary Cookie should be enabled at all times so that we can save your preferences for cookie settings.

                        If you disable this cookie, we will not be able to save your preferences. This means that every time you visit this website you will need to enable or disable cookies again.

                        3rd Party Cookies

                        This website uses Google Analytics to collect anonymous information such as the number of visitors to the site, and the most popular pages.

                        Keeping this cookie enabled helps us to improve our website.

                        Please enable Strictly Necessary Cookies first so that we can save your preferences!

                        Cookie Policy

                        More information about our Cookie Policy