JavaScript: Code Folding

Today I would like to mentioned code folding in the new JavaScript editor support, which is available in the continual builds from our server. It's a basic feature, but was mentioned in a comment under the mentioned post.

So you can fold comments and every code block between { and }. The current support allows only methods to be folded. The difference is shown below. In the picture on the left side is the current folding and on the right side the new one.  

The code folding can be switched off in the Editor Options (Tools main menu -> Options -> Editor category -> General Tab). In this dialog you can also define which folds should be collapsed by default when you open a file. These options more closely fit Java editor needs, but you can see in the next picture how the options are mapped for JavaScript code.

 The Method option folds all functions in the code. Other code blogs are fold through the option Tags and Other Code Blogs.  The documentation comments (starts with /**) are fold through Javadoc Comments and when you check Initial Comment, then all comments that start with /* are folded by default. 

The new JavaScript editor also supports custom folds. To add your custom fold, type in two special comments as shown in this example:

   // <editor-fold>
   Your code goes here...
   // </editor-fold>
You can define the default description of a collapsed fold by adding a "desc" attribute:
   
   // <editor-fold desc="This is my super secret genius code.">
   Your code goes here...
   // </editor-fold>
You can set a fold to be collapsed by default by adding a "defaultstate" attribute:
   
   // <editor-fold defaultstate="collapsed">
   Your code goes here...
   // </editor-fold>

There is a code template that helps with writing custom fold comments. The abbreviation for the template is fcom.

As I wrote the new JS support is available in the continual builds. Go here for more info.

Comments:

Does the new code folding work with other languages, such as PHP, too?

// <editor-fold>
Your code goes here...
// </editor-fold>
You can define the default description of a collapsed fold by adding a "desc" attribute:

// <editor-fold desc="This is my super secret genius code.">
Your code goes here...
// </editor-fold>
You can set a fold to be collapsed by default by adding a "defaultstate" attribute:

// <editor-fold defaultstate="collapsed">
Your code goes here...
// </editor-fold>

Posted by guest on April 02, 2012 at 04:43 PM CEST #

Yes, the custom code folding should work in every editor. If not, please file new bug for the appropriate editor. Regarding PHP, it should work.

Posted by Petr Pisl on April 03, 2012 at 05:09 AM CEST #

Post a Comment:
  • HTML Syntax: NOT allowed
About

This blogs is written by NetBeans developers who contribute to the PHP support mainly.

Search

Archives
« April 2014
SunMonTueWedThuFriSat
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
   
       
Today