Programmierschmiede VSCode Extensions

For more info on how to create an extension-pack... see toc.

Table of contents

• Programmierschmiede VSCode Extensions
  • Table of contents
• Overview
  • Settings
  • Build Visual Code Extensionpack
    • Requirements
    • Docker usage
    • Manual usage
      • Extension Package generation
      • Publishing
  • Extensions
    • Windows + Notepad++
    • Linux + VSCode

Overview

Settings

For better experience, use the following setting or change them as you need.

    "todo-tree.filtering.includeGlobs": [
        "**/*.php",
        "**/README.md"
    ],
    "todohighlight.include": [
        "**/*.js",
        "**/*.jsx",
        "**/*.ts",
        "**/*.tsx",
        "**/*.html",
        "**/*.php",
        "**/*.css",
        "**/*.scss",
        "**/*.md"
    ],
    "todohighlight.isEnable": true,
    "todohighlight.defaultStyle": {
        "color": "#eee",
        "backgroundColor": "#00000000",
        "cursor": "pointer",
        "border": "1px solid #eee",
        "borderRadius": "3px",
        "isWholeLine": false,
        "letterSpacing": "3px",
        "overviewRulerColor": "rgba(0,0,0,0)",
    },
    "todohighlight.keywords": [{
            "text": " REVIEW:",
            "color": "rgba(0,180,256,1)",
            "backgroundColor": "rgba(0,180,256,0.1)",
            "borderColor": "rgba(0,180,256,0.5)",
        },
        {
            "text": " DEBUG:",
            "color": "rgba(250,250,0,1)",
            "backgroundColor": "rgba(250,250,0,0.1)",
            "borderColor": "rgba(250,250,0,0.5)",
            "borderStyle": "dotted"
        },
        {
            "text": " BUG:",
            "color": "rgba(250,250,0,1)",
            "backgroundColor": "rgba(250,250,0,0.1)",
            "borderColor": "rgba(250,250,0,0.5)",
            "borderStyle": "dotted"
        },
        {
            "text": " NOTE:",
            "borderRadius": "0px",
            "borderWidth": "1px",
            "borderSpacing": "2px",
            "backgroundColor": "#99999920",
            "borderColor": "#999",
            "borderStyle": "dashed none "
        },
        {
            "text": "FIXME:",
            "borderRadius": "0px",
            "borderWidth": "1px 0",
            "color": "rgba(256,0,0,1)",
            "borderColor": "rgba(256,0,0,0.4)",
            "backgroundColor": "rgba(256,0,0,0.2)",
            "isWholeLine": true,
        },
        {
            "text": " TODO:",
            "color": "rgba(256,170,0,1)",
            "backgroundColor": "rgba(256,170,0,0.1)",
            "borderColor": "rgba(256,170,0,0.5)",
        },
        {
            "text": " DONE:",
            "color": "rgba(0,256,0,1)",
            "backgroundColor": "rgba(0,256,0,0.1)",
            "borderColor": "rgba(0,256,0,0.5)",
        }
    ],
    // Todo - Tree
    "todo-tree.filtering.excludeGlobs": [
        "**/*.md"
    ],
    "todo-tree.tree.grouped": true,
    "todo-tree.tree.trackFile": true,
    "todo-tree.tree.labelFormat": "${filename} ${line}: ${after}",
    "todo-tree.tree.hideIconsWhenGroupedByTag": false,
    "todo-tree.tree.showCountsInTree": true,
    "todo-tree.highlights.enabled": true,
    "todo-tree.general.tagGroups": {
        "BUG": [
            "BUG",
            "DEBUG"
        ]
    },
    "todo-tree.general.tags": [
        "BUG",
        "FIXME",
        "TODO",
        "NOTE",
        "REVIEW",
        "DEBUG",
        "DONE"
    ],
    "todo-tree.highlights.defaultHighlight": {
        "background": "#000",
        "opacity": 0,
        "gutterIcon": true,
    },
    "todo-tree.highlights.customHighlight": {
        "BUG": {
            "icon": "bug",
            "iconColour": "yellow"
        },
        "DEBUG": {
            "icon": "flame",
            "iconColour": "red"
        },
        "FIXME": {
            "icon": "flame",
            "iconColour": "red"
        },
        "TODO": {
            "icon": "checklist",
            "iconColour": "orange"
        },
        "NOTE": {
            "icon": "note",
            "iconColour": "grey"
        },
        "REVIEW": {
            "icon": "pulse",
            "iconColour": "blue"
        },
        "DONE": {
            "icon": "check",
            "iconColour": "green"
        },
    },

Build Visual Code Extensionpack

Requirements

#Install Yoeman
npm install -g yo 
# Install generator code
npm install -g generator-code
# Install Viscual Code Extensions (not if you use docker) 
# npm install -g vsce
# Generate what you need (e.g Extension Pack)
yo code

Docker usage

After editing your package.json and README.md run

# Build docker image
DOCKER_BUILDKIT=1 docker build --tag vsce "https://github.com/microsoft/vscode-vsce.git#main"
# Run test
docker run --rm -it vsce --version

# Package and publish
cd <PROJECT-DIR>
docker run --rm -it -v "$(pwd)":/workspace vsce package && vsce publish

Manual usage

Extension Package generation

After installing requirements and editing your package.json and README.md run

vsce package

to generate the extension in .vsix file format.

Publishing

Simply run

vsce publish

to publish the package to Visual Studio Code Extensions.

Extensions

(.+?)\r\n(.+?)\r\n(.+?)\r\n(.+?)\r\n(.+?)\r\n(.+?)\r\n

|${1}|${2}<br>${3}<br>${4}<br>${5}<br>${6}|

Name: (.+?)\n(.+?)\n(.+?)\n(.+?)\n(.+?)\n(.+?)\n

|$1|$2<br>$3<br>$4<br>$5<br>$6|

⏫ to the top