Αυτόματη μεταγλώττιση κατά την αποθήκευση γραφομηχανή σε κώδικα του Visual Studio

Σε αυτό το post θα λύσουμε δύο προβλήματα: 1) Εντολή “Tsc” δεν αναγνωρίζεται στο ενσωματωμένο εναντίον τερματικό κώδικα, και 2) η δημιουργία δεν λειτουργεί αυτόματα κατά την αποθήκευση αρχείου “.Ts” (Τύπος δέσμης ενεργειών).

Εισαγωγή

Απλά για να συμφραζόμενα, ο Γραφομηχανή σας επιτρέπει να γράψετε κώδικα χρησιμοποιώντας μια έντονα δακτυλογραφημένη δομή και να έχετε αυτόν τον κώδικα μεταγλωττιστεί για καθαρή JavaScript. ο Κωδικός οπτικού στούντιο Είναι ένας επεξεργαστής κώδικα μεταξύ πλατφορμών που δημιουργήθηκε από τη Microsoft.

// Εκδόσεις που χρησιμοποιούνται σε αυτήν την ανάρτηση:
- Οπτικό Στούντιο (Vs) κώδικας: εκδοχή 1.14.1
- Γραφομηχανή: εκδοχή 2.4.1

Αυτό είναι εύκολο φιλοδώρημα., αλλά μπορεί να έχεις προβλήματα αν δεν ξέρεις τι κάνεις.: η υπόθεσή μου :(Δ)

Εγκατάσταση κόμβων.js και TypeScript

Ένας από τους τρόπους εγκατάστασης του TypeScript είναι μέσω της διαχείρισης πακέτων του κόμβου.js (NPM – Διαχείριση πακέτων κόμβων), αλλά να το χρησιμοποιήσεις., που χρειάζεστε για πρώτη φορά εγκαταστήστε το Κόμβος.js.

Μετά την εγκατάσταση του κόμβου, Ανοίξτε το τερματικό (Εντολή) και εκτελέστε την ακόλουθη εντολή για να Εγκατάσταση typeScript:

εγκατάσταση npm -γραφομηχανή g

Ακόμα μέσω του τερματικού των Windows (ή Linux), Ελέγξτε την πληκτρολόγηση ελέγχοντας την εγκατεστημένη έκδοση. Η εντολή “Tsc” είναι ακρωνύμιο για μεταγλωττιστή TypeScript.

Tsc -V

Το πρόβλημα

Το πρόβλημα είναι ότι η εντολή “Tsc” Λειτουργεί κανονικά στο τερματικό των Windows, αλλά όχι στο ενσωματωμένο τερματικό που εμπίπτει στον ίδιο τον Κώδικα του Visual Studio (Κωδικός VS), Εμφάνιση του ακόλουθου σφάλματος:

«TSC» δεν αναγνωρίζεται το Εσωτερική ή εξωτερική εντολή,λειτουργικό πρόγραμμα ή παρτίδα αρχείο.

Επιπλέον, Δεν ήθελα να εκτελέσω την εντολή. “Tsc” Για κάθε φορά που θέλετε να μεταγλωττίσετε ένα αρχείο “.Ts” (Επέκταση για typeScript). Έτσι, Όπως πάντα κάνετε αυτόματη συλλογή κατά την αποθήκευση (CTRL+S)? Αυτό θα δούμε μετά..

Έξω από το έρρος

Προσπαθώ να λύσω αυτά τα προβλήματα., Βρέθηκαν δημοσιεύσεις που λένε να χρησιμοποιήσετε το μεταγλώττισηΑναύξεση, Αλλά αυτό υποστηρίζεται μόνο από το Visual Studio 2015 Με > TypeScript= 1.8.4 και προσθήκη γραφομηχανής ατόμων. IE, δεν χρησιμοποιείται για χρήση μεταγλώττισηΑναύξεση μέσα “tsconfig.json” από τον κώδικα του Οπτικού Στούντιο, Ο παρακάτω κώδικας δεν θα λειτουργήσει:

{
   "compileOnSave": αλήθεια,
   "compilerOptions": {
       "noImplicitAny" : αλήθεια
   }
}

Λύση

TSC σε vs κώδικα ενσωματωμένο τερματικό

Πρώτα ας λύσουμε το πρόβλημα του Tsc δεν αναγνωρίζεται στον ενσωματωμένο τερματικό κώδικα visual studio (Κωδικός VS).

μερικοί Θέσεις Προτείνετε να τοποθετήσετε τη διαδρομή TSC ή NPM στη μεταβλητή περιβάλλοντος PATH, αλλά ένας εύκολος τρόπος για να λυθεί αυτό ήταν κάνοντας εγκατάσταση του “Γραφομηχανή για οπτικό στούντιο, που είναι συμβατό και για τον κώδικα VS.

Τώρα ναι, μετά την εγκατάσταση, Ανοίξτε το ενσωματωμένο τερματικό κώδικα οπτικού στούντιο, δακτυλογραφία:

// Hotkey για το ενσωματωμένο τερματικό του κώδικα οπτικού στούντιο:
ctrl+`
// Εναλλακτικά, χρησιμοποιήστε το Μενού για να ανοίξετε το τερματικό στον Κώδικα του Visual Studio:
άποψη > Ενσωματωμένο τερματικό

Δοκιμάστε να ελέγξετε το Πληκτρολογήστε την έκδοση απευθείας στο ενσωματωμένο τερματικό κώδικα VS (Όχι στο τερματικό των Windows), και μάλλον θα δουλέψει.:

Tsc -V

Αυτόματη συλλογή κατά την αποθήκευση ενός αρχείου .Ts

Vs Code τερματικό τοποθετείται στον κατάλογο δέσμης ενεργειών σας (.Ts), για παράδειγμα:

Cd C:\WAMP64wwwts

Δημιουργία του αρχείου tsconfig.json πληκτρολογώντας στο τερματικό κώδικα VS:

Tsc --Init

Σημειώστε ότι ένα αρχείο “tsconfig.json” θα δημιουργηθεί σε “(Γ):\WAMP64wwwts” (τρέχων κατάλογος).

Ανοίξτε το tsconfig.json και ενεργοποιήστε την επιλογή “χάρτης προέλευσης”: αλήθεια, και αποθηκεύστε την τροποποίηση, να πάρει έτσι:

  "compilerOptions": {
    /* Βασικές επιλογές */
    "target": "es5",                          /* Καθορισμός έκδοσης προορισμού ECMAScript: «ES3» (Προεπιλογή), «ES5», «ES2015», «ES2016», «ES2017», ή «ESNEXT». */
    "module": "commonjs",                     /* Καθορισμός δημιουργίας κώδικα λειτουργικής μονάδας: «κοινοί δεκ», «amd», «σύστημα», "Ουμντ", «ES2015», ή «ESNext». */
    // "lib": [],                             /* Καθορισμός αρχείων βιβλιοθήκης που θα συμπεριληφθούν στη συλλογή:  */
    // "allowJs": αλήθεια,                       /* Να επιτρέπεται η μεταγλώττιση αρχείων javascript. */
    // "checkJs": αλήθεια,                       /* Αναφορά σφαλμάτων σε αρχεία .js. */
    // "jsx": "preserve",                     /* Καθορισμός δημιουργίας κώδικα JSX: «διατήρηση», «αντίδραση-εγγενής», ή να «αντιδράσουν». */
    // "declaration": αλήθεια,                   /* Δημιουργεί το αντίστοιχο αρχείο '.d.ts'. */
    "sourceMap": αλήθεια,                     /* Δημιουργεί το αντίστοιχο αρχείο '.map'. */
    // "outFile": "./",                       /* Συνεννοηση και εκπεμπόμενο αποτέλεσμα σε ένα μόνο αρχείο. */
    // "outDir": "./",                        /* Ανακατεύθυνση δομής εξόδου στον κατάλογο. */
    // "rootDir": "./",                       /* Καθορισμός του ριζικού καταλόγου των αρχείων εισόδου. Χρήση για τον έλεγχο της δομής του καταλόγου εξόδου με το --outDir. */
    ... συνέχεια ...

Έτοιμο, agora é só ir κανένα τερματικό δεν κάνει κώδικα VS e digitar o comando:

Tsc -w

Este comando φίκα οθόνηando (ου βεντό, πορ ισό “w” de ρολόι) ένα aplicação equalquer alteração χωρίς αρκίβος .Ts, κουάντο σάλβο, Φαρά μια imediata κομπιλάσο em .js.

Αυτό είναι, αυτό είναι.!

Σύνολο επισκέψεων: 10691

Αφήνω μια απάντηση

Η διεύθυνση email σας δεν θα δημοσιευθεί. Τα απαιτούμενα πεδία σημειώνονται με *