সাবলাইম টেক্সট ফুল সেটাপ (প্রয়োজনীয় প্যাকেজ)

সাবলাইম টেক্সট একটি জনপ্রিয় এবং বহুল ব্যবহৃত  কোড এডিটর। এটিকে ঠিক মত কনফিগার করতে পারলে প্রোডাক্টিভিটি অনেক গুন বেড়ে যায়। এটি জনপ্রিয় হওয়ার অন্যতম একটি কারণ হচ্ছে প্যাকেজ ফিচার । আলাদা প্যাকেজ ইন্সটল করে অনেক ফাংশনালিটি যুক্ত করা যায়। যেমন কেউ যদি ফন্টএন্ড ডেভেলপার হয়, তার দরকার হবে HTML CSS রিলেটেড লেখার প্যাকেজ। এছাড়াও  ইউজার ফ্রেন্ডলি।

কিভাবে এটা সেটাপ করবেন?

সাবলাইম টেক্সট ডাওন করার জন্য আপনাকে চলে যেতে হবে এই  লিংকে। ডাওনলোড হয়ে গেলে ইন্সটল করে ওপেন করুণ এবং সাবলাইম টেক্সট এর টপ বার থেকে  Preferences > Packages Control > Install Package এ ক্লিক করে কিছুক্ষণ অপেক্ষা করলে প্যাকেজ লিস্ট দেখতে পারেন। এখান থেকে আমাদের প্রয়োজনীয় প্যাকেজ ইন্সটল করতে হবে

#১ Emmet

মোস্ট ইম্পরট্যান্ট প্যাকেজ ফর ওয়েব ডিজাইনার + ডেভেলপার। আপনার ওয়েব ডিজাইনের হাত কে বোস্ট করার অন্যতম প্যাকেজ হচ্ছে এটি 🙂  সহজভাবে বলতে গেলে,  এইচটিএমএলের এই স্ট্রাকচারটি সম্পূর্ণ হাতে লিখতে হয়

&lt;!DOCTYPE html&gt;<br />
&lt;html lang="en"&gt;<br />
&lt;head&gt;<br />
&lt;meta charset="UTF-8"&gt;<br />
&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;<br />
&lt;title&gt;Document&lt;/title&gt;<br />
&lt;/head&gt;<br />






&lt;body&gt;<br />
&lt;/html&gt; 

কিন্তু আপনি যদি Emmet ইন্সটল দিয়ে HTML:5  লিখে এন্টার চাপ দিন তাহলে পুরো স্ট্রাকচারটিয়েই কোড এডিটরে অটোমেটিক লিখা হয়ে যাবে। আপনাকে কষ্ট করে হাতে পুরোটা লিখতে হবেনা (ইটস কলড সর্ট কাট ম্যাজিক); Emmet ইন্সটল করার জন্য, Preferences থেকে  Control package এ ক্লিক করলে অনেকগুলো অপশন আসবে।

উপরে সার্চ বক্সে  install package লিখলে install package অপশন টি দেখা যাবে। ইন্সটল প্যাকেজে ক্লিক করে কয়েক সেকেন্ড অপেক্ষা করতে হবে

কয়েক সেকেন্ড অপেক্ষা করার পর লম্বা এক প্যাকেজ লিস্ট দেখতে পাবো। এবার আমাদের সার্চ দিতে হবে Emmet. ক্লিক করলেই ইন্সটল হয়ে যাবে (আমার ইন্সটল করা থাকায় এখানে আসেনি)

#২ Color Highlight

কালার হাই-লাইট মূলত কালার কোড কে হাই লাইট করে। প্যাকেজটটি সিএইসএইস কোডের সৌন্দর্য্য বৃদ্ধি করে। আপনি যখন কোন একটি কালারের কোড / কালার নাম লিখবেন তখন সেই কালার কোড / কালার নামটি কালার হয়ে যাবে। ধরুণ আপনি  #f2f লিখলেন,  #f2f  কালার হয়ে গেলো। এখনো না বুঝলে নিচের স্ক্রিনশটি দেখুন

#৩ Sideber hidder

সাইডবার হাইডার সাবলাইম টেক্সট এর সাইডবার হাইড করার জন্য ব্যবহার হয়ে থাকে।  এটা অটোমেটিক্যালি কাজ করে। যখন আপনি কোড লিখবেন তখন সাইডবার হাইড হয়ে যাবে। যখনই মাউস কারসরটি সাইডবার  এড়িয়াতে এনে ফোকাস করবেন তখন সাইড বার টি সো করবে।

ইন্সটল করা খুব সহজ। যেভাবে ইন্সটল করেছেন, এটাও সেইম ভাবে ইন্সটল করে ফেলুন

#৪ Live reload

মোস্ট ইমপরটেন্ট প্যাকেজ। আপনি কোডিং করছেন এবং সেইভ দেয়ার সাথে সাথে অটোমেটিক ব্রাউজ রিলোড নিয়ে আউটপুট সো করছে, এমন হলে কেমন হয়?  live reload  প্যাকেজের মাধ্যমে খুব সহজেই আমরা এটি সেট আপ করতে পারি

কিভাবে সেট আপ করবেন?

প্রথমেই প্যাকেজটি ইন্সটল দিন এবং সাবলাইম টেক্সট টি ক্লোস করে বের হয়ে যান > গুগল ক্রোমে সার্চ দিন  live reload for google chrome  অথবা মজিলা ফায়ারফক্স গিয়ে সার্চ দিন Livereload for Mozilla firefox  যে এক্সটেনশটি আসবে সেটা ব্রাউজারে ইন্সটল করে একটিভ করে দিন। ব্যস হয়ে গেলো !!

#৫ Material Theme