Skip to main content

How to install Zen-coding plugin


As a web-developer, irrespective of the technologies (java, c-sharp, python, php e.t.c.…), we used to write CSS code to make our web-pages looks good if not at least we’re involved in write html codes. What if there is some tool to whom you give some instruction and that tool generates a good, well formatted html tags for you.

These kind of coding is possible and known as “Zen coding” and there are lots of plug-in available from different vendors. We’re going to  discuss the steps to install this “zen-coding” plugin for “visual studio, eclipse, sublime-text & notepad++ in next few lines.


Follow the below steps to install "zen-coding" plugin based on your editor. 

Steps to install zen-coding plugin for (visual studio, eclipse, sublime-text,notepad++)



-- -- For Visual Studio
1. Go to "Tools" -> "Extensions and Updates"
2. It'll open the "Extensions and Updates windows"
   Select online form Left hand menu items enter "Productivity tool" in the search box (right-side)

3. Select the "Production power tool for Visual studio" and install it
 and you're done.

-- For eclipse
http://emmet.io/eclipse/updates/

1. "Help" -> "Install New Software"
2. It'll open "Install" window
3. Click on "Add" it'll open "Add repository"
4. Enter this url in location box and give it some name e.g. (ZenCoding)
   "http://emmet.io/eclipse/updates/"
5. Click Ok
6. Click next & follow the steps... 
Restart your eclipse instance


-- For sublime text
https://sublime.wbond.net/

First thing you've to do is to install the package manager. If you've already installed the package manage then ignore this step

1. Go to "https://sublime.wbond.net/" url, and click on "Install Now"
2. Using Package Manager
    2a. from the Sublime text instance: "View > Show Console"
    2b. from the above website (https://sublime.wbond.net/)
         Select the text from "Sublime Text 3" or "Sublime Text 2" tab and copy it into the "Console" hit enter

    This code will creates the Installed Package folder for you and then download the Package Control into it
If due to some reason this package installed is not working for you, you can also install the plugin manually.
 3. Using Manually
     3.1. Click the Preferences -> "Browse Packages" menu item
          It will the folder
          e.g. "C:\Users\hp\AppData\Roaming\Sublime Text 2\Packages"

      3.2. Browse up a folder and go into the "Installed Packages" folder
          e.t. "C:\Users\hp\AppData\Roaming\Sublime Text 2\Installed Packages"
      3.3 Download Package Control.sublime-package and copy it into the    Installed Packages/ directory
         "https://sublime.wbond.net/Package%20Control.sublime-package"

       3.4. Restart your sublime text instance


 Now as you've installed the Package Installer sublime text, follow these steps to install the "zen-coding plug-in"
 1. "Tools" -> "Command Palettes..."
 2. Type "install" it will filter out the
   "Package Install: Install Package", click on it
 3. It will open another pop-up
    type "emmet" and it'll filter out
     "Emmet (ex-zen coding) for sublime text"
     Click it and it'll install the emmet plug-in for you...

Restart your sublime text instance. And you're good to write zen-coding using sublime text. 

-- -- Notepad++
1. "Plugin" -> "Plugin Manager" -> "Show Plugin Manager"
2. It will open a window and take some time to load all the plugin available
   Search for "zen..." (you can find it at the very last of the populated list)
3. Select it
   and press install
4. It'll take some time to install zen-coding plugin for you.
5. Once it's done
Restart your Notepad++ instance        
   

Follow these links for tips & tricks of zen-coding…
1.       http://coding.smashingmagazine.com/2013/03/26/goodbye-zen-coding-hello-emmet/
2.       http://docs.emmet.io/cheat-sheet/


In next article we'll see how to use zen coding and be a power developer.


                                                                                                                                                                                                                                               
Labels:

Comments

Post a Comment

Popular posts from this blog

EFCore - Collate function

Search in SQL server query is generally case insensitive (by default or based on database level collation). Suppose we have an employees table with a row having first-name column value as "My-First-Name", so if we want to do the case-sensitive search we have to explicitly use the related collate: In EF 5 (currently in Release Candidate version [RC.2.20475.6]) Collate function got introduced which helps us to use our specific collation based search.  C# with EF5 code sample: var employeeCaseSensitiveSearch = _dbContext.Employees .Where(x => EF.Functions.Collate(x.FirstName, "Latin1_General_CS_AS") == "my-first-name") .FirstOrDefault(); A related database query will be something like this: T-SQL: Case sensitive search (use specific collation e.g.: Latin1_General_CS_AS) SELECT * FROM dbo.Employees AS e WHERE e.FirstName Collate Latin1_General_CS_AS = 'my-first-name' Some of the useful CSharp function which g...
Post a Comment
Read more

EFCore - Parallel db call on same dbContext

Practically there are multiple instances when we want to do parallel DB call which will save us some time. Like if we want to get a few employees details as well as users detail and if both entities are independent of each other better to go with a parallel call to fetch the details.  With the growing ORM usage and enhanced & optimized framework of like EFCore, in most of the application (related to C# development), we generally prefer to use EFCore. With EFCore if we try to use the same DB context to do parallel db call we are getting an error (... different thread using the same DbContext....). Because dbContext call is not thread-safe Parallel DB call on the same dbContext:  Code snipped: which will throw an error private void DbCallWithParallelCallOnSameDbContext() { try { var employeesTask = _dbContext.Employees.ToListAsync(); var usersTask = _dbContext.Users.ToListAsync(); ...
Post a Comment
Read more