# Will the code be organized as this is done in Arduino IDE? VS Code extension

**URL:** <https://discourse.processing.org/t/will-the-code-be-organized-as-this-is-done-in-arduino-ide-vs-code-extension/47135>\
**Category:** Development\
**Created:** [September 12, 2025, 2:24pm UTC](https://discourse.processing.org/t/will-the-code-be-organized-as-this-is-done-in-arduino-ide-vs-code-extension/47135 "2025-09-12T14:24:11Z")\
**Posts on this page:** 14\
**Page:** 3

<div class="post-metadata">

**Author:** ![Aigars](https://avatars.discourse-cdn.com/v4/letter/a/47e85d/32.png) [@Aigars](https://discourse.processing.org/u/Aigars)\
**Post date:** [September 23, 2025, 2:04pm UTC](https://discourse.processing.org/t/will-the-code-be-organized-as-this-is-done-in-arduino-ide-vs-code-extension/47135/42 "2025-09-23T14:04:05Z")

</div>

debugger in VS Code does not work?

---

<div class="post-metadata">

**Author:** ![sableraph](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/sableraph/32/251_2.png) [@sableraph](https://discourse.processing.org/u/sableraph)\
**Post date:** [September 23, 2025, 2:16pm UTC](https://discourse.processing.org/t/will-the-code-be-organized-as-this-is-done-in-arduino-ide-vs-code-extension/47135/43 "2025-09-23T14:16:23Z")

</div>

That’s right. Debugger support isn’t available in the VS Code extension yet. It may require quite a bit of work to implement. You can read more about it here:

> <https://github.com/processing/processing-vscode-extension/issues/31>
>
> I will collect some of the required steps to add debugger support to the extensi…on
> 
> https://code.visualstudio.com/api/extension-guides/debugger-extension
> 
> https://docs.oracle.com/javase/8/docs/jdk/api/jpda/jdi/
> 
> https://github.com/microsoft/vscode-java-debug
> 
> Probably the architecture should be VS Code -\> Processing Debugger Proxy (Preprocessing) -\> Java Debugger (Either VSCode native or a Java based implementation)

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [September 23, 2025, 7:11pm UTC](https://discourse.processing.org/t/will-the-code-be-organized-as-this-is-done-in-arduino-ide-vs-code-extension/47135/44 "2025-09-23T19:11:30Z")

</div>

> [@Aigars](#):
>
> I use that too. But you cannot add tabs to processing ide indefinitely. If the number of tabs exceeds the limits of the working program, the tab names disappear.

- The names disappear, but when you click on an “empty” tab, it shows again
- There is a drop-down-list with ALL tabs on the right
- You can sort the tabs: first come CapitalTitles, then smallTitles  
I use e.g. Inits, InputKeys, InputsMouse, Tools, cl0ClassX, cl1ClassY, cl2ClassZ…..

---

<div class="post-metadata">

**Author:** ![Aigars](https://avatars.discourse-cdn.com/v4/letter/a/47e85d/32.png) [@Aigars](https://discourse.processing.org/u/Aigars)\
**Post date:** [September 24, 2025, 7:57am UTC](https://discourse.processing.org/t/will-the-code-be-organized-as-this-is-done-in-arduino-ide-vs-code-extension/47135/45 "2025-09-24T07:57:08Z")

</div>

**[Chrisir](https://discourse.processing.org/u/chrisir)**

> [@Will the code be organized as this is done in Arduino IDE? VS Code extension](https://discourse.processing.org/t/will-the-code-be-organized-as-this-is-done-in-arduino-ide-vs-code-extension/47135/27):
>
> For example, in the Arduino IDE, if the tabs don’t fit, you can move them with the cursor or mouse wheel. The tab names don’t disappear. You can also rearrange them, which is quite convenient. In the Processing IDE, you have to shorten the tab names to keep the top panel useful. [bandicam 2025-09-19 10-54-03-512]

This has already been mentioned

> [@Will the code be organized as this is done in Arduino IDE? VS Code extension](https://discourse.processing.org/t/will-the-code-be-organized-as-this-is-done-in-arduino-ide-vs-code-extension/47135/29):
>
> I agree that you can use the button to deploy the list of tabs. But this is inconvenient since the user gets used to the top panel during operation.

---

<div class="post-metadata">

**Author:** ![Aigars](https://avatars.discourse-cdn.com/v4/letter/a/47e85d/32.png) [@Aigars](https://discourse.processing.org/u/Aigars)\
**Post date:** [September 26, 2025, 9:56am UTC](https://discourse.processing.org/t/will-the-code-be-organized-as-this-is-done-in-arduino-ide-vs-code-extension/47135/46 "2025-09-26T09:56:42Z")

</div>

Hi all.  
Tell us how to create a new file for “Processing” in a VS code?  
I create a name.pde file. Then I start and see the following message:

 ![Создание нового файла](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/3/2/32fb498482ea229210a19b6c76b8b32aabfd42ea.png)

---

<div class="post-metadata">

**Author:** ![Aigars](https://avatars.discourse-cdn.com/v4/letter/a/47e85d/32.png) [@Aigars](https://discourse.processing.org/u/Aigars)\
**Post date:** [September 26, 2025, 10:39am UTC](https://discourse.processing.org/t/will-the-code-be-organized-as-this-is-done-in-arduino-ide-vs-code-extension/47135/47 "2025-09-26T10:39:38Z")

</div>

Another problem

![bandicam-2025-09-26-13-05-18-787](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/d/a/da79af137b4069b7916622d42d9a15a9ab68a095.gif)

---

<div class="post-metadata">

**Author:** ![stefterv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/stefterv/32/21678_2.png) [@stefterv](https://discourse.processing.org/u/stefterv)\
**Post date:** [September 26, 2025, 11:25am UTC](https://discourse.processing.org/t/will-the-code-be-organized-as-this-is-done-in-arduino-ide-vs-code-extension/47135/48 "2025-09-26T11:25:42Z")

</div>

I don’t have that selector in my clean install @Aigars could that be a separate plugin?

---

<div class="post-metadata">

**Author:** ![sableraph](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/sableraph/32/251_2.png) [@sableraph](https://discourse.processing.org/u/sableraph)\
**Post date:** [September 26, 2025, 11:36am UTC](https://discourse.processing.org/t/will-the-code-be-organized-as-this-is-done-in-arduino-ide-vs-code-extension/47135/50 "2025-09-26T11:36:31Z")

</div>

You can use the icon next to the sketchbook. It appears when you hover over it, or click into the panel.

![Screen Recording 2025-09-26 at 13.30.49](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/e/f/effa3aded8ced65b1a5f4edb1e0761f7fac5fe9a.gif)

---

<div class="post-metadata">

**Author:** ![Aigars](https://avatars.discourse-cdn.com/v4/letter/a/47e85d/32.png) [@Aigars](https://discourse.processing.org/u/Aigars)\
**Post date:** [September 26, 2025, 12:20pm UTC](https://discourse.processing.org/t/will-the-code-be-organized-as-this-is-done-in-arduino-ide-vs-code-extension/47135/51 "2025-09-26T12:20:56Z")

</div>

Stefterv. This is a clean installation

 ![Снимок](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/0/5/0508dffc6d74b8c7fa965083cfce52a86692aa7a.png)

---

<div class="post-metadata">

**Author:** ![Aigars](https://avatars.discourse-cdn.com/v4/letter/a/47e85d/32.png) [@Aigars](https://discourse.processing.org/u/Aigars)\
**Post date:** [September 26, 2025, 12:24pm UTC](https://discourse.processing.org/t/will-the-code-be-organized-as-this-is-done-in-arduino-ide-vs-code-extension/47135/52 "2025-09-26T12:24:24Z")

</div>

Sableraph. Thank you

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [September 26, 2025, 2:02pm UTC](https://discourse.processing.org/t/will-the-code-be-organized-as-this-is-done-in-arduino-ide-vs-code-extension/47135/53 "2025-09-26T14:02:25Z")

</div>

> [@stefterv](#):
>
> I don’t have that selector in my clean install @Aigars could that be a separate plugin?

CTRL SHIFT P and find _Show or Focus Standalone Color Picker_

> [@Aigars](#):
>
> Stefterv. This is a clean installation

I took interest in this because it highlights a cool feature of VS Code!

Is this about the _space_? Please provide more details.

My research and exploration:

- VS Code has a built-in color picker:  
_Show or Focus Standalone Color Picker_

- The color decorator box is invoked by adding a **leading space** :  
` `  
 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/6/1/610828ae8e73c1b2641bde91d7750d719ecc5bba.png)  
` `  
 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/3/8/38e33c56e8941593ae97d4d54ca625d205e5f2b2.png)

- This gives an error when the code is run since you are passing a _String_ but it does demonstrate the color decorator box behavior inside a quote:  
` `  
 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/7/1/7187ca00e4bac9ecbaad3a8b3d30fa718a067f1a.png)

Reference:

> <https://github.com/microsoft/vscode/issues/239446#issuecomment-297592627>
>
> Type: \<b\>Bug\</b\>
> 
> Hex colors no longer show a preview, likely from this change: …https://github.com/microsoft/vscode/pull/233306
> 
> If a string begins with "#" without a leading whitespace, it should be a candidate for color preview. In the following code, rgb values show a preview, hex values do not.
> 
> \`\`\`
> contentPrimary: '#FFFFFF',
> contentSecondary: 'rgba(255, 255, 255, 0.75)',
> contentTertiary: 'rgba(255, 255, 255, 0.62)',
> contentDisabled: 'rgba(255, 255, 255, 0.62)',
> contentError: '#ED4964',
> \`\`\`
> 
> 
> !\[Image\](https://github.com/user-attachments/assets/b6c1b334-d8ea-44c7-b6b5-a6e9722f159f)
> 
> VS Code version: Code 1.96.4 (Universal) (cd4ee3b1c348a13bafd8f9ad8060705f6d4b9cba, 2025-01-16T00:16:19.038Z)
> OS version: Darwin arm64 24.2.0
> Modes:
> 
> \<details\>
> \<summary\>System Info\</summary\>
> 
> 
> |Item|Value|
> |---|---|
> |CPUs|Apple M4 (10 x 2400)|
> |GPU Status|2d\_canvas: enabled\<br\>canvas\_oop\_rasterization: enabled\_on\<br\>direct\_rendering\_display\_compositor: disabled\_off\_ok\<br\>gpu\_compositing: enabled\<br\>multiple\_raster\_threads: enabled\_on\<br\>opengl: enabled\_on\<br\>rasterization: enabled\<br\>raw\_draw: disabled\_off\_ok\<br\>skia\_graphite: disabled\_off\<br\>video\_decode: enabled\<br\>video\_encode: enabled\<br\>webgl: enabled\<br\>webgl2: enabled\<br\>webgpu: enabled\<br\>webnn: disabled\_off|
> |Load (avg)|1, 1, 1|
> |Memory (System)|24.00GB (0.65GB free)|
> |Process Argv|--crash-reporter-id 6d4ed78e-0cd6-432b-b48c-8ea5665c6a2a|
> |Screen Reader|no|
> |VM|0%|
> \</details\>Extensions: none\<details\>
> \<summary\>A/B Experiments\</summary\>
> 
> \`\`\`
> vsliv368cf:30146710
> vspor879:30202332
> vspor708:30202333
> vspor363:30204092
> pythonvspyt551:31179978
> vscod805:30301674
> binariesv615:30325510
> vsaa593:30376534
> py29gd2263:31024239
> c4g48928:30535728
> azure-dev\_surveyone:30548225
> a9j8j154:30646983
> 962ge761:30959799
> pythonnoceb:30805159
> pythonmypyd1:30879173
> h48ei257:31000450
> pythontbext0:30879054
> cppperfnew:31000557
> dwnewjupyter:31046869
> nativerepl2:31139839
> pythonrstrctxt:31112756
> nativeloc2:31192216
> iacca1:31171482
> 5fd0e150:31155592
> dwcopilot:31170013
> stablechunks:31184530
> 6074i472:31201624
> dwoutputs:31217127
> 9064b325:31222308
> copilot\_t\_ci:31222730
> 
> \`\`\`
> 
> \</details\>

Colors appear fine here in the color picker on:

- W10
- Processing 4.4.7
- Processing VS Code 1.1.5

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/4/c/4c821cb95d0f75226c81cb2c9230294597bcf62f.png)

`:-)`

---

<div class="post-metadata">

**Author:** ![Aigars](https://avatars.discourse-cdn.com/v4/letter/a/47e85d/32.png) [@Aigars](https://discourse.processing.org/u/Aigars)\
**Post date:** [September 30, 2025, 3:10pm UTC](https://discourse.processing.org/t/will-the-code-be-organized-as-this-is-done-in-arduino-ide-vs-code-extension/47135/54 "2025-09-30T15:10:49Z")

</div>

Due to the FF prefix (#xxxxxxxff) the color is not true. Example: I choose red, start the program and the blue shines. If you delete the FF “#XXXXXX” prefix, then everything works correctly.

Can I turn off the function in VS CODE that adds FF?

Watch the gif

![bandicam-2025-09-26-13-05-18-787](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/d/a/da79af137b4069b7916622d42d9a15a9ab68a095.gif)

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [September 30, 2025, 4:37pm UTC](https://discourse.processing.org/t/will-the-code-be-organized-as-this-is-done-in-arduino-ide-vs-code-extension/47135/55 "2025-09-30T16:37:12Z")

</div>

Hello @Aigars ,

> [@Aigars](#):
>
> Can I turn off the function in VS CODE that adds FF?

I can’t comment on VS Code extensions or built in features.

You can edit it out manually and this seems to work!

There may be an extension that is better suited for this.  
Please share if you find one that works well.

> [@Aigars](#):
>
> Due to the FF prefix (#xxxxxxxff) the color is not true. Example: I choose red, start the program and the blue shines. If you delete the FF “#XXXXXX” prefix, then everything works correctly.

_ **Good catch!** _ I was focused on the _ **space** _ only in a previous response.

I delete the _ **suffix** _ (the last two) and it works!

Color reference shows what Processing accepts as parameters:

> **[color / Reference](https://processing.org/reference/color_datatype.html)**
>
> Datatype for storing color values. Colors may be assigned with get() and color() or they may be specified directly using hexadecimal notation such as #FFCC00 or 0xFFFFCC00.…

`:)`

---

<div class="post-metadata">

**Author:** ![Aigars](https://avatars.discourse-cdn.com/v4/letter/a/47e85d/32.png) [@Aigars](https://discourse.processing.org/u/Aigars)\
**Post date:** [September 30, 2025, 9:07pm UTC](https://discourse.processing.org/t/will-the-code-be-organized-as-this-is-done-in-arduino-ide-vs-code-extension/47135/56 "2025-09-30T21:07:59Z")

</div>

Hi.  
Yes I delete FF manually too. But it’s distracting (

[Previous page](https://discourse.processing.org/t/will-the-code-be-organized-as-this-is-done-in-arduino-ide-vs-code-extension/47135.md?page=2)