Visual Studio कोड में सहेजें TypeScript पर स्वचालित संकलन

इस पोस्ट में हम दो समस्याओं का समाधान होगा: 1) आदेश “tsc” VS एकीकृत टर्मिनल कोड में मान्यता प्राप्त नहीं है, और 2) संकलन फ़ाइल को सहेजते समय स्वचालित रूप से काम नहीं करता “.ts” (प्रकार स्क्रिप्ट).

परिचय

बस प्रासंगिक बनाने के लिए, को टाइपस्क्रिप्ट, नया जो आपको दृढ़ता से टाइप की गई संरचना का उपयोग करके कोड लिखने की अनुमति देता है और इस कोड को शुद्ध जावास्क्रिप्ट के लिए संकलित किया जाता है. पहले से ही विजुअल स्टूडियो कोड माइक्रोसॉफ्ट द्वारा बनाया गया एक क्रॉस-प्लेटफॉर्म कोड एडिटर है.

// इस पोस्ट में उपयोग किए जाने वाले संस्करण:
- विजुअल स्टूडियो (बनाम) कोड, नया साल: संस्करण 1.14.1
- टाइपस्क्रिप्ट, नया जो: संस्करण 2.4.1

यह एक आसान टिप है, लेकिन यदि आप नहीं जानते कि आप क्या कर रहे हैं तो आपको समस्याहो सकती है: मेरा मामला :(D)

स्थापना Node.js और टाइपस्क्रिप्ट

टाइपस्क्रिप्ट स्थापित करने के तरीकों में से एक Node.js पैकेज प्रबंधक के माध्यम से है (एनपीएम – नोड पैकेज मैनेजर), लेकिन इसका उपयोग करने के लिए, आपको पहली बार आवश्यकता है स्थापित करें नोडे.जेएस.

नोड स्थापित करने के बाद, टर्मिनल खोलें (आदेश) और निम्नलिखित आदेश को चलाएं टाइपस्क्रिप्ट स्थापित करें:

एनपीएम इंस्टॉल -टाइपस्क्रिप्ट जी

अभी भी विंडोज टर्मिनल से (या लिनक्स), स्थापित संस्करण की जांच करके टाइपस्क्रिप्ट ऑपरेशन टेस्ट करें. आदेश “tsc” टाइपस्क्रिप्ट कंपाइलर के लिए एक संक्षिप्त शब्द है.

tsc -V

समस्या

समस्या यह है कि आदेश “tsc” विंडोज टर्मिनल पर सामान्य रूप से काम किया, लेकिन एकीकृत टर्मिनल में नहीं है कि दृश्य स्टूडियो कोड के भीतर ही आता है (वीएस कोड), निम्नलिखित त्रुटि प्रदर्शित करना:

'टीएससी' मान्यता प्राप्त नहीं है को एक आंतरिक या बाहरी आदेश,संचालन कार्यक्रम या बैच फ़ाइल.

इसके अलावा, मैं आदेश नहीं चलाना चाहता था “tsc” हर बार जब आप एक फ़ाइल संकलित करना चाहते थे के लिए “.ts” (टाइपस्क्रिप्ट तक विस्तार). तो, बचत करते समय हमेशा स्वचालित संकलन कैसे करें (सीटीआरएल+एस)? यही हम आगे देखेंगे.

अन्य त्रुटियां

इन समस्याओं को हल करने की कोशिश कर रहा, पाया पदों का उपयोग करने के लिए कह रही कंपाइलऑनसेव, लेकिन यह केवल विजुअल स्टूडियो द्वारा समर्थित है 2015 टाइपस्क्रिप्ट के साथ >= 1.8.4 और परमाणु-टाइपस्क्रिप्ट प्लगइन. ie, कोई फायदा नहीं कंपाइलऑनसेव में “tsconfig.json” विजुअल स्टूडियो कोड, नीचे दिया गया कोड काम नहीं करेगा:

{
   "compileOnSave": सच,
   "compilerOptions": {
       "noImplicitAny" : सच
   }
}

समाधान

वीएस कोड इंटीग्रेटेड टर्मिनल में टीएससी

पहले की समस्या का समाधान tsc एकीकृत दृश्य स्टूडियो कोड टर्मिनल में मान्यता प्राप्त नहीं किया जा सकता है (वीएस कोड).

कुछ पोस्ट पथ पर्यावरण चर में टीएससी या एनपीएम के रास्ते डालने का सुझाव दें, लेकिन इसे हल करने का एक आसान तरीका ऐसा करके था की स्थापना “विजुअल स्टूडियो के लिए टाइपस्क्रिप्ट, जो वीएस कोड के लिए भी संगत है.

अब हां, स्थापना के बाद, एकीकृत दृश्य स्टूडियो कोड टर्मिनल खोलें, टाइपिंग:

// दृश्य स्टूडियो कोड एकीकृत टर्मिनल के लिए हॉटकी:
Ctrl+`
// या दृश्य स्टूडियो कोड में टर्मिनल खोलने के लिए मेनू का उपयोग करें:
देखें, नया दृश्य > एकीकृत टर्मिनल

जांच करने की कोशिश करें टाइपस्क्रिप्ट संस्करण एकीकृत वीएस कोड टर्मिनल में प्रत्यक्ष (विंडोज टर्मिनल में नहीं), और यह शायद काम करने जा रहा है:

tsc -V

फ़ाइल को सहेजते समय स्वचालित संकलन .ts

वीएस कोड टर्मिनल के माध्यम से, अपनी स्क्रिप्ट निर्देशिका में खुद को रखें (.ts), उदाहरण के लिए:

सी सीडी:\wamp64 wwwts

फ़ाइल बनाएं tsconfig.json वीएस कोड टर्मिनल में टाइपिंग:

tsc --Init

ध्यान दें कि एक फ़ाइल “tsconfig.json” में बनाया जाएगा “(C):\wamp64 wwwts” (वर्तमान निर्देशिका).

खोलें tsconfig.json और विकल्प सक्षम “स्रोतमानचित्र”: सच, और संशोधन को बचाने के लिए, इस तरह हो रही है:

  "compilerOptions": {
    /* बुनियादी विकल्प */
    "target": "es5",                          /* ईसीएमस्क्रिप्ट टारगेट वर्जन निर्दिष्ट करें: 'ES3' (चूक), 'ES5', 'ES2015', 'ES2016', 'ES2017', या 'ESNEXT'. */
    "module": "commonjs",                     /* मॉड्यूल कोड जनरेशन निर्दिष्ट करें: 'आम जेएस', 'एएमडी', 'सिस्टम', 'उम्मेद', 'es2015', या 'ESNext'. */
    // "lib": [],                             /* संकलन में शामिल होने के लिए पुस्तकालय फ़ाइलों को निर्दिष्ट करें:  */
    // "allowJs": सच,                       /* जावास्क्रिप्ट फ़ाइलों को संकलित करने की अनुमति दें. */
    // "checkJs": सच,                       /* .js फ़ाइलों में त्रुटियों की रिपोर्ट करें. */
    // "jsx": "preserve",                     /* जेएसएक्स कोड जनरेशन निर्दिष्ट करें: 'संरक्षित', 'प्रतिक्रिया-देशी', या 'प्रतिक्रिया'. */
    // "declaration": सच,                   /* इसी '.d.ts' फ़ाइल उत्पन्न करता है. */
    "sourceMap": सच,                     /* इसी '.मानचित्र' फ़ाइल उत्पन्न करता है. */
    // "outFile": "./",                       /* एकल फ़ाइल के लिए आउटपुट को कॉन्टेनेट और उत्सर्जित करें. */
    // "outDir": "./",                        /* निर्देशिका को आउटपुट संरचना रीडायरेक्ट करें. */
    // "rootDir": "./",                       /* इनपुट फ़ाइलों की रूट निर्देशिका निर्दिष्ट करना. के साथ आउटपुट निर्देशिका संरचना को नियंत्रित करने के लिए उपयोग करें -outDir. */
    ... जारीिया ...

प्रोंटो, agora é só ir कोई टर्मिनल नहीं बनाम कोड ई डिजिटायर ओ comando:

tsc -w

एस्टे कोमांडो फिका मॉनिटरंडो (आउ वेंडो, पोर आइसो “w” डी वॉच) एक aplicação ई qualquer alteração कोई arquivos .ts, क्वांडो साल्वे, में तत्काल निर्माण कर देगा .जे एस.

बस!

कुल हिट्स: 9221

कोई जवाब दो

आपका ईमेल पता प्रकाशित नहीं किया जाएगा. आवश्यक फ़ील्ड के साथ चिह्नित कर रहे हैं *