VSCode extension for wrap

[50Bytes-dev]

Is there anyone here who can make or suggest how to make an extension for VSCode that will allow you to wrap controls in other controls as in Flutter?
A lot of time is wasted on such simple actions.

Example:

import flet as ft

ft.Container(
    content=ft.Text("Example text")
)

Right click on ft.Container select wrap with widget etc.
After complete wrap:

ft.View(
    controls=[
        ft.Container(
            content=ft.Text("Example text")
        )
    ]
)

Flutter example:

[FeodorFitsner]

I've asked Copilot:

can you write a VS Code extension that allows wrapping selected python code with a class, similar to what Flutter's extension does in "Wrap with widget..." on right-click?

Response:

Certainly! Creating a Visual Studio Code (VS Code) extension to wrap selected Python code with a class is a useful idea. While I can't directly create an extension for you, I can guide you on how to achieve this. Here are some steps you can follow:

1. Create a New VS Code Extension:

   • First, create a new extension project in VS Code using the Yeoman extension generator. You can install the generator by running:

     npm install -g yo generator-code
     

   • Then, generate a new extension project:

     yo code
     

   • Choose the "New Extension (TypeScript)" option.

2. Define a Command:

   • In your extension's package.json, define a new command that will wrap selected code with a class. For example:

     "commands": [
         {
             "command": "extension.wrapWithClass",
             "title": "Wrap with Class"
         }
     ]

3. Implement the Command:

   • In your extension's TypeScript code, handle the extension.wrapWithClass command.
   • Retrieve the selected code from the editor using vscode.window.activeTextEditor.selection.
   • Show an input dialog to get the class name from the user.
   • Wrap the selected code with a class definition using the provided class name.

4. Insert the Wrapped Code:

   • Replace the selected code in the editor with the wrapped class code.

5. Keybindings:

   • Optionally, define a keybinding for your command in keybindings.json.

6. Testing and Publishing:

   • Test your extension by running it in a new VS Code window.
   • Once satisfied, package and publish your extension to the Visual Studio Code Marketplace.

7. Python Language Support:

   • Ensure that your extension works specifically for Python files.
   • You can use the Python extension's API to interact with Python code.

While there isn't an existing extension that directly wraps Python code with a class, you can explore existing extensions like the "Python Try-Except Wrapper", which allows wrapping selected Python code in a try-except block². You can use this as a reference or inspiration for your custom class-wrapping extension.

Remember to adapt the steps above to your specific requirements, and feel free to get creative with your extension! 🚀

Source: Conversation with Bing, 2024-04-04
(1) Python Try-Except Wrapper - Visual Studio Marketplace. https://marketplace.visualstudio.com/items?itemName=HarshaSurampudi.python-try-except-wrapper.
(2) How can I wrap selected code with a copied or pre-determined function .... https://stackoverflow.com/questions/77627217/how-can-i-wrap-selected-code-with-a-copied-or-pre-determined-function-in-visual.
(3) visual studio code - How can i wrap a selected text in custom comments .... https://stackoverflow.com/questions/77925686/how-can-i-wrap-a-selected-text-in-custom-comments-in-vscode.
(4) Get Started Tutorial for Python in Visual Studio Code. https://code.visualstudio.com/docs/python/python-tutorial?ref=8vi.cat.

[FeodorFitsner]

I didn't find a repo for "python try-except wrapper" extension, but you can download vsix from here: https://marketplace.visualstudio.com/items?itemName=HarshaSurampudi.python-try-except-wrapper and unpack it to see the sources. There is compiled .ts inside.

[FeodorFitsner]

The code interesting to us:

        const editor = vscode.window.activeTextEditor;
        if (editor) {
            const selection = editor.selection;
            const selectedText = editor.document.getText(selection);
            // Find existing indentation
            const firstLine = editor.document.lineAt(selection.start.line);
            const existingIndent = firstLine.text.substring(0, firstLine.firstNonWhitespaceCharacterIndex);
            // Apply indentation to the try-except block
            const indentedText = selectedText
                .split("\n")
                .map((line) => `\t${line}`)
                .join("\n");
            const wrappedText = `${existingIndent}try:\n${indentedText}\n${existingIndent}catch Exception as e:\n${existingIndent}\tprint(e)`;
            editor.edit((editBuilder) => {
                editBuilder.replace(selection, wrappedText);
            });
        }

[FeodorFitsner]

Do not forget to share the extension with us, Flet users 🥹

[50Bytes-dev]

https://github.com/50Bytes-dev/vscode-flet-wrap