Javascript, React, VSCode and Snippets

Since files with the extensions .js, .jsx are seen as two different languages in VSCode, you will need to declare each snippet you want to use across these files twice. But there is a way to bypass this.

Bypassing needing to declare each snippet twice

There is not a lot you need to do to bypass this. Do the following in VSCode:

1. Press CMD+SHIFT+P

2. Enter "configure user snippets"

3. Press ENTER

4. Arrow down to the item "New global snippets file..."

5. This is the file that will hold your snippets. Give the file any name you want. Mine is called js.code-snippets.

Now that you have the snippets file open, you can start adding snippets. The anatomy of a snippet is as follows:

Javascriptjavascript
{
	"KEY (can be anything)": {
		"scope": "LANGUAGES THE SNIPPET IS AVAILABLE FOR",
		"prefix": "THE TEXT YOU NEED TO ENTER FOR THE SNIPPET TO APPEAR",
		"body": [
			"THE SNIPPET"
		],
		"description": "DESCRIPTION OF THE SNIPPET THAT WILL APPEAR WHEN YOU ENTER THE PREFIX"
	}
}

The field that lets you only declare the snippet once is the scope field. This field takes a comma-separated string.

• "scope": "javascript" - if you want the snippet to only be available in .js files

• "scope": "javascriptreact" - if you want the snippet to only be available in .jsx files

• "scope": "javascript, javascriptreact" - if you want the snippet to be available in both .js and .jsx files.

And that should be all you need to know! You can read more about snippets in VSCode here.

Down below you will find some examples of snippets that I use a lot.

Javascript{
	// General
	"Import default": {
		"scope": "javascript,javascriptreact",
		"prefix": "_id",
		"body": [
			"import $2 from \"$1\""
		],
		"description": "Default es6 import"
	},
	"Import export": {
		"scope": "javascript,javascriptreact",
		"prefix": "_ie",
		"body": [
			"import { $2 } from \"$1\""
		],
		"description": "Import exported item"
	},
	"Export default": {
		"scope": "javascript,javascriptreact",
		"prefix": "_ed",
		"body": [
			"export default $1;"
		],
	},
	"Arrow function": {
		"scope": "javascript,javascriptreact",
		"prefix": "_=>",
		"body": [
			"const $1 = () => {",
			"  return (",
			"    <div>",
			"      <div></div>",
			"    </div>",
			"  );",
			"};"
		]
	},
	"Export Arrow function": {
		"scope": "javascript,javascriptreact",
		"prefix": "_e=>",
		"body": [
			"export const $1 = () => {",
			"  return (",
			"    <div>",
			"      <div></div>",
			"    </div>",
			"  );",
			"};"
		]
	},
	// React
	"React.useEffect": {
		"scope": "javascriptreact",
		"prefix": "_useeffect",
		"body": [
			"React.useEffect(() => {",
			"  $1",
			"}, [$2])$3"
		]
	}
}

Thank you for reading!