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

Git - Update submodule

Sometimes in the large project when we separate it in different repositories we need to take reference of one repository in another where some the sub-module concepts. Now if we move our submodule to a different repository or renaming its repo-path then we've to also update the repository where this sub-module is getting referenced. Let's see how to update the git submodule.  Step-1: First clone the repo Step-2: Open git UI to create a new local branch from master  Step-3: Open git bash -- Now run below command to (remove submodules & add them):  -- Remove submodule git submodule deinit YOUR_FIRST_REPO git rm YOUR_FIRST_REPO git commit -m "Removed submodule YOUR_FIRST_REPO" rm -rf .git/modules/YOUR_FIRST_REPO -- Add submodule git submodule add <<..YOUR_FIRST_REPO git URL>> Step-4: All good, let's push our changes to the master
Post a Comment
Read more

EFCore - Update command is not updating the underlying data

Why my update command using EFCore is not updating the underlying data in the database though in middle-tier code it's successful, not throwing any error? Let's try to get the root cause and how to solve this.  When creating the model class of related database object if the primary key name is Id then no need to explicitly mention the Key in ef-core OnModelCreating.  But if we've key name different from Id then we have to explicitly mention it in our OnModelCreating. Something like this:  entity.HasKey(c => new {c.CustId }); Assume in the database we've Customers table like this: CREATE TABLE [dbo].[Customers]( [CustId] [INT] IDENTITY(1,1) NOT NULL Primary Key, [FirstName] [VARCHAR](50) NULL ) Point to ponder: In the database table, column CustId is already defined as Primary key.  In EFCore model setup, it's up to us to configure the Key as (custId) or configure it as HasNoKey() Assume we've set our entity with Ha...
Post a Comment
Read more