वेब के लिए Visual Studio Code के साथ कोड संपादित करें (पूर्वावलोकन)

[यह विषय पूर्व-रिलीज़ दस्तावेज़ है और इसमें परिवर्तन हो सकता है.]

डिज़ाइन स्टूडियो से, आप वेब के लिए Visual Studio Code का उपयोग करके साइट कोड संपादित कर सकते हैं। इस सुविधा से आप निम्नलिखित वेबसाइट मेटाडेटा के लिए स्थैतिक सामग्री, HTML, CSS, Liquidऔर JavaScript संपादित कर सकते हैं:

Metadata	सामग्री
एकाधिक चरण प्रपत्र उन्नत खोज प्रपत्र	JavaScript
मूल रूप	JavaScript
सामग्री स्निपेट	सभी समर्थित सामग्री स्निपेट सामग्री
सूचियों	JavaScript
वेब फ़ाइलें	मीडिया फ़ाइलें देखें और डाउनलोड करें. टेक्स्ट (कोड) फ़ाइलें संपादित करें.
वेब पेज	सभी समर्थित सामग्री (प्रति भाषा), JavaScript और CSS
वेब टेम्पलेट्स	सभी समर्थित चैनल सामग्री

नोट

आप मेटाडेटा रिकॉर्ड बनाने में सक्षम नहीं होंगे, केवल सामग्री, कोड जोड़ें और संपादित करें, और फ़ाइल अनुलग्नकों को देखें/डाउनलोड करें.

वेब के लिए Visual Studio Code एक निःशुल्क, शून्य-स्थापित Microsoft Visual Studio Code अनुभव प्रदान करता है जो पूरी तरह से आपके ब्राउज़र में चल रहा है, जिससे आप साइट कोड ब्राउज़ कर सकते हैं और हल्के कोड परिवर्तन जल्दी और सुरक्षित रूप से कर सकते हैं। अधिक जानकारी: वेब अनुभव के लिए Visual Studio Code.

महत्त्वपूर्ण

• यह एक पूर्वावलोकन सुविधा है.
• पूर्वावलोकन सुविधाएँ उत्पादन में उपयोग के लिए नहीं होती हैं और इनकी कार्यक्षमता प्रतिबंधित हो सकती हैं. यह सुविधाएँ आधिकारिक रिलीज़ से पहले उपलब्ध होती हैं ताकि ग्राहक शीघ्र पहुँच प्राप्त कर सकें और प्रतिक्रिया प्रदान कर सकें.

नोट

• वेब लोड के लिए पहली बार Visual Studio Code में कुछ समय लग सकता है क्योंकि यह इस सुविधा के लिए आवश्यक एक्सटेंशन स्थापित करेगा।
• फ़ाइल बनाएँ, हटाएँ और नाम बदलें कार्रवाई समर्थित नहीं हैं.
• यह सुविधा Power Platform Tools वेब एक्सटेंशन का उपयोग करती है. वेब एक्सटेंशन ब्राउज़र सैंडबॉक्स द्वारा प्रतिबंधित होते हैं और इसलिए सामान्य एक्सटेंशन की तुलना में सीमाएं होती हैं।
  • Power Platform CLI समर्थित नहीं है.
  • Power Platform Tools वेब एक्सटेंशन सुविधाएँ Power Pages कोड संपादन अनुभव तक सीमित हैं.
  • यह सुविधा सरकारी समुदाय क्लाउड (GCC), सरकारी समुदाय क्लाउड (GCC उच्च) और रक्षा विभाग (DoD) में उपलब्ध नहीं है. इन क्षेत्रों के उपयोगकर्ता कोड संपादित करने के लिए पोर्टल प्रबंधन ऐप का उपयोग करेंगे. अधिक जानकारी के लिए पोर्टल प्रबंधन ऐप में संपादन कोड देखें.

डिज़ाइन स्टूडियो में संपादन कोड उपलब्ध है

आप Editसंपादित करें साइट कोड विकल्प चुनकर Power Pages मुख पृष्ठ से वेब के लिए Visual Studio Code का उपयोग करके अपनी साइट के कोड को संपादित करना प्रारंभ कर सकते हैंसंपादित करें/c1>.

आप डिज़ाइन स्टूडियो में निम्नलिखित क्षेत्रों से भी कोड संपादित कर सकते हैं:

• पेज वर्कस्पेस से वेब पेज कोड संपादित करें
• पेज वर्कस्पेस से हेडर टेम्प्लेट कोड
• कस्टम संपादित करें CSS स्टाइलिंग वर्कस्पेस से कोड
• मल्टीस्टेप प्रपत्रों के लिए कस्टम JavaScript कोड संपादित करें
• बेसिक प्रपत्रों के लिए कस्टम JavaScript कोड संपादित करें
• सूचियों के लिए कस्टम JavaScript संपादित करें
• सामग्री स्‍नि‍पेट्स संपादित करें
• वेब टेम्पलेट संपादित करें
• मीडिया फ़ाइलें देखें और डाउनलोड करें (छवियाँ)
• टेक्स्ट-आधारित वेब फ़ाइलें संपादित करें (सीएसएस, जावास्क्रिप्ट, अन्य)

आइए देखें कि इन क्षेत्रों का उपयोग करके कोड को कैसे संपादित किया जाए.

पेज कार्यस्थान से वेब पेज कोड संपादित करें

जब आप Power Pages डिज़ाइन स्टूडियो खोलते हैं, तो आपको पेज मेनू¹ में कोड संपादित करें विकल्प दिखाई देता है और स्क्रीन के ऊपरी-दाएं कोने² दिखाई देता है.

पेज कार्यस्थान से वेब पेज कोड संपादित करें.

पेज कार्यस्थान से शीर्ष लेख टेम्पलेट कोड

कोड संपादक खोलने के लिए साइट शीर्ष लेख संपादित करें चुनें और फिर कोड संपादित करें चुनें.

पेज शीर्ष लेख से कोड संपादित करें.

स्टाइलिंग कार्यस्थान से कस्टम CSS कोड संपादित करें

स्टाइलिंग कार्यस्थान पर जाएं और कोड संपादक खोलने के लिए उपलब्ध कस्टम CSS कोड संपादित करें मेनू चुनें.

कस्टम CSS से कोड संपादित करें.

Power Pages क्रियाएँ दृश्य

फ़ाइल एक्सप्लोरर के निचले भाग में पहुँच योग्य Power Pages क्रियाएँ दृश्य, आपको सीधे संपादक के भीतर Power Pages साइटों का प्रबंधन करने देता है। यह डेवलपर्स को संपादक के भीतर से सामान्य कार्यों को जल्दी से करने की अनुमति देकर Power Pages डिज़ाइन स्टूडियो पर स्विच करने की आवश्यकता को कम करता है।

उपलब्ध कार्रवाइयां

• साइट का पूर्वावलोकन करें
  यह क्रिया कॉन्फ़िगरेशन कैश साफ़ करता है और साइट को VS कोड में खोलता है। यह डेवलपर्स को Power Pages डिज़ाइन स्टूडियो में संदर्भ स्विच करने की आवश्यकता के बिना साइट कोड में परिवर्तनों का पूर्वावलोकन और परीक्षण करने में सक्षम बनाता है।

• Power Pages डिज़ाइन स्टूडियो
  कोड परिवर्तन करने के बाद, Power Pages डिज़ाइन स्टूडियो पर जाने के लिए इस क्रिया का उपयोग करें. यह प्रमाणीकरण प्रदाताओं, वेब भूमिकाओं और अन्य साइट सेटिंग्स को कॉन्फ़िगर करने के लिए उपयोगी है जो कोड संपादक में संपादन योग्य नहीं हैं।

• वीएस कोड डेस्कटॉप में खोलें
  यदि VS कोड डेस्कटॉप स्थापित है, तो यह क्रिया डेस्कटॉप अनुप्रयोग में साइट खोलती है। यह साइट डाउनलोड को भी ट्रिगर करता है, जिससे यह सुनिश्चित होता है कि कोड स्थानीय रूप से उपलब्ध है और संपादन के लिए तैयार है।

Power Pages वीएस कोड.

विरोध अधिसूचना मर्ज करें

यदि आप अन्य डेवलपर्स के साथ सहयोग कर रहे हैं, तो ऐसी स्थितियां हो सकती हैं जहां आप एक ही स्रोत कोड पर काम कर रहे होंगे। अगर आप किसी पुरानी फ़ाइल में परिवर्तनों को सहेजने का प्रयास करते हैं, तो आपको बदलावों की तुलना करने या ओवरराइट करने की सूचना मिलेगी.

कोड की तुलना करने से आपके कोड के साथ वर्तमान कोड दिखाई देगा और आपको मौजूदा परिवर्तनों पर वापस लौटने, प्रत्येक परिवर्तन को व्यक्तिगत रूप से स्वीकार करने या अपने परिवर्तनों का उपयोग करने और मौजूदा सामग्री को अधिलेखित करने की अनुमति मिलेगी.

कोड में विरोधों को मर्ज करें.

आप नवीनतम सामग्री की समीक्षा कर सकेंगे और या तो कोड को मर्ज कर सकेंगे या ओवरराइट कर सकेंगे या परिवर्तनों को त्याग सकेंगे.

ट्यूटोरियल: वेब के लिए Visual Studio Code का उपयोग कर साइट कोड संपादित करें

इस ट्यूटोरियल में, आप वेब के लिए Visual Studio Code का उपयोग कर साइट कोड को संपादित करने के माध्यम से चलते हैं।

चरण 1: वेब के लिए Visual Studio Code का उपयोग करके साइट कोड संपादित करें

1. अपनी साइट को Power Pages डिज़ाइन स्टूडियो

2. सबसे ऊपरी-दाएं कोने पर, कोड में बदलाव करें चुनें

   

3. पुष्टिकरण संवाद से Open Visual Studio Code चुनें।

4. अपने परिवेश क्रेडेंशियल्स का उपयोग करके Visual Studio Code में साइन इन करें.

5. शुरू करने के लिए Power Platform Tools की और बाएं फलक में लोड करने के लिए वेब पेज कोड की प्रतीक्षा करें.

चरण 2: सामग्री और कोड अपडेट करें

1. स्क्रीन के बाईं ओर एक्सप्लोरर संबंधित वेबसाइट कॉन्फ़िगरेशन मेटाडेटा को लोड करता है जिसे वेब के लिए विज़ुअल कोड का उपयोग करके संपादित किया जा सकता है.

   वेब फ़ाइलें दिखाने वाले शीर्षक रहित कार्यस्थान के लिए एक्सप्लोरर मेनू.

2. संबंधित मेटाडेटा फ़ाइलों में परिवर्तन करें और परिवर्तनों को सहेजने के लिए Ctrl+S दबाएँ.

3. डिज़ाइन स्टूडियो में जाएं और अपने वर्तमान डिज़ाइन स्टूडियो सत्र में सभी अपडेट प्राप्त करने के लिए सिंक करें का चयन करें.

   

4. Power Pages साइट पर परिवर्तन देखने के लिए Preview का चयन करें.

वेब या Visual Studio Code डेस्कटॉप के लिए Visual Studio Code का उपयोग करना

उपयोगकर्ता बाहरी उपकरणों का उपयोग करने की आवश्यकता के बिना वेब के लिए Visual Studio Code का उपयोग करके पृष्ठ संपादनों के लिए परिवर्तनों को संपादित, डीबग और पूर्वावलोकन कर सकते हैं। Visual Studio Code Desktop सभी साइट मेटाडेटा को संपादित करने और GitHub, फ्रेमवर्क, और निरंतर एकीकरण/सतत विकास (CI/CD) प्रक्रियाओं के साथ एकीकृत करने के लिए अन्य उन्नत सुविधाएँ प्रदान करता है।

लक्षण	वेब के लिए वीएस कोड	वीएस कोड डेस्कटॉप
नई वेबसाइट कॉन्फ़िगरेशन मेटाडेटा रिकॉर्ड बनाएं	No	वेब पेज, पेज टेम्प्लेट, वेब टेम्प्लेट, सामग्री स्निपेट और वेब फ़ाइलों तक सीमित.
प्रत्यक्ष साइट संपादन	हां	No
साइट मेटाडेटा संपादन	वेब पेजों, सामग्री स्निपेट्स, मूल रूपों, बहु-चरणीय रूपों, सूचियों और वेब टेम्पलेट्स को संपादित करने तक सीमित.	सभी Power Pages मेटाडेटा कॉन्फ़िगरेशन
साइट पूर्वावलोकन	नियोजित	नियोजित
Power Platform सीएलआई सहायता	No	हां
उन्नत CPU और भंडारण-बाउंड वर्कफ़्लो - ReactJS या अन्य फ्रेमवर्क बिल्ड टूल समर्थन	No	हां
कोड चेक-इन, चेक-आउट, संघर्षों का प्रबंधन और मर्ज जैसी क्षमताओं के साथ GitHub एकीकरण।	No	हां

पोर्टल प्रबंधन ऐप में कोड संपादित करना

नोट

• वेब के लिए Visual Studio Code का उपयोग करना वेब के लिए वेबसाइटों को संपादित करने के लिए सरकारी समुदाय क्लाउड (GCC), सरकारी समुदाय क्लाउड (GCC उच्च), और रक्षा विभाग (DoD) में समर्थित नहीं है। इन क्षेत्रों के उपयोगकर्ता अपने परिवर्तन करने के लिए पोर्टल प्रबंधन ऐप का उपयोग कर सकते हैं।

यदि क्षेत्र Web के लिए Visual Studio Code का समर्थन नहीं करता है, तो आदेश पट्टी में कोड संपादक चिह्न / का चयन करने से पोर्टल प्रबंधन ऐप खुल जाएगा.

कोड संपादित करने के लिए संबंधित वेब पेज, बेसिक फॉर्म, मल्टीस्टेप प्रपत्र, सूचियाँ या वेब टेम्पलेट्स रिकॉर्ड पर नेविगेट करें.

Type	कोड स्थान
वेब पेज	वेब पेज रिकॉर्ड चुनें. वेब पेज सामग्री रिकॉर्ड का चयन करें स्थानीयकृत सामग्री अनुभाग। पेज कॉपी को संपादित किया जा सकता है कॉपी (HTML) मैदान पर सामान्य टैब. कस्टम जावास्क्रिप्ट और रिवाज़ CSS कोड को संपादित किया जा सकता है विकसित टैब.
बुनियादी प्रपत्र	मूल प्रपत्र रिकॉर्ड का चयन करें. अतिरिक्त सेटिंग्स टैब पर कस्टम JavaScript संपादित करें.
एकाधिक चरण प्रपत्र	मल्टीस्टेप प्रपत्र रिकॉर्ड का चयन करें.प्रपत्र चरण टैब से बहु-चरणीय प्रपत्र चरण का चयन करें. प्रपत्र विकल्प टैब पर कस्टम जावास्क्रिप्ट संपादित करें.
सूची	सूची रिकॉर्ड का चयन करें. विकल्प टैब पर कस्टम JavaScript संपादित करें.
वेब टेम्पलेट	वेब टेम्पलेट रिकॉर्ड का चयन करें. सामान्य टैब पर स्रोत संपादित करें.

रिकॉर्ड सहेजें, और अपने कोड का परीक्षण करने के लिए अपनी वेबसाइट का पूर्वावलोकन करें.

भी देखें

• Visual Studio Code का उपयोग करें और CLI