যারা ওয়েব ডেভেলপমেন্টের সাথে জড়িত, তাদের প্রায় সবসময়ই HTML, CSS এর কোডগুলো নিয়ে কাজ করতে হয়। HTML, CSS এর কোডগুলো এমন যে, এগুলো আসলে একই লেখা বারে বারে লিখতে হয়। পুরো কোড টাইপ করে লিখাটা আসলেই অনেক সময় নষ্ট করে ফেলে। এর জন্য ভালো একটা Text Editor থাকলে কাজগুলো অনেক সহজ হয়ে যায়। এরকম একটা Text Editor হচ্ছে Sublime Text Editor. যদিও প্রথম দিকে কাজ শেখার জন্য পুরো কোড টাইপ করে লিখাটাই শ্রেয়। এবং সেজন্য Notepadd++ Editor ব্যবহার করলে ভালো হয়।
Text Editor এর সাথে আরও কিছু প্লাগইন আছে, যেগুলো ব্যবহার করলে আপনি খুব কম সময়েই অনেক বেশি কোড লিখতে পারবেন। এরকম একটা প্লাগইন হচ্ছে Emmet । যখন Emmet Plugin ব্যবহার করা শুরু করবেন, তখন মনে হবে আপনি কোড নিয়ে জাদু করছেন। ;) যারা নিয়মিত HTML ফাইল নিয়ে কাজ করেন, তাদের জন্য এটা খুবই কাজের এবং উপকারী। শুধুমাত্র অল্প কিছু কোড লিখে দিলেই পুরো Snippet টা এই প্লাগইনের মাধ্যমে জেনারেট হয়ে যায়।
আমি এখানে Sublime Text Editor এবং Notepad++ Editor এ কিভাবে Emmet Plugin install করতে হয়, সেটা নিয়ে লিখছি।
Emmet Plugin For Sublime Text:
Sublime Text Editor এ কোন প্লাগইন ইনস্টল করতে হলে Package Control দিয়ে সেটা করা যায়, অথবা চাইলে Manually ইনস্টল করা যায়। Package Control দিয়ে করার জন্য প্রথমে Sublime Text এ Package Control ইনস্টল করতে হবে। এর জন্য https://sublime.wbond.net/installation লিংকে যেয়ে Step গুলো অনুসরণ করলে চলবে।
তবে আমার মতো যারা নাদান, তারা আসলে প্রথমদিকে ঝামেলায় পড়ে যায়। এসব Instruction ফলো করার সময় একটু এদিক-সেদিক হলে সবকিছু পুরাই মাথার উপর দিয়ে যায়। তাই সবার বুঝার সুবিধার্থে স্ক্রিনশট আকারে পুরোটা দিয়ে দিলাম।
১. Package Control ইনস্টল করার জন্য উপরের লিংকে যাওয়ার পরে একটা কোড দেখতে পাবেন। এই কোডটা কপি করে Sublime Text Console এ চালাতে হবে। Sublime Text Console চালু করা জন্য শর্টকাট হচ্ছে Ctrl+` অথবা মেন্যুবারে গিয়ে View>Show Console এ ক্লিক করুন।
২. নিচের স্ক্রিনশটের মতো করে কোডটি কপি করে Sublime Text Console এ Paste করে দিন। তারপরে Enter চাপুন।
৩. এরপরে Ctrl+Shift+P চাপলে একটা Text box দেখাবে। সেখানে install লিখলে Package Control: Install Package দেখতে পাবেন। সেটা প্রথমে ইনস্টল করুন।
যদি এ পদ্ধতিতে Package Control ইনস্টল না হয়, তাহলে উপরের লিংকে যেয়ে manual installation এর ইনস্ট্রাকশন অনুসরণ করলে হবে।
৪. এখন Emmet Plugin install করার জন্য Text box এ Emmet লিখলে প্রথমেই Emmet Plugin এর প্যাকেজটা পেয়ে যাবেন। সেটা ইনস্টল করুন এবং Sublime Text Restart দিন।
এখন Emmet Plugin আপনার Sublime Text এ কাজ করছে কিনা সেটা দেখার জন্য একটা html ফাইল তৈরি করুন। এবং সেখানে html:5 লিখে Tab চাপুন। দেখবেন HTML এর basic structure snippet টা চলে এসেছে। Emmet এর শর্টকোডগুলো জানার জন্য ওদের documentation পড়ে দেখতে পারেন।
Emmet Plugin For Notepad++ :
Notepad++ এ Emmet plugin ব্যবহার করে যদিও Sublime text editor এর মতো মজা পাওয়া যায়না। তবে Notepad++ এ Emmet ইনস্টল করা বেশ সহজ।
1. Navigate to Menu : Plugins > Plugin Manager > Show Plugin Manager menu action
2. Find and install “Emmet” plugin. It will also need to install “Python Script plugin” (also available in Plugin Manager).
If any problem occurs, then install the Emmet plugin for notepad++ manually from here. Download the emmet-npp.zip file from this link and unzip it into C:\Program Files\Notepad++\plugins folder.
4. Change the shortcut key for using Emmet. Navigate to Menu : Settings > Shortcut Mapper…>Plugin Commands and Find the Expand Abbreviation action and change it to Tab key to improve your experience.
লিখা ভালো হয়েছে। ধন্যবাদ শেয়ার করার জন্য। নিয়মিত লিখে যা। তাহলে সবাই আরও অনেক কিছু জানতে পারবে। :-)
I like to use Codelobster: http://www.codelobster.com
it has special support for Emmet.