Jonah Lawrence

Jonah Lawrence

1605668508

How to Create Custom Snippets for Any Language in VS Code

One of the most important things for coding productively is having easy access to your code snippets.

Visual Studio Code and Emmet let you make snippets that write large blocks of code with tiny shortcuts.

In this tutorial, I will show you how to create custom code snippets for HTML and CSS using Emmet and also for all types of languages and files using VS Code User Snippets. You can create abbreviations for code in all of your favorite languages including JavaScript, React, PHP, Python, Markdown, and others.

You will learn how to create custom Emmet Abbreviations to type HTML structures and CSS properties faster, boilerplates for your favorite languages, function snippets with labeled and unlabeled tabstops, and how to use VS Code’s variables in your snippets.

Watch: https://youtu.be/gU7b5Vgnalw

📺 In this video:
0:00 - Intro
0:49 - Emmet Snippets
6:19 - VS Code User Snippets
13:30 - Snippet Variables
18:20 - Conclusion

I will be using Windows 10 with Visual Studio Code text editor (http://bit.ly/get-vscode) and Brave Browser (https://bit.ly/get-brave-browser). I use Brave Browser because it’s just like Chrome but it removes ads and trackers so you can browse privately and ad-free.

⚡ Learn more about Emmet Abbreviations:
▶ https://youtu.be/5ecM9n7A_pY

🖥 More Web Development tutorials
▶ https://www.youtube.com/playlist?list=PL9YUC9AZJGFFAErr_ZdK2FV7sklMm2K0J

👨‍💻 More VS Code Tutorials
▶ https://www.youtube.com/playlist?list=PL9YUC9AZJGFGfI5CTIuhKgTLcWY4m1ZaO

💻 More tutorials
▶ https://www.youtube.com/playlist?list=PL9YUC9AZJGFHTUP3vzq4UfQ76ScBnOi-9

❤ Subscribe: http://bit.ly/SubscribeDPT

#tutorial #vscode #vs-code #snippets #productivity #customization

What is GEEK

Buddha Community

How to Create Custom Snippets for Any Language in VS Code

Sam Elias

1605671321

✨ Amazing! Thanks so much!

Jonah Lawrence

Jonah Lawrence

1605668508

How to Create Custom Snippets for Any Language in VS Code

One of the most important things for coding productively is having easy access to your code snippets.

Visual Studio Code and Emmet let you make snippets that write large blocks of code with tiny shortcuts.

In this tutorial, I will show you how to create custom code snippets for HTML and CSS using Emmet and also for all types of languages and files using VS Code User Snippets. You can create abbreviations for code in all of your favorite languages including JavaScript, React, PHP, Python, Markdown, and others.

You will learn how to create custom Emmet Abbreviations to type HTML structures and CSS properties faster, boilerplates for your favorite languages, function snippets with labeled and unlabeled tabstops, and how to use VS Code’s variables in your snippets.

Watch: https://youtu.be/gU7b5Vgnalw

📺 In this video:
0:00 - Intro
0:49 - Emmet Snippets
6:19 - VS Code User Snippets
13:30 - Snippet Variables
18:20 - Conclusion

I will be using Windows 10 with Visual Studio Code text editor (http://bit.ly/get-vscode) and Brave Browser (https://bit.ly/get-brave-browser). I use Brave Browser because it’s just like Chrome but it removes ads and trackers so you can browse privately and ad-free.

⚡ Learn more about Emmet Abbreviations:
▶ https://youtu.be/5ecM9n7A_pY

🖥 More Web Development tutorials
▶ https://www.youtube.com/playlist?list=PL9YUC9AZJGFFAErr_ZdK2FV7sklMm2K0J

👨‍💻 More VS Code Tutorials
▶ https://www.youtube.com/playlist?list=PL9YUC9AZJGFGfI5CTIuhKgTLcWY4m1ZaO

💻 More tutorials
▶ https://www.youtube.com/playlist?list=PL9YUC9AZJGFHTUP3vzq4UfQ76ScBnOi-9

❤ Subscribe: http://bit.ly/SubscribeDPT

#tutorial #vscode #vs-code #snippets #productivity #customization

Tyrique Littel

Tyrique Littel

1604008800

Static Code Analysis: What It Is? How to Use It?

Static code analysis refers to the technique of approximating the runtime behavior of a program. In other words, it is the process of predicting the output of a program without actually executing it.

Lately, however, the term “Static Code Analysis” is more commonly used to refer to one of the applications of this technique rather than the technique itself — program comprehension — understanding the program and detecting issues in it (anything from syntax errors to type mismatches, performance hogs likely bugs, security loopholes, etc.). This is the usage we’d be referring to throughout this post.

“The refinement of techniques for the prompt discovery of error serves as well as any other as a hallmark of what we mean by science.”

  • J. Robert Oppenheimer

Outline

We cover a lot of ground in this post. The aim is to build an understanding of static code analysis and to equip you with the basic theory, and the right tools so that you can write analyzers on your own.

We start our journey with laying down the essential parts of the pipeline which a compiler follows to understand what a piece of code does. We learn where to tap points in this pipeline to plug in our analyzers and extract meaningful information. In the latter half, we get our feet wet, and write four such static analyzers, completely from scratch, in Python.

Note that although the ideas here are discussed in light of Python, static code analyzers across all programming languages are carved out along similar lines. We chose Python because of the availability of an easy to use ast module, and wide adoption of the language itself.

How does it all work?

Before a computer can finally “understand” and execute a piece of code, it goes through a series of complicated transformations:

static analysis workflow

As you can see in the diagram (go ahead, zoom it!), the static analyzers feed on the output of these stages. To be able to better understand the static analysis techniques, let’s look at each of these steps in some more detail:

Scanning

The first thing that a compiler does when trying to understand a piece of code is to break it down into smaller chunks, also known as tokens. Tokens are akin to what words are in a language.

A token might consist of either a single character, like (, or literals (like integers, strings, e.g., 7, Bob, etc.), or reserved keywords of that language (e.g, def in Python). Characters which do not contribute towards the semantics of a program, like trailing whitespace, comments, etc. are often discarded by the scanner.

Python provides the tokenize module in its standard library to let you play around with tokens:

Python

1

import io

2

import tokenize

3

4

code = b"color = input('Enter your favourite color: ')"

5

6

for token in tokenize.tokenize(io.BytesIO(code).readline):

7

    print(token)

Python

1

TokenInfo(type=62 (ENCODING),  string='utf-8')

2

TokenInfo(type=1  (NAME),      string='color')

3

TokenInfo(type=54 (OP),        string='=')

4

TokenInfo(type=1  (NAME),      string='input')

5

TokenInfo(type=54 (OP),        string='(')

6

TokenInfo(type=3  (STRING),    string="'Enter your favourite color: '")

7

TokenInfo(type=54 (OP),        string=')')

8

TokenInfo(type=4  (NEWLINE),   string='')

9

TokenInfo(type=0  (ENDMARKER), string='')

(Note that for the sake of readability, I’ve omitted a few columns from the result above — metadata like starting index, ending index, a copy of the line on which a token occurs, etc.)

#code quality #code review #static analysis #static code analysis #code analysis #static analysis tools #code review tips #static code analyzer #static code analysis tool #static analyzer

Adam Jaco

Adam Jaco

1605010906

How to Create Custom Emmet Snippets in VS Code

Hello, my friends and fellow developers, in this video I have talked about a new feature in VS Code. That lets you create snippets for emmet, which is very helpful!

Let me know in the comments below if you want more VS Code videos or any other videos. And like the video, if you like it.

🔴 Subscribe here: https://bit.ly/2K5Ydaf

Github: https://github.com/max-programming/

#vs code #coding #programming

Jonah Lawrence

Jonah Lawrence

1605783262

Full Guide to Custom Snippets in VS Code

If you prefer to watch a video instead, click here.

The problem

I’ve been coding for quite a while now and one thing I’ve noticed is that I use the same code a lot. Whether it be a function using CURL to fetch url contents, CSS properties to apply material box-shadows, or simply create EventListeners in JavaScript. Usually this means I end up wasting time doing it again, or in some cases I look through my old projects to copy-paste the code I’ve written. I’ve come up with a few solutions to this problem such as using GitHub Gists, but VS Code Snippets is by far the best.

The solution

Visual Studio Code and Emmet let you make snippets that write large blocks of code with tiny shortcuts. You can access entire functions you’ve written with just a couple key presses.

Overview

In this tutorial, I will show you how to create custom code snippets for HTML and CSS using Emmet and also for all types of languages and files using VS Code User Snippets. You can create abbreviations for code in all of your favorite languages including JavaScript, React, PHP, Python, Markdown, and others.

You will learn how to create custom Emmet Abbreviations to type HTML structures and CSS properties faster, boilerplates for your favorite languages, function snippets with labeled and unlabeled tabstops, and how to use VS Code’s variables in your snippets.

Video tutorial

https://www.youtube.com/watch?v=gU7b5Vgnalw

Part 1: Emmet Abbreviations

If you don’t yet know, Emmet is an amazing tool that is built into VS Code that allows you to type complex HTML structures quickly and type CSS properties with abbreviations. You can learn more about it here.

Now that you know about Emmet Abbreviations, here’s how you can create your own abbreviations for HTML structures and CSS properties!

Create a snippets file

Find a place on your computer to store your snippets. I chose C:/Users/jonah/emmet/, but you can pick any folder you like.

Create a new JSON file and call it snippets.json.

Add the path to your settings

Open your user settings. You can do this by pressing F1 and searching for the command Preferences: Open Settings (JSON).

Add the emmet.extensionsPath

For me, this looks like:

{
   ...
   "emmet.extensionsPath": "C:\\Users\\jonah\\emmet",
}

Add your snippets

Use this template in your snippets.json to add abbreviations.

{
  "html": {
    "snippets": {
      // html snippets here
    }
  },
  "css": {
    "snippets": {
      // css snippets here
    }
  }
}

Here’s an example of snippets I have set up:

Symbols such as {$1} are tabstops and ${1:1px} is an example of a tabstop with a default value.

Watch how these work in the video.

{
  "html": {
    "snippets": {
      "ull": "ul>li.item${${1:Item $}}*3",
      "hsf": "header+section+footer",
      "gfont": "link[rel=preconnect][href=\"https://fonts.gstatic.com\"]+link[href=\"https://fonts.googleapis.com/css2?family=${1:Open+Sans}&display=swap\"]",
      "lbi": "label>input[class]",
      "lbc": "label>input:c[class]+{$1}"
    }
  },
  "css": {
    "snippets": {
      "bn": "border: none",
      "on": "outline: none",
      "bsd": "border: ${1:1px} solid ${2:red}",
      "cw": "color: white",
      "cb": "color: black",
      "tra": "transition: ${1:all} ${2:0.3s} ${3:cubic-bezier(0.25, 0.8, 0.25, 1)}",
      "teo": "transition: ${1:all} ${2:0.2s} ease-out",
      "tei": "transition: ${1:all} ${2:0.2s} ease-in",
      "fww": "flex-wrap: wrap",
      "cp": "cursor: pointer",
      "tt": "transform: translate(${1:0px}, ${2:0px})",
      "ttx": "transform: translateX(${1:0px})",
      "tty": "transform: translateY(${1:0px})",
      "tr": "transform: rotate(${1:90deg})",
      "pen": "pointer-events: none",
      "fdc": "flex-direction: column",
      "fdcr": "flex-direction: column-reverse",
      "fdr": "flex-direction: row",
      "fdrr": "flex-direction: row-reverse"
    }
  }
}

Part 2: VS Code User Snippets

Select User Snippets under File > Preferences (Code > Preferences on macOS).

Select the language you want to create snippets for or select “New Global Snippets file” to create snippets for all languages.

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.

Placeholders: $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.

Here is an example of my javascript.json snippets file:

// javascript.json

{
	"Document Query Selector": {
		"prefix": "dqs",
		"body": [
			"document.querySelector(\"$1\")"
		]
	},
	"Document Query Selector All": {
		"prefix": "dqsa",
		"body": [
			"document.querySelectorAll(\"$1\")"
		]
	},
	"Add Event Listener": {
		"prefix": "ael",
		"body": [
			"addEventListener(${1:\"click\"}, $2 , false);"
		]
	},
	"Add Event Listener Function": {
		"prefix": "aelf",
		"body": [
			"addEventListener(${1:\"click\"}, function () {",
			"\t$2",
			"} , false);"
		]
	},
}

You can also use snippets for boilerplates or awesome CSS shadows:

// css.json

{
	"CSS Boilerplate": {
		"prefix": "!",
		"body": [
			"html {",
			"\t-webkit-box-sizing: border-box;",
			"\t-moz-box-sizing: border-box;",
			"\tbox-sizing: border-box;",
			"}",
			"",
			"*,",
			"*:before,",
			"*:after {",
			"\t-webkit-box-sizing: inherit;",
			"\t-moz-box-sizing: inherit;",
			"\tbox-sizing: inherit;",
			"}",
		]
	},
	"Shadow Depth 1": {
		"prefix": "shadow1",
		"body": [
			"box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);"
		]
	},
	"Shadow Depth 2": {
		"prefix": "shadow2",
		"body": [
			"box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);"
		]
	},
	"Shadow Depth 3": {
		"prefix": "shadow3",
		"body": [
			"box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);"
		]
	},
	"Shadow Depth 4": {
		"prefix": "shadow4",
		"body": [
			"box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);"
		]
	},
	"Shadow Depth 5": {
		"prefix": "shadow5",
		"body": [
			"box-shadow: 0 19px 38px rgba(0, 0, 0, 0.30), 0 15px 12px rgba(0, 0, 0, 0.22);"
		]
	}
}

Variables

VS Code also has variables you can use in your snippets.

  • TM_SELECTED_TEXT - Currently selected text

  • TM_CURRENT_LINE - Current line contents

  • TM_CURRENT_WORD - Word under the cursor

  • TM_LINE_INDEX - Zero-index based line number

  • TM_LINE_NUMBER - One-index based line number

  • TM_FILENAME - Filename of the current document

  • TM_FILENAME_BASE - Filename without extensions

  • TM_DIRECTORY - Directory of the current document

  • TM_FILEPATH - Full file path of the current document

  • CLIPBOARD - The contents of your clipboard

  • WORKSPACE_NAME - The name of the opened workspace or folder

  • CURRENT_YEAR - Current year

  • CURRENT_YEAR_SHORT - Last two digits of current year

  • CURRENT_MONTH - Month as two digits (ex. ‘03’)

  • CURRENT_MONTH_NAME - Full name of the month (ex. ‘March’)

  • CURRENT_MONTH_NAME_SHORT - 3-letter abbreviated month name (ex. ‘Mar’)

  • CURRENT_DATE - Day of the month

  • CURRENT_DAY_NAME - Name of day (example ‘Monday’)

  • CURRENT_DAY_NAME_SHORT - Short name of the day (example ‘Mon’)

  • CURRENT_HOUR - Current hour in 24-hour clock format

  • CURRENT_MINUTE - Current minute

  • CURRENT_SECOND - Current second

  • CURRENT_SECONDS_UNIX - Number of seconds since the Unix epoch

  • BLOCK_COMMENT_START - Example: <!-- in HTML, /* in JavaScript, PHP, etc.

  • BLOCK_COMMENT_END - Example: --> in HTML, */ in JavaScript, PHP, etc.

  • LINE_COMMENT - Example: // in JavaScript, PHP, etc.

Block comment example:

The following in global.code-snippets will insert a block comment in any language. It will insert <!-- | --> in HTML and /* | */ in JavaScript, PHP, etc. when you type cc. The $1 will place the cursor in the center when you press tab.

{
	"Block Comment": {
		"prefix": "cc",
		"body": [
			"$BLOCK_COMMENT_START $1 $BLOCK_COMMENT_END"
		]
	}
}

Date and time example:

The following in will insert the current date as YYYY-MM-DD. You can write the date in many different formats using a combination of variables from above.

{
	"Date": {
		"prefix": "date",
		"body": [
			"$CURRENT_YEAR-$CURRENT_MONTH-$CURRENT_DATE"
		]
	}
}

Conclusion

Code snippets are a great way to type code faster and more productively. There is a great feeling to be able to access the code you want in less than a second. No more need to search through your old files to get the things you need!

I hope you learned something!

If you want to learn more coding tricks, subscribe to my channel!

Thanks for reading / watching!

#productivity #vscode #coding #programming #snippets #customization

Destiny Volkman

Destiny Volkman

1598724000

How we created a GitLab Workflow Extension for VS Code

The people who work at GitLab are encouraged to build the things they want and need, which helps us expand the ways we work with our growing product. We’re thrilled to announce that we’ve created an official GitLab Workflow Extension for VS Code.

How did we get here?

More than two years ago, Fatih Acet, a former senior frontend engineer, Plan, started working on a VS Code extension to allow users to interact with GitLab from within their code editor. At GitLab, everything starts with a Merge Request, which is exactly how Fatih started building the extension. Fatih, along with more than 25 contributors, continued to expand on the extension by adding new features. The extension has been installed more than 160,000 times.

It’s been remarkable to see the way the community collaborated to build the extension, making it a tool that is valuable to their work. The GitLab Workflow Extension is the perfect case study of how developers can create meaningful work at this company.

When Fatih decided to move on from GitLab in March 2020, we had an opportunity to take over the GitLab Workflow Extension, turning it into a tool GitLab would officially maintain and support. We jumped at the opportunity to maintain an auxilary project outside of the main GitLab project. As we continue to move fast and create the best experiences possible for our users, we expect this extension to become a key component of our strategy.

How to use the extension

If you want to start using the extension, you can install it from within VS Code directly by searching for GitLab Workflow which is now published through an official GitLab account.

If you were already using the extension, it automatically updated to the GitLab publisher, and you might have already seen a few updates coming in.

What improvements have we made?

When we took over the extension, we worked with other teams across GitLab to immediately perform an application security review. Along the way, we made sure to create a security release-process. We did this to ensure that users were safe to continue using the extension and so that we could fix any problems that surface. We also worked through some automation to help with publishing the extension and begin to lay a foundation for future testing.

We also shipped version 3.0.0 which was spearheaded by our community and helped to resolve some long-standing bugs and issues. The extension has come a long way in just a few short weeks. We’re excited by the progress we’re making and the engagement we’re continuing to see, but there is still a lot that needs to be done.

What’s next?

Nothing in software development is perfect, and so we are aware of the shortcomings of the extension, some inconsistencies, and some long open feature requests. You can see our many to-dos on our GitLab Workflow Extension issues list. For now, we’re focused on triaging the existing issues and capturing any new bugs. You should see much more involvement from our Create: Editor team as we continue these efforts, and we’re looking forward to engaging with the community on these items.

We’re also evaluating the best path forward for maintaining the extension, by focusing on the test-suite and code-quality, so we won’t break things by accident. You can join us in our discussion on this issue. While this might slow down some new feature releases in the short-term, we’re confident these are the right long-term decisions to ensure you have an extension you can trust, so you can make the GitLab Extension an integral part of your workflow.

Everyone can contribute

The extension is open source, and we’re improving the “How to Contribute” guides alongside some other documentation. We want to have a space where everyone can contribute and make this extension better for all of us.

#visual studio code #code #vs code