Help with setting up code folding in NetBeans 8.1

  • JavaScript
  • Thread starter aheight
  • Start date
  • Tags
    Code Folding
In summary: TODO supply a...</h1> </body> </html>In summary, the author suggests using SurroundWithCodeFolding to surround a function with a code template in order to improve code readability.
  • #1
aheight
321
109
Hi guys,

I understand there is a way to "fold" the function lines of my HTML/Javascript code into single lines "function" blocks like I can do in notepad++.

I tried setting up code-folding in Netbeans using Tools/Options/Editor/Folding and enabled code folding and restarted Netbeans but it's not working in my code. I'm also familiar with keyboard short cuts:

http://wiki.netbeans.org/KeymapProfileFor60#NetBeans_IDE_6.5_Keyboard_Shortcut_Card

and in that reference it states that Ctrl + "-" should fold a block of code. However, that's not working too.

So I was wondering if I'm not doing something correctly and if someone could help me with this?

Thanks.
 
Technology news on Phys.org
  • #2
There were some known issues in the past with Javascript, HTML and PHP code. One of them was that when adding code to a file, folding was not working and you had to close and reopen the file in order to work. As I use mostly Eclipse in the last five years, I don't know the status of bug fixing for Netbeans, but it is good to check it, if you are regularly using it. Now, if you have set up and enabled code folding properly - by the way Ctrl + minus performs the action of collapse fold, take a look at this https://ui.netbeans.org/docs/ui/code_folding/cf_uispec.html.
 
  • #3
Hi Quantum,

My code has grown to 1500 lines of pure HTML5/ WebGL Javascript code containing about 30 functions. But that link you posted shows pure Java classes. My code however is just a bunch of Javascript functions. Would you know if Netbeans can still collapse just functions? Here is for example three functions in my code and that is basically what I have in the entire file just more functions. Would you know of a better way to code a WebGL application other than THREE.js as I'd like to keep it native WegGL for now.

JavaScript:
 function handleMouseDown(event) {
        mouseDown = true;
        lastMouseX = event.clientX;
        lastMouseY = event.clientY;
    };    function handleMouseUp(event) {
        mouseDown = false;
    };

    function handleMouseMove(event) {
        if (!mouseDown) {
            return;
        }
        var newX = event.clientX;
        var newY = event.clientY;

        var deltaX = newX - lastMouseX;
        var newRotationMatrix = mat4.create();
        mat4.identity(newRotationMatrix);
        
        mat4.rotate(newRotationMatrix, degToRad(deltaX / 2), [0, 1, 0]);

        var deltaY = newY - lastMouseY;
        mat4.rotate(newRotationMatrix, degToRad(deltaY / 2), [1, 0, 0]);

        mat4.multiply(newRotationMatrix, moonRotationMatrix, moonRotationMatrix);

        lastMouseX = newX;
        lastMouseY = newY;
    };
 
  • #4
aheight said:
But that link you posted shows pure Java classes.

I pointed you to that link to see the general specs of folding.

I saw that your OP was about JavaScript, so that's why I told you about the known issues. My point is that if everything for code folding is set up and working correctly and you can't make it work in your functions, according to the usage instructions, then it could be a bug.
Also, take a look here about SurroundWithCodeFolding: http://wiki.netbeans.org/SurroundWithCodeFolding
 
  • #5
Ok. I tried custom code-folding blocks in my code and then restarted Netbeans. I do not get the plus and minus boxes though in the left margin to collapse and expand the block though. I do get a large bracket showing the code block though. I'll keep working on it.
 
  • Like
Likes QuantumQuest
  • #6
Ok, this is what I did: I created a brand-new HTML5/Javascript project then inserted a function into it and then followed the steps "SurroundWithCodeFolding" described in the link above. Then I highlight the text of the function and press the lightbulb and it give me a list of options. I choose "surround with code folding" and it surrounds the code with the custom template but then does not give the plus and minus code blocks for the function. This is the entire file I'm using with the custom code block inserted:

Code:
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
   <script type="text/javascript">
     
  
// <editor-fold defaultstate="collapsed" desc="Code Folding">
function initGL(canvas) {
       
        try {
            gl = canvas.getContext("experimental-webgl");
            gl.viewportWidth = canvas.width;
            gl.viewportHeight = canvas.height;
            gl.getExtension("OES_standard_derivatives");
         
         } catch (e) {
        }
        if (!gl) {
            alert("Could not initialise WebGL, sorry :-(");
         }
         return gl;
       }
     ; 
   
// </editor-fold>

  </script>

    <body>
        <div>TODO write content</div>
    </body>
</html>
 
  • #7
Another question: Have you tried Ctrl + Shift + - (minus sign) in the original folding fashion to fold all of the code in any file?
 
  • #8
When I first created the new project, Netbeans included folding for the HTML code. And then I added the function above and tried to set up custom folding but could not get the plus and minus signs in the folding tab to show up around the function. However, when I closed the project and Netbeans and then opened the project, the folding tabs for the HTML were removed and pressing Ctrl+Shift+(minus sign) does nothing.
 
  • #9
Custom code folding is an option to override normal folding. As I saw, it has given too some issues with javascript code - passing the configuration code as comments, so if it does not work, delete the configurations you did in Tools> Options> Editor> Code templates for custom folding, so Netbeans will return to its normal state after closing and restarting. Then, try Ctrl + Shift + - (minus sign) when you open your file. As is stated in the official Netbeans documentation, this folds any kind of file.
 
  • #10
Ok this is what I got: I have been creating the projects in Netbeans as a HTML/JS project. But there is another option, "NodeJSWebApplication" and when I create this type of project, I found folding seemed to work without adding any special template: Just block-out a few blank lines in the new project, get the light bulb icon at the left, and choose "surround with editor fold default state" and then just copy all my functions in this block. Seems to be working and I think maybe will be a better interface for me to work with my functions as my code is getting larger.
 
  • #11
aheight said:
Ok this is what I got: I have been creating the projects in Netbeans as a HTML/JS project. But there is another option, "NodeJSWebApplication" and when I create this type of project, I found folding seemed to work without adding any special template: Just block-out a few blank lines in the new project, get the light bulb icon at the left, and choose "surround with editor fold default state" and then just copy all my functions in this block. Seems to be working and I think maybe will be a better interface for me to work with my functions as my code is getting larger.

As I said in #2 I use mostly Eclipse in the last five years, but I have briefly overview the UI's of Netbeans 8.1 - it is quite good by the way. It is very often the case to do our tweaks in any IDE, in order to do the job. If it works well then it's fine.
 
  • #12
Hi Quantum,

It's still not working the way I wish it to work: If I leave functions collapsed and close then reopen Netbeans then all of them are shown open again and then the collapse and expand don't seem to work as expected as well.

I checked wikipedia for eclipse. Is eclipse a good IDE for writing HTML5/Javascript code and does the editor allow function collapsing?
 
  • #13
aheight said:
Hi Quantum,

It's still not working the way I wish it to work: If I leave functions collapsed and close then reopen Netbeans then all of them are shown open again and then the collapse and expand don't seem to work as expected as well.

I checked wikipedia for eclipse. Is eclipse a good IDE for writing HTML5/Javascript code and does the editor allow function collapsing?

I use Eclipse for Java code and Android development - now I use Android Studio too. For web development, after a lot of years in Dreamweaver, the last 7 -8 years I mostly use WebStorm and Aptana Studio 3. But I have worked out some web projects in Eclipse (up to Kepler edition) and yes code folding is working. It is generally an excellent IDE, but the same goes for Netbeans, as it also has an extremely powerful community and development behind it. It is really a matter to do the job smoothly with whatever this entails for each developer.
 
Last edited:
  • #14
Thanks. I like Netbeans and believe I'm just not setting up things right for the folding to work properly. basically I just want for example to start with all the functions folded so that I have a for example just a 2 page list of them, then I can pick and choose which ones to work on, open them, leave some closed, some open and then when I close Netbeans and then reopen it, my code is left just the way I left it. Surely that is doable just don't quite have it yet. :)
 

Related to Help with setting up code folding in NetBeans 8.1

1. What is code folding and why is it useful?

Code folding is a feature in NetBeans 8.1 that allows you to collapse and expand sections of your code, making it easier to navigate and read. This is especially useful for large and complex code files, as it allows you to focus on specific sections without getting distracted by the rest of the code.

2. How do I enable code folding in NetBeans 8.1?

To enable code folding in NetBeans 8.1, go to the "Tools" menu and select "Options". Then, go to the "Editor" tab and click on "Code Folding". Check the box next to "Enable Code Folding" and click "OK". Code folding will now be enabled for all supported languages in NetBeans.

3. How do I collapse and expand sections of code?

To collapse a section of code, click on the small arrow next to the line numbers or use the shortcut key "Ctrl + -". To expand a collapsed section, click on the arrow again or use the shortcut key "Ctrl + +". You can also use the "Fold All" and "Unfold All" options in the "Code" menu to collapse or expand all sections at once.

4. Can I customize the code folding behavior in NetBeans 8.1?

Yes, you can customize the code folding behavior in NetBeans 8.1 by going to the "Tools" menu and selecting "Options". Then, go to the "Editor" tab and click on "Code Folding". Here, you can choose which elements of your code you want to be folded by default, and you can also define custom folding regions using specific keywords or regular expressions.

5. Is code folding available for all programming languages in NetBeans 8.1?

No, code folding is not available for all programming languages in NetBeans 8.1. It is currently supported for languages such as Java, PHP, C++, and HTML, but not for languages like Python or Ruby. You can check the list of supported languages in the "Code Folding" section of the NetBeans documentation for more information.

Similar threads

  • Programming and Computer Science
Replies
6
Views
4K
  • Programming and Computer Science
Replies
21
Views
5K
  • Programming and Computer Science
Replies
9
Views
2K
  • Programming and Computer Science
Replies
9
Views
3K
  • Special and General Relativity
Replies
16
Views
3K
  • Programming and Computer Science
Replies
4
Views
2K
  • Programming and Computer Science
Replies
5
Views
2K
  • Programming and Computer Science
Replies
10
Views
2K
  • Computing and Technology
Replies
15
Views
4K
Back
Top