semanticscopes

Use specialized comments to improve workflow by separating code to logical blocks

motivation: have visual anchors for areas of code, to improve organization and block based workflow, blocks can be folded, jumped to, peeked, or even switched around (NYI)

Features

Highlighting regions of code based on comments

Usage

simply create a comment with the following syntax inside (language is independent)

// ✅
// @[Block1]
// your code here
// [Block1]@

// ❌: same name is required for closer comment
// @[Block2]
// [Block3]@

// ✅: you can provide inline overrides, with the same schema as the `theme` setting
// @[Block3] [{ "primary": "red" }]
// your code here
// [Block3]@

Extension Settings

You can configure a preset of style overrides as well as the default theme in the following settings: (⚠ NYI)

{
	"semanticscopes.theme": {
		// default theme configuration
		"primary": "red", //used to color the outline and title background
		"text": "red", // the title text color
		"background": "red", // the background color of the codeblock

		"selected": {
			// these styles will override when a caret is present inside the codeblock
			"primary": "purple",
			"text": "purple",
			"background": "purple"
		}
	},

	"semanticscopes.overrides": [
		{
			"match": {
				"target": "name", // which area of the block to match the regex against, valid: "name" | "firstLine" | "allLines"
				"regex": "jsx" // regex in string format, remember to escape the string correctly
			},
			"primary": "red",
			"text": "red",
			"background": "red",

			"selected": {
				"primary": "purple",
				"text": "purple",
				"background": "purple"
			}
		}
	]
}

Exposed Commands

Toggle Codeblock - semanticscopes.toggleCodeblock

Known Issues

• Some deeply nested blocks may render weird
• Selections look weird when the region has background color
• the left side of the border is sometimes hidden when inside scopes
• toggle codeblock command is finnicky and leaves a bunch of undos in the modification stack