Monday Apr 29, 2013

Emmet plugin for NetBeans 7.3

Emmet is an amazing tool that greatly improves the coding productivity for web applications. It is well known among web developers, and in fact, many NetBeans users have requested support for Emmet in NetBeans. The good news is that thanks to Sergey Chikuyonok, the creator of Emmet, and Lorenzo Stanco, the author of the original Zen Coding plugin, the Emmet plugin is now available on the Update Center for NetBeans IDE 7.3 (as well as 7.2). Let's see how it works.

First, we need to install the plugin. In your NetBeans IDE 7.3, choose Tools | Options in the main menu, and select Available Plugins

Installing the Emmet plugin in NetBeans 7.3

In the Search field, type Emmet, and the plugin will be found. Check the Install checkbox, press the Install button, and follow the plugin installation wizard. At the end of the wizard, you will be prompted to restart the IDE.

Once the plugin is installed, you will notice that there is a new Emmet submenu in the IDE's Edit menu, which gives you access to all the great features of Emmet. In addition to this, the most important Emmet actions have keyboard shortcuts, so you will not need to use mouse to activate them.

Main Emmet menu in NetBeans IDE

For example, type the following text inside a HTML document in NetBeans: #page>div.logo+ul#navigation>li*5>a{Item $}.

Emmet abbreviation

 When you now press Ctrl-Alt-N (or Ctrl-Cmd-N on Mac), the magic will happen, and this text will be expanded to 10 lines of HTML code, that would be pretty tedious to type manually:

Code generated by expanding an Emmet abbreviation

Note that the keyboard shortcut for all Emmet actions (including Expand Abbreviation) can be defined in IDE options - just go to Tools | Options | Keymap.

Configuring Emmet keyboard shortcuts

This screenshot also illustrates that beyond expanding abbreviations as shown in the example above, Emmet offers numerous other features and actions, that are worth exploring. Additionally, Emmet supports extensions that further enhance its functionality. Extensions can be set up in NetBeans using Tools | Options | Miscellaneous | Emmet, so IDE users can take advantage of them.

Emmet extensions configuration in NetBeans

For more information, check out also the official README for the NetBeans plugin at the Emmet website. 

Friday Apr 12, 2013

Editing CSS Preprocessor Sources

Using plain CSS files in today's complex web applications often quickly reaches the limits of the technology and lot of people bothered by maintaining huge amount of styles calls for help. Though CSS3 tries to address some of the complains, the new modules specification creation process is quite slow and the adoption of the results in browsers is not instant. 

Several CSS preprocessor frameworks addresses most of the sore points of using plain CSS and adds plenty of useful features like nested rules, variables, mixins, useful functions and much more. 

The NetBeans editor now supports the most common frameworks: SASS (Sassy CSS syntax) and LESS.

Here is the list of basic features:

  • syntactic and semantic (parser based) coloring for the language constructs, 
  • indentation, simple reformat of code, 
  • code folds, 
  • go to declaration, mark occurrences, instant rename for variables and mixins 
  • code completion for variables and mixins,

  • vars, mixins and imported files shown in the navigator, 

  • find usages and refactor rename among files.


  •  code templates

Please give it a try, we're looking forward to your feedback! 

About

This is the blog of the NetBeans client-side web team, which develops the support for HTML5 applications in the NetBeans IDE.

Search

Categories
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