User Snippets are user-defined code snippets, snippets that are frequently used during development. You don’t want to repeatedly write the same code snippets again and again. That is where user snippets come in handy. It speeds up your development time and effort. User Snippets feature is available on almost every modern text editor such as Sublime Text, VS Code, etc.

In WordPress, we often write repetitive codes during plugin/theme development. We should make use of this powerful feature of text editors to automate these snippets. I’m writing some of the snippets I configure in VS Code while developing plugins. Before, we start here’s the tutorial on configuring User Snippets on VS Code. I’m writing with the VS Code syntax but the snippets are applicable to all the editors.

1) Init and Admin Init.

We write “init” and “admin_init” hooks so often during theme/plugin development. Statistically, WooCommerce uses the init hook 39 times and admin_init hook 31 times in their codebase as per WooCommerce version 6.8.2.

{
	"inithook" : {
		"scope": "php",
		"prefix": "inithook",
		"body": [
			"add_action( 'init', array( $$this, '$1' ), 10 );"
		],
	}
}

So, now instead of writing add_action( 'init', ... all the time, you just write inithook and hit enter. The cursor will stand on $1 for you to write the callback function name. Adjust the body in the above JSON per your coding preferences. Now you see you can create the code snippets to any hook you use the most.

2) Translators placeholder comment

If we write the gettext functions such as sprintf, printf containing placeholder, we should write the comments clarifying the meaning of the placeholder. For example:

/* translators: %d - Plugin Version */
printf( 'Plugin %d is availabe', $version );

If you follow WordPress Coding Standards, you’re probably familiar with the warning if you don’t write comments for the placeholders.

 108 | ERROR | [ ] A gettext call containing placeholders was found, but was not accompanied by a
     |       |     "translators:" comment on the line above to clarify the meaning of the
     |       |     placeholders. (WordPress.WP.I18n.MissingTranslatorsComment)

So, instead of writing this every time, we simply write the snippet. So, we can just hit translators and enter

{
	"translators" : {
		"scope": "php",
		"prefix": "translators",
		"body": [
			"/* translators: %s - $1 */"
		],
	}
}

3) Ignore Output Not Escaped Coding Standard

All output should usually run through an escaping function. For example:

$text  = $_POST['text'];
echo esc_html( $text );

In some cases, we may not need to escape the output. For example:

$text = 'The cold never bothered me anyway.';
echo $text;

However, the WordPress coding standard still throws an error for the above code and we usually ignore the rule by adding the comment:

echo $text; //phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped

Let’s create a snippet for this instead of repeatedly writing this comment:

{
	"ignoreescaping" : {
		"scope": "php",
		"prefix": "ignoreescaping",
		"body": [
			"//phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped"
		],
	}
}

4) print_r

print_r() is a built-in PHP function. However, I usually use it along with the <pre> tag to make the printed output much more readable. The user snippet would be:

{
	"preprintr" : {
		"scope": "php",
		"prefix": "preprintr",
		"body": [
			"echo '<pre>'; print_r( $0 ); echo '</pre>';"
		],
	}
}

5) error_log

Another similar debugging function in PHP is error_log() which logs the output to a file. By the way, you can also log PHP data in the JavaScript console. Using error_log() along with print_r() makes the output much more readable. The user snippet for this:

{
	"errorlog" : {
		"scope": "php",
		"prefix": "errorlog",
		"body": [
			"error_log( print_r( $0, true ) );"
		],
	}
}

6) Ignore Cyclomatic Complexity Rule

I tend to follow the cyclomatic complexity rule because it helps to write simpler and more readable codes. However, in some cases, it’s not possible to follow this ruleset. To ignore this ruleset, we write the comment:

// phpcs:ignore Generic.Metrics.CyclomaticComplexity.TooHigh

Up to this point, you could guess and write the user snippet on your own. However, I’ll also just write it down.

{
	"ignorecyclomaticcomplexitytoohigh" : {
		"scope": "php",
		"prefix": "ignorecyclomaticcomplexitytoohigh",
		"body": [
			"//phpcs:ignore Generic.Metrics.CyclomaticComplexity.TooHigh"
		],
	}
}

I hope you found this helpful! If you tend to write any other repetitive codes, let me know. 🙂

VS Code User Snippets To Create For WordPress Development
Tagged on:

Sanjeev Aryal

Don't bury your thoughts, put your vision into reality ~ Bob Marley.

Leave a Reply

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

× WhatsApp