Shopify Editor এখন VS Code! এক URL-এই চালু করুন নতুন ফিচার
আপনি যদি Shopify Theme Development নিয়ে কাজ করেন, তাহলে Shopify-এর Code Editor-এ নতুনভাবে কাজ করার এই ছোট্ট ট্রিকটি আপনার বেশ কাজে লাগতে পারে। Shopify-এর Theme Code Editor-কে এখন অনেকটাই VS Code-এর মতো interface ও coding experience-এ ব্যবহার করা যায়। এর জন্য আলাদা কোনো সফটওয়্যার ইনস্টল করার প্রয়োজন নেই।
সবচেয়ে মজার বিষয় হলো, এই সুবিধাটি ব্যবহার করতে আপনার Theme Editor-এর URL-এর শেষে শুধু ?vs=1 যোগ করতে হবে।
কীভাবে VS Code Mode চালু করবেন?
প্রথমে আপনার Shopify Admin Panel-এ প্রবেশ করুন। এরপর যে Theme-এর কোড নিয়ে কাজ করতে চান, সেই Theme-এর Code Editor ওপেন করুন।
সাধারণত Theme-এর কোড এডিটরের URL-এর মধ্যে একটি নির্দিষ্ট Theme ID থাকে। URL-টি দেখতে অনেকটা এমন হতে পারে:
https://admin.shopify.com/store/your-store/themes/123456789/editor
এখন URL-এর একদম শেষে ?vs=1 যোগ করুন:
https://admin.shopify.com/store/your-store/themes/123456789/editor?vs=1
এরপর Enter চাপলে Code Editor-এর interface পরিবর্তিত হয়ে VS Code-এর কাছাকাছি একটি coding environment দেখতে পাবেন।
অর্থাৎ নতুন কোনো application download বা computer-এ আলাদা করে VS Code install করার প্রয়োজন নেই। পুরো কাজটি সরাসরি browser-এর মধ্যেই করা যায়।
কেন এটি গুরুত্বপূর্ণ?
Shopify Theme Development-এর সময় অনেক developer-ই VS Code-এর মতো উন্নত coding environment পছন্দ করেন। কারণ সেখানে file navigation, code search, syntax highlighting, keyboard shortcut এবং বিভিন্ন developer-focused সুবিধা ব্যবহার করে দ্রুত কাজ করা যায়।
Shopify-এর সাধারণ Code Editor ব্যবহার করেও Theme-এর Liquid, CSS, JavaScript এবং অন্যান্য ফাইল edit করা যায়। কিন্তু editor-এর workflow অনেকের কাছে desktop code editor-এর তুলনায় সীমিত মনে হতে পারে।
?vs=1 ব্যবহার করলে সেই অভিজ্ঞতাকে আরও উন্নত করা যায়। বিশেষ করে যারা browser থেকেই Shopify Theme-এর code edit করতে চান, তাদের জন্য এটি বেশ সুবিধাজনক।
Global Search ও দ্রুত File Navigation
বড় Shopify Theme-এ অনেকগুলো file থাকতে পারে। ফলে কোনো নির্দিষ্ট class, function, Liquid variable বা text খুঁজে বের করতে সময় লাগতে পারে।
VS Code-এর মতো coding environment-এর অন্যতম সুবিধা হলো দ্রুত search এবং file navigation। ফলে Theme-এর বিভিন্ন file-এর মধ্যে প্রয়োজনীয় code খুঁজে বের করা তুলনামূলকভাবে সহজ হয়।
আপনি যদি কোনো নির্দিষ্ট CSS class কোথায় ব্যবহার করা হয়েছে, কোনো Liquid snippet কোথা থেকে call করা হচ্ছে অথবা কোনো JavaScript function কোন file-এ রয়েছে—এসব খুঁজতে চান, তাহলে উন্নত search workflow বেশ কাজে আসতে পারে।
⌨️ Keyboard Shortcut
Desktop code editor ব্যবহারকারীদের জন্য keyboard shortcut খুবই গুরুত্বপূর্ণ। Mouse দিয়ে প্রতিটি কাজ করার পরিবর্তে keyboard ব্যবহার করে দ্রুত file খোলা, search করা, navigation করা কিংবা অন্যান্য coding task সম্পন্ন করা যায়।
Shopify-এর এই VS Code-style editor ব্যবহার করলে browser-এর মধ্যেই আরও familiar development workflow পাওয়া যায়। ফলে VS Code-এ অভ্যস্ত developer-দের জন্য Shopify Theme edit করা আরও স্বাচ্ছন্দ্যপূর্ণ হতে পারে।
আলাদা Software ছাড়াই
এই পদ্ধতির সবচেয়ে বড় সুবিধা হলো এটি browser-based। অর্থাৎ Shopify Theme নিয়ে কাজ করার জন্য সবসময় স্থানীয়ভাবে project setup করে VS Code চালু করতে হবে না।
বিশেষ করে অন্য computer থেকে Shopify store-এর Theme-এ দ্রুত কোনো পরিবর্তন করতে হলে এটি কার্যকর হতে পারে। শুধু browser-এ Shopify Admin খুলে Code Editor-এ গিয়ে URL-এর শেষে ?vs=1 যোগ করলেই কাজ শুরু করা যায়।
তবে মনে রাখবেন, এটি Shopify-এর editor-এর একটি VS Code-style interface/experience; এটিকে সম্পূর্ণ desktop Microsoft VS Code application হিসেবে ভাবা ঠিক হবে না। আপনার workflow অনুযায়ী কিছু feature বা limitation ভিন্ন হতে পারে।
কার জন্য সবচেয়ে বেশি উপকারী?
এই সুবিধাটি বিশেষ করে Shopify Theme Developer, Frontend Developer এবং Shopify Store Customizer-দের জন্য উপকারী হতে পারে। যারা নিয়মিত Liquid, CSS, JavaScript এবং Theme files নিয়ে কাজ করেন, তারা browser-এর মধ্যেই আরও পরিচিত coding experience পেতে পারেন।
তাই Shopify Theme নিয়ে কাজ করার সময় Code Editor-এর সাধারণ interface আপনার কাছে সীমিত মনে হলে একবার URL-এর শেষে ?vs=1 যোগ করে দেখে নিতে পারেন।
সংক্ষেপে: Shopify Theme Code Editor খুলুন → URL-এর শেষে ?vs=1 যোগ করুন → Enter চাপুন → browser-এর মধ্যেই VS Code-এর কাছাকাছি coding experience ব্যবহার করুন।
নোট: Shopify-এর interface ও feature সময়ের সঙ্গে পরিবর্তিত হতে পারে। তাই আপনার store বা account-এ এই option-এর আচরণ কিছুটা ভিন্ন হতে পারে।