vscode.extension.usefulPanel

USEFUL PANEL | Ready(98.12%)

Firstly, it was the tool-based emergency system designed around the capability API of a VS Code IDE. As maximum and convenient, flexible, super-fast Extreme programming (XP) platform was aimed at the create more features, methods, and capabilities for emergency cases arising from sudden bugs out of new updates, rules, changes, .etc. Allowing programmers to design temporary or permanent solution in no-time.

Attention! This extension uses the weak or still development, documented background features of NodeJS, and can cause additional unforeseen and unpredictable issues.

! If you are not sure what you do, don't use it and thus strictly recommend it for only personal use!

Visual Studio Code USEFUL PANEL

Yes, I’m using it for a long time, in spite of their “you can’t use the entire XP framework in many situations”, And I’m used to it now. You right, it shouldn’t stop you from using as many of the practices as possible given your context.

Visual Studio Code USEFUL PANEL Adds a panel for accessing frequently used files, Internet addresses, programs, commands, snippets. Beefed up by "Webpack Config" like behavior configure module.

This is derived work based on Favorites Panel by Sabitov Vladimir. Extended with our development kit for specific extreme urgency cases.

The integrated AutoFormat automatically formats a document as you save it and as a result there are no sense for try this !

Auto-config

It’s running only when active “Useful Panel”, triggers automatically when its first starts, or for all time when configuration compiles errors. Always triggers automatically on save and it is automatically enabled or can’t be disabled.

Source navigation

The specific links on the panel allow you easily navigate to the line which describes its arguments parameter. Set the {_nav:1}, to generate a default sample when the document will be saved.

Extension Settings

The extension will initial demo configuration if none in .vscode/.favoritesSideBar.js.

() => {
    const howTo = {
        ...
    }
    "favoritesSideBar": {
        commands ": [ {
        ...
    }
]
}
}

List of available icons

Environment

Sandbox environment-variables. Includes:

{
    require,
    _, // lodash
    vscode,
    env.name // extension name
    env.workspaceFolder // project root directory
    env.сontext // vscode.ExtensionContext
    env.prettier // integrated AutoFormat configuration
}
// env.prettier.semi = false
// env.prettier["singleQuote"] = true

Default config generate:

• $$$masterScript$$$ - ✨bonus✨ generate master script, outside commands block samples, for general config body of code.
• {_nav:1}, or {_nav:<whatever>}, - generate navigation default sample.
• {help:1}, or {help:<whatever>}, - generate generate “HOW TO” commands branch.
• {end:1}, or {end:<whatever>}, - generate “config” end “about” commands.

Features (basic)

• Quick access to your favorite files
• Quick access to favorite URLs
• Fast launch of applications
• Quick access to your favorite files
• Quick access to favorite commands
• Setting icons for commands

Go to Definition for Includes

Easy navigate between your files references via the different !include… tags using ‘f12’ / ‘Go to Definition’.

Editing code

{
    "label": "lowercase ➜ UPPER CASE",
    "description": "",
    "icon": "debug-step-out",
    "command": "runCommand",
    "arguments": [
        "editor.action.transformToUppercase"
    ]
}

Opening file

File in project

Settings for opening file in project

{
    "label": "README",
    "description": "- read me",
    "command": "openFile",
    "arguments": ["README.MD"]
}

File is out project

Settings for opening file in project

{
    "label": "Hosts",
    "description": "Windows hosts file",
    "command": "openFile",
    "arguments": ["C:\\Windows\\System32\\drivers\\etc\\hosts", "external"]
}

Open Search panel

command: workbench.action.findInFiles

arguments:

• query?: string;
• isRegex?: boolean;
• triggerSearch?: boolean;
• filesToInclude?: string;
• filesToExclude?: string;
• isCaseSensitive?: boolean;

{
  "label": "Find in files",
  "description": "",
  "command": "runCommand",
  "arguments": ["workbench.action.findInFiles", {"query": "SearchPattern", "triggerSearch": true}],
},

Insert text

Search and insert text by regexp pattern. Searches until the first match.

{
  "label": "Replace",
  "description": "",
  "icon": "find-replace",
  "command": "insertNewCode",
  "arguments": ["ui/components/tableItem.ts", "<td className=\"col-date-time\">", "<div className=\"new\">NewText</div>", "before"],
}

Replace text

Search and replace text by regexp pattern. Searches until the first match.

{
  "label": "Replace",
  "description": "",
  "icon": "find-replace",
  "command": "insertNewCode",
  "arguments": ["ui/components/tableItem.ts", "<td className=\"col-date-time\">", "<div className=\"WOW\"></div>", "replace"]
}

Replace All text

Search and replace text by regexp pattern. Searches all match.

{
  "label": "ReplaceAll",
  "description": "",
  "icon": "find-replace",
  "command": "insertNewCode",
  "arguments": ["ui/components/tableItem.ts", "<td className=\"col-date-time\">", "<div className=\"WOW\"></div>", "replaceALL"]
}

Features (Extended)

• Extend (runCommand)
• toLineConfigNavigate - string, line number, RegExp
• setTimeout_worker - basic setTimeout on “in-thread mechanism” for “smart” delaying work.
• onSave - inject feature in to onSave handle of VSCode core
• jumpTo - part of inner navigation system to navigate in your code, moving between commands positions easily and quickly.

Extend (runCommand):

• cmd - basic, lines, parameter switches
• node - eval, script
• terminal - scripts, text, environment-variables
• sel - mutate selection string

(runCommand) Samples:

☰

• basic

{
    label: "CMD",
    description: "1",
    icon: "play",
    command: "runCommand",
    arguments: [
        "cmd",
        `
"C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe"
--user-data-dir="D:\\sets\\Chrome\\plnx.acc"
https://observablehq.com/@observablehq/a-taste-of-observable?collection=@observablehq/overview
            `,
    ],
}

☰

• with line arguments

{
    id: "ID is needed only for [label,description] identify collision issues!",
    label: "CMD",
    description: "2",
    icon: "play",
    command: "runCommand",
    arguments: [
        "cmd",
        '"C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe"',
        '--user-data-dir="D:\\sets\\Chrome\\plnx.acc"',
        "https://observablehq.com/@observablehq/a-taste-of-observable?collection=@observablehq/overview",
    ],
}

☰

• with parameter switches list silent

{
    label: "CMD",
    description: "3: list,git ...",
    icon: "github",
    command: "runCommand",
    arguments: [
        "cmd",
        "list silent",
        `
                cd /D "D:\\<your git directory>"

                git config user.email "<your git email>"
                git config user.name "<your git name>"

                git config core.autocrlf true

                git checkout -b main

                git remote rm origin
                git remote add origin https://<your git name>:<your git password>@github.com/<your git name>/<your git repo>.git

                git rm -r --cached <repo force forder for delete> -f

                git add ./

                git commit -m "main ✨ HOW TO commit"
                git push origin main -u -f
`,
    ],
}

Run NodeJS

☰

• eval

{
    label: "node",
    description: "2: server",

    icon: "beaker",
    command: "runCommand",
    arguments: [
        "node",
        "-e",
        `
                      var http = require('http'),
                         // open = require('open'),
                          server;
                      server = http.createServer(function (req, res) {
                                res.writeHead(200, {'Content-Type': 'text/plain'});
                                res.end('Hello World\\n');
                              });
                      server.listen(1337, '127.0.0.1',function(){
                          // console.log('Launching the browser on http://127.0.0.1:1337!');
                          // open('http://127.0.0.1:1337');
                      });
`,
    ],
}

☰

• or script

{
    label: "node",
    description: "1: error no module",
    icon: "beaker",
    command: "runCommand",
    arguments: [
        "node",
        "./node_modules/prettier/bin-prettier",
        "./<your>.js",
        "--write",
    ],
}

Run in Terminal

☰

• package.json scripts

{
    label: "dev:spa",
    description: "",
    icon: "chevron-right",
    command: "runCommand",
    arguments: ["terminal", "quasar dev -m spa"],
}

☰

• plain text

{
    label: "TERMINAL",
    description: "1: block",
    icon: "terminal",
    command: "runCommand",
    arguments: [
        "terminal",
        `
                            "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe"
                            --user-data-dir="D:\\sets\\Chrome\\plnx.acc"
                            https://observablehq.com/@observablehq/a-taste-of-observable?collection=@observablehq/overview
                        `,
    ],
}

☰

• lines with environment-variables

{
    label: "TERMINAL",
    description: "2: lines params",
    icon: "terminal",
    command: "runCommand",
    arguments: [
        "terminal",
        "cls",
        'echo "Hello terminal world"',
        `node -e "console.log('%chello %s','color:yellow', 'node','prettier : ${howTo.prettier()}');"`,
        `echo "Hello extension сontext" && echo "${howTo.сontext()}"`,
        `echo "Hello code.exe" && code -v`,
        `echo "Hello vscode" && echo "${howTo.vscode.version}"`,
    ],
}

sel

☰

• manipulate selected string

  {
      label: "camelCase",
      description: "",
      icon: "ellipsis",
      command: "runCommand",
      arguments: ["sel", (_sel) => _.camelCase(_sel)],
  }

toLineConfigNavigate:

☰

• string

{
    label: "cmd",
    description: "",
    icon: "arrow-small-right",
    command: "toLineConfigNavigate",
    arguments: [
        '"C:\\Program Files (x86)\\Google\\Chrome\\',
    ],
}

☰

• line number

{
    label: "How To",
    description: "",
    icon: "arrow-small-right",
    command: "toLineConfigNavigate",
    arguments: [
        497,
    ],
}

☰

• RegExp

{
    label: "Commands",
    description: "",
    icon: "arrow-small-right",
    command: "toLineConfigNavigate",
    arguments: [
        / return \{[\w\W]*commands: \[/i
    ],
}

☰

setTimeout_worker:

/**
 * @example
​

setTimeoutWorker( 0 // it kill all Workers by timeoutId , (…args) => { args[0].cb = (opt, next) => {

print([opt])
next()

} }) ​

 */
const setTimeoutWorker = (
  intervalMin,
  _next
) => {
  if (
    typeof intervalMin === "function"
  ) {
    _next = intervalMin
    intervalMin = 0.1
  }
  const timeoutId = "308"
  if (typeof _next === "function") {
    vscode.commands
      .executeCommand(
        `${env.name}.setTimeout_worker`,
        timeoutId,
        intervalMin
      )
      .then((_tick) => {
        _next(_tick)
        // print([_tick])
      })
      .catch((err) => { })
  } else if (!intervalMin) {
    vscode.commands
      .executeCommand(
        `${env.name}.setTimeout_worker`,
        timeoutId,
        intervalMin
      )
      .then((_tick) => {
        // print([_tick])
      })
      .catch((err) => { })
  }
}

☰

onSave:

vscode.commands.executeCommand(
    `${env.name}.onSave`,
    ["${workspaceFolder}/README.md"],
    /*  
      (f,  cmd, 
        ed:{
          txt: string,
          replace: (txt: string, before?: Function | undefined, after?: Function | undefined): void
        },
         errors{
            add(error: string): void,
            show(): void
         }, 
         tm: (): string, 
         print: (_v: any): void 
      ) =>void 
    */
    (f, cmd) => {
        tryFn(() => {
            const path = require("path")

            const pathFrom = (_s) => {
                var p = _s
                    .trim()
                    .split(
                        /^\$\{workspaceFolder\}/i
                    )
                if (p.length > 1) {
                    p = [
                        env.workspaceFolder,
                        ...p.slice(1),
                    ]
                }
                return path.join(
                    p
                    .join("")
                    .split(/[\\/]/gi)
                    .join("/")
                )
            }

            // print([pathFrom("D:\\sites\\GitHub\\git-user\\repo\\README.md"),pathFrom("${workSpacefolder}\\README.md")])
            // utils.print([f,`${env.workspaceFolder}\\README.md`,"D:\\sites\\GitHub\\git-user\\README.md"])

            const workspaceFolder =
                env.workspaceFolder
            const dest = pathFrom(
                "<repo local forder>"
            )

            cmd([
                "cmd",
                "list silent-off",
                `
          COPY /Y "${workspaceFolder}\\README.md" "${path.join(
          dest,
          "README.md"
        )}"
  
          cd /D "${dest}"
          
          git config user.email "<your git email>"
          git config user.name "<your git name>"
  
          git config core.autocrlf true
          
          git checkout -b main
          
          git remote rm origin
          git remote add origin https://<your git name>:<your Personal access token>@github.com/<your git name>/<your git repo>.git
          
          git rm -r --cached <repo force forder for delete> -f
  
          git add ./
          
          git commit -m "main ✨ commit on Save"
          git push origin main -u -f
  
           `,
            ])
        })
    }
)

☰

jumpTo:

vscode.commands.executeCommand(`${env.name}.jumpTo`, (ti: TreeItem) => {})

Donations

To support this project, you can make a donation to its current maintainer:

Release Notes | Ready(98.12%)

0.0.1 | 2021/06/22

• Added support for jumpTo.
• Added the ability to move plugin settings into custom files.

More information in the changelog