คอมไพล์อัตโนมัติบนบันทึก TypeScript ใน Visual Studio รหัส

ในโพสต์นี้ เราจะแก้ปัญหาที่สอง: 1) คำสั่ง “TSC” ไม่รู้จักรหัสเทอร์มินัลรวม VS, และ 2) รวบรวมทำงานโดยอัตโนมัติเมื่อบันทึกแฟ้ม “.TS” (ชนิดของสคริปต์).

แนะนำ

เพียงเพื่อ contextualize, การ เรียงพิมพ์ใหม่ซึ่ง ช่วยให้คุณสามารถเขียนรหัสโดยใช้โครงสร้างที่พิมพ์อย่างมากและมีรหัสนี้รวบรวมสำหรับจาวาสคริปต์บริสุทธิ์. แล้ว รหัส Studio ภาพ เป็นโปรแกรมแก้ไขรหัสข้ามแพลตฟอร์มที่สร้างขึ้นโดยไมโครซอฟท์.

// รุ่นที่ใช้ในการโพสต์นี้:
- สตูดิโอภาพ (กับ) รหัส, ปีใหม่: เวอร์ชัน 1.14.1
- ใหม่ซึ่ง: เวอร์ชัน 2.4.1

นี่คือเคล็ดลับง่ายๆ, แต่คุณอาจจะมีปัญหาถ้าคุณไม่ทราบว่าสิ่งที่คุณกำลังทำ: กรณีของฉัน :(D)

โหนดการติดตั้ง js และการพิมพ์

วิธีใดวิธีหนึ่งในการติดตั้งการพิมพ์คือผ่านโปรแกรมจัดการแพคเกจ node.js (Npm – ตัวจัดการแพคเกจโหนด), แต่จะใช้มัน, คุณต้องการครั้งแรก ติดตั้ง Node.js.

หลังจากติดตั้งโหนด, เปิดเทอร์มินัล (คำสั่ง) และเรียกใช้คำสั่งต่อไปนี้เพื่อ ติดตั้ง:

การติดตั้ง npm -การเรียงพิมพ์

ยังคงโดยขั้วต่อของ Windows (หรือลินุกซ์), ทำการทดสอบการดำเนินการพิมพ์โดยการตรวจสอบรุ่นที่ติดตั้ง. คำสั่ง “TSC” เป็นตัวย่อสำหรับการเรียงพิมพ์คอมไพเลอร์.

TSC -v

ปัญหา

ปัญหาคือว่าคำสั่ง “TSC” ทำงานตามปกติบนขั้วต่อของ Windows, แต่ไม่ได้อยู่ในขั้วรวมที่มาภายใน Visual Studio รหัสตัวเอง (VS รหัส), แสดงข้อผิดพลาดต่อไปนี้:

tsc ไม่รู้จัก การ คำสั่งภายในหรือภายนอก,โปรแกรมหรือชุดงานที่ยังไม่ได้ แฟ้ม.

นอกจากนี้, ฉันไม่ต้องการเรียกใช้คำสั่ง “TSC” สำหรับทุกครั้งที่คุณต้องการที่จะรวบรวมไฟล์ “.TS” (นามสกุล). ดังนั้น, วิธีการทำคอมไพล์อัตโนมัติเสมอเมื่อบันทึก (CTRL + S)? นั่นคือสิ่งที่เราจะเห็นอยู่ข้างหน้า.

Outros erros

พยายามแก้ปัญหาเหล่านี้, พบว่าโพสต์ที่บอกให้ใช้ คอมไพลเลอร์บันทึก, แต่นี้ได้รับการสนับสนุนโดย Visual Studio เท่านั้น 2015 ด้วยการพิมพ์ > = 1.8.4 และปลั๊กอินอะตอม. IE, ไม่ใช้ คอมไพลเลอร์บันทึก นิ้ว “json” รหัส studio ภาพ, โค้ดด้านล่างจะไม่ทำงาน:

{
   "compileOnSave": จริง,
   "compilerOptions": {
       "noImplicitAny" : จริง
   }
}

วิธีการแก้ไขปัญหา

TSC ในอาคารผู้โดยสารรวมรหัส

ขั้นแรกให้แก้ปัญหาของ TSC ไม่รู้จักในเทอร์มินัลรหัส Visual Studio แบบรวม (VS รหัส).

บาง โพสต์ แนะนำให้วางเส้นทางของ tsc หรือ npm ในตัวแปรสภาวะแวดล้อม PATH, แต่วิธีง่ายๆในการแก้ปัญหานี้คือการทำ การติดตั้ง “การพิมพ์สำหรับ Visual Studio, ซึ่งเข้ากันได้กับรหัสเปรียบเทียบด้วย.

ใช่ตอนนี้, หลังการติดตั้ง, เปิดเทอร์มินัลรหัส Visual Studio แบบรวม, พิมพ์:

// คีย์ลัดสำหรับเทอร์มินัลแบบรวมของรหัส studio ที่มองเห็น:
Ctrl+`
// หรือใช้เมนูเพื่อเปิดเทอร์มินัลในรหัส Visual Studio:
ดู, มุมมองใหม่ > เทอร์มินัลแบบรวม

พยายามตรวจสอบ เวอร์ชัน โดยตรงในการรวมกับเทอร์มินัลรหัส (ไม่ได้อยู่ในเทอร์มินัลของ Windows), และมันคงจะทำงาน:

TSC -v

การคอมไพล์อัตโนมัติเมื่อบันทึกแฟ้ม .TS

ผ่านเทอร์มินัลรหัส VS วางตำแหน่งตัวเองในไดเรกทอรีสคริปต์ของคุณ (.TS), ตัวอย่างเช่น:

ซีดีซี:\wamp64wwwts

สร้างไฟล์ json พิมพ์ในเทอร์มินัลรหัส VS:

TSC --init

โปรดทราบว่าแฟ้ม “json” จะถูกสร้างขึ้นใน “(C):\wamp64wwwts” (ไดเรกทอรีปัจจุบัน).

เปิด json และเปิดใช้งานตัวเลือก “เอชเอ”: จริง, และบันทึกการปรับเปลี่ยน, ดังนั้น:

  "compilerOptions": {
    /* ตัวเลือกพื้นฐาน */
    "target": "es5",                          /* ระบุเวอร์ชันเป้าหมายของ ECMAScript: 'ES3' (ค่าเริ่มต้น), 'ES5', 'ES2015', 'ES2016', 'ES2017', หรือ ' ESNEXT '. */
    "module": "commonjs",                     /* ระบุการสร้างรหัสโมดูล: ธรรมดา, amd, ระบบ, ' umd ', 'es2015', หรือ ' ESNext '. */
    // "lib": [],                             /* ระบุแฟ้มไลบรารีที่จะรวมไว้ในการคอมไพล์:  */
    // "allowJs": จริง,                       /* อนุญาตให้คอมไพล์ไฟล์ javascript. */
    // "checkJs": จริง,                       /* รายงานข้อผิดพลาดในแฟ้ม. js. */
    // "jsx": "preserve",                     /* ระบุการสร้างรหัส JSX: รักษา, ' ตอบสนอง-พื้นเมือง ', หรือ ' ตอบสนอง '. */
    // "declaration": จริง,                   /* สร้างแฟ้มที่สอดคล้องกัน ' d. ts '. */
    "sourceMap": จริง,                     /* สร้างที่สอดคล้องกันของไฟล์. map. */
    // "outFile": "./",                       /* เชื่อมต่อและปล่อยเอาต์พุตไปยังไฟล์เดียว. */
    // "outDir": "./",                        /* เปลี่ยนเส้นทางโครงสร้างเอาต์พุตไปยังไดเร็กทอรี. */
    // "rootDir": "./",                       /* ระบุไดเรกทอรีรากของไฟล์อินพุต. ใช้เพื่อควบคุมโครงสร้างไดเร็กทอรีเอาต์พุตที่มี--outDir. */
    ... อย่างต่อเนื่อง ...

พร้อม, อโกราé só ir ไม่มีเทอร์มินัล VS รหัส digitar o comando:

TSC -w

เอสเตโก fica monitorando (ou vendo, ดังนั้น “w” de นาฬิกา) ไม่มีการใช้ความสามารถ .TS, ในการ, ผมยาว .Js.

นั่นมัน!

จำนวนผู้เข้าชม: 9306

ทิ้งคำตอบไว้

อีเมลของคุณจะไม่ถูกเผยแพร่. ฟิลด์ต้องมีเครื่องหมาย *