दृश्य स्टूडियो कोड सहेजें पर संकलित करें

Question

मैं सहेजने पर टाइपस्क्रिप्ट फ़ाइलों को संकलित करने के लिए विज़ुअल स्टूडियो कोड कैसे कॉन्फ़िगर कर सकता हूं?

मैं देखता हूं कि फोकस का उपयोग करके फ़ाइल बनाने के लिए किसी कार्य को कॉन्फ़िगर करना संभव है ${file} कि एक तर्क रूप । लेकिन मैं चाहूंगा कि यह तब किया जाए जब कोई फ़ाइल बच जाए।

Comments

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

— Ciantic

यह एक अच्छा सुझाव है। मैंने उस सुविधा को लागू करने के लिए एक आंतरिक कार्य आइटम खोला।

— डिर्क बाऊमर

यहाँ कार्य आइटम है: visualstudio.uservoice.com/forums/293070-visual-studio-code/…

— पॉवेल क्वैरींग

क्या आप कोई उत्तर दे सकते हैं

— Seega

tsc <filename> --watchटर्मिनल में टाइप करें

— Daniel C Jacobs

Answer 1

मई 2018 अपडेट:

मई 2018 तक आपको tsconfig.jsonकार्य चलाने वाले को मैन्युअल रूप से बनाने या कॉन्फ़िगर करने की आवश्यकता नहीं है ।

1. फ़ाइल tsc --initबनाने के लिए अपने प्रोजेक्ट फ़ोल्डर में चलाएं tsconfig.json(यदि आपके पास पहले से कोई नहीं है)।
2. Ctrl+Shift+BVS कोड में कार्यों की एक सूची खोलने के लिए दबाएँ और चयन करें tsc: watch - tsconfig.json।
3. किया हुआ! आपका प्रोजेक्ट हर फ़ाइल सेव पर recompiled है।

आप tsconfig.jsonअपने कार्यक्षेत्र में कई फाइलें रख सकते हैं और यदि चाहें तो एक साथ कई संकलन चला सकते हैं (उदाहरण के लिए अलग से बैकएंड और बैकएंड)।

मूल उत्तर:

आप इसे बिल्ड कमांड के साथ कर सकते हैं:

के tsconfig.jsonसाथ एक सरल बनाएँ "watch": true(यह संकलक को सभी संकलित फ़ाइलों को देखने का निर्देश देगा):

{
    "compilerOptions": {
        "target": "es5",
        "out": "js/script.js",
        "watch": true
    }
}

ध्यान दें कि filesसरणी को छोड़ा गया है, डिफ़ॉल्ट रूप *.tsसे सभी उपनिर्देशिकाओं की सभी फ़ाइलों को संकलित किया जाएगा। आप कोई अन्य पैरामीटर या परिवर्तन प्रदान कर सकते हैं target/ out, बस यह सुनिश्चित कर लें कि watchसेट किया गया हैtrue ।

अपने कार्य को कॉन्फ़िगर करें ( Ctrl+Shift+P-> Configure Task Runner):

{
    "version": "0.1.0",
    "command": "tsc",
    "showOutput": "silent",
    "isShellCommand": true,
    "problemMatcher": "$tsc"
}

अब Ctrl+Shift+Bप्रोजेक्ट बनाने के लिए दबाएँ । आपको आउटपुट विंडो ( Ctrl+Shift+U) में कंपाइलर आउटपुट दिखाई देगा ।

संकलक सहेजे जाने पर स्वचालित रूप से फ़ाइलों को संकलित करेगा। संकलन बंद करने के लिए, Ctrl+P-> दबाएँ> Tasks: Terminate Running Task

मैंने विशेष रूप से इस उत्तर के लिए एक प्रोजेक्ट टेम्पलेट बनाया है: typescript-node-basic

Comments

इसके साथ समस्या यह है कि यह एक कार्य को चालू रखता है, वीएस कोड जानता है कि जब मैं एक कम फ़ाइल, या टीएस फ़ाइल को सहेजता हूं, तो यह बेमानी लगता है कि एक और चौकीदार है क्योंकि हम आसानी से "ऑन सेव" कमांड को हुक नहीं कर सकते हैं। मुझे आश्चर्य है कि अगर किसी ने पहले से ही कुछ चलाने के लिए एक एक्सटेंशन किया है जब विशिष्ट फ़िलाटाइप को बचाया जाता है, तो यह बहुत बेहतर होगा।

— Ciantic

वीसी कोड को एक्सटेंशन सपोर्ट मिलने से पहले यह जवाब लिखा गया था। वहाँ सिर्फ एक एक्सटेंशन है जिसके बारे में आप बात कर रहे हैं, लेकिन यह वास्तव में टाइपस्क्रिप्ट कंपाइलर वॉच फ़ाइलों और केवल बदले हुए लोगों को फिर से संकलित करने के लिए तेज़ है।

— zlumer

@Kododoko bc compileOnSave केवल वीएस 2015 में काम करता है, कोड नहीं

— स्कैप

@ एसस्केप यह वीएस कोड में भी काम करता है, यदि आप "-w" को कमांड लाइन के तर्कों में जोड़ते हैं।

— कोकोडोको

वास्तव में VSCode आपके लिए कॉन्फ़िगरेशन सामान करता है: On configure task: VSCode ऑटो-डिटेक्ट करेगा कि एक tsconfig.jsonऔर एक प्रॉम्प्ट है जहाँ आप tsc: build - tsconfig.jsonया तो चुन सकते हैं tsc: watch - tsconfig.json। उत्तरार्द्ध चुनें और VSCode tasks.jsonफ़ाइल उत्पन्न करता है (यदि पहले नहीं था) और आपके लिए सही कॉन्फ़िगरेशन जोड़ता है।

— डैनियल

Answer 2

यदि आप CTRL+ SHIFT+ का उपयोग करने से बचना चाहते हैं Bऔर इसके बजाय यह चाहते हैं कि किसी भी समय जब आप किसी फ़ाइल को सहेजते हैं, तो आप कमांड को उसी शॉर्ट-कट से बचा सकते हैं जैसे कि सेव एक्शन:

[
    {
        "key": "ctrl+s",          
        "command": "workbench.action.tasks.build" 
    }
]

यह आपके keybindings.json में चला जाता है - (फ़ाइल -> प्राथमिकताएँ -> कीबोर्ड शॉर्टकट का उपयोग करके यह)।

Comments

यह केवल उपरोक्त उत्तर के लिए एक ऐड-ऑन होना चाहिए (संपादित)। इससे आज मेरा काम बन गया!

— वृषावस्था १०'१६

अच्छा जवाब ...? व्हाट्स को कैसे फ़िल्टर किया जाएगा लॉन्च किया जाएगा ... उदाहरण के लिए: मैं केवल कमांड निष्पादित करना चाहता हूं यदि फ़ाइल में HTML एक्सटेंशन है ???

— ZEE

@ZEE हाँ, यह संभव है, कृपया कीबाइंडिंग के लिए दस्तावेज के इस बिट को देखें और संक्षिप्त उदाहरण के लिए httpete का जवाब भी दें । विशेष रूप से, whenहालत 'का उपयोग editorLangIdआयात का है।

— BobChao87

Answer 3

अगर Ctrl+ Shiftदब रहा हैB बहुत प्रयास लगता है, तो आप "ऑटो सेव" (फाइल> ऑटो सेव) पर स्विच कर सकते हैं और अपने प्रोजेक्ट की सभी फाइलों को देखने के लिए, और स्वचालित रूप से TSC चलाने के लिए NodeJS का उपयोग कर सकते हैं।

एक Node.JS कमांड प्रॉम्प्ट खोलें, निर्देशिका को अपने प्रोजेक्ट रूट फ़ोल्डर में बदलें और निम्न टाइप करें;

tsc -w

और हे प्रीस्टो, हर बार वीएस कोड ऑटो फ़ाइल को बचाता है, टीएससी इसे फिर से जोड़ देगा।

इस तकनीक का उल्लेख एक ब्लॉग पोस्ट में किया गया है;

http://www.typescriptguy.com/getting-started/angularjs-typescript/

नीचे स्क्रॉल करें "सहेजें पर संकलित करें"

Answer 4

एक एक्सटेंशन लिखें

अब चूंकि vscode एक्स्टेंसिबल है, इसलिए एक्सटेंशन के माध्यम से सेव इवेंट पर हुक करना संभव है। VSCode के लिए लेखन एक्सटेंशन का एक अच्छा अवलोकन यहाँ पाया जा सकता है: https://code.visualstudio.com/docs/extensions/overview

यहां एक सरल उदाहरण है कि echo $filepathएक संदेश संवाद में बस कॉल और आउटपुट स्टडआउट हैं:

import * as vscode from 'vscode';
import {exec} from 'child_process';

export function activate(context: vscode.ExtensionContext) {

    vscode.window.showInformationMessage('Run command on save enabled.');

    var cmd = vscode.commands.registerCommand('extension.executeOnSave', () => {

        var onSave = vscode.workspace.onDidSaveTextDocument((e: vscode.TextDocument) => {

            // execute some child process on save
            var child = exec('echo ' + e.fileName);
            child.stdout.on('data', (data) => {
                vscode.window.showInformationMessage(data);
            });
        });
        context.subscriptions.push(onSave);
    });

    context.subscriptions.push(cmd);
}

(इस एसओ प्रश्न पर भी संदर्भित: https://stackoverflow.com/a/33843805/20489 )

मौजूदा VSCode एक्सटेंशन

यदि आप किसी मौजूदा एक्सटेंशन को स्थापित करना चाहते हैं, तो यहां एक है जिसे मैंने VSCode गैलरी में उपलब्ध लिखा है: https://marketplace.visualstudio.com/items/emeraldwalk.RunOnSave

स्रोत कोड यहां उपलब्ध है: https://github.com/emeraldwalk/vscode-runonsave/blob/master/src/extension.ts

Answer 5

मुझे जो व्यवहार चाहिए, उसे पाने के लिए मैंने बहुत संघर्ष किया है। यह टाइप करने के लिए टाइपस्क्रिप्ट फाइलें पाने के लिए सबसे आसान और सबसे अच्छा तरीका है, मुझे जो कॉन्फ़िगरेशन चाहिए, वह केवल THIS फाइल (सेव की गई फाइल) है। यह एक कार्य है ।json और एक keybindings.json।

Comments

: आलसी डेवलपर्स के लिए { "version": "0.1.0", "command": "tsc", "isShellCommand": true, "args": ["--module","amd","--target","ES5","${file}"], "showOutput": "silent", "problemMatcher": "$tsc" } keybingings:{ "key": "cmd+s", "command": "workbench.action.tasks.build", "when":"editorTextFocus && editorLangId == 'typescript'" }

— दारिउज़ Filipiak

मैं Visual Studio कोड के टाइपस्क्रिप्ट 1.8.X और 1.0 के नवीनतम संस्करण के साथ कह सकता हूं, मैंने जो तकनीक दिखाई वह अप्रचलित है। बस अपनी परियोजना के मूल स्तर पर एक tsconfig.json का उपयोग करें और सभी सिंटैक्स जाँच के लिए स्वचालित रूप से काम करता है। फिर स्वचालित रूप से देखने / फिर से देखने के लिए कमांड लाइन पर tsc -w का उपयोग करें। {"संकलनकर्ता": {"मॉड्यूल": "एमड", "लक्ष्य": "ES5", "noImplicitAny": असत्य, "निष्कासन": सत्य, "preserveConstEnums:": true, "inlineSourceMap": true}, "बहिष्कृत" : ["नोड_मॉड्यूल्स"]}

— httpete

Answer 6

एकल फ़ाइल बनाने के बजाय, Ctrl + S को ट्रिगर करने के लिए बांधें जिससे मैं निम्नलिखित कार्यों का उपयोग करके घड़ी मोड में tsc शुरू करने की सलाह दूंगा। json file:

{
    "version": "0.1.0",
    "command": "tsc",
    "isShellCommand": true,
    "args": ["-w", "-p", "."],
    "showOutput": "silent",
    "isWatching": true,
    "problemMatcher": "$tsc-watch"
}

यह एक बार पूरे प्रोजेक्ट का निर्माण करेगा और फिर उन फाइलों को फिर से बनाएगा जो उन्हें सहेजने के तरीके से स्वतंत्र हो जाती हैं (Ctrl + S, ऑटो सेव, ...)

Comments

इनमें से कुछ प्रॉम्प्ट को हटा दिया गया है।

— Ebru Güngör

Answer 7

अपडेट किया गया

अपने में tsconfig.json

"compileOnSave": true, // change to true

यदि समस्या अभी भी है, तो निम्न में से कोई भी करें:

अपने संपादक को पुनरारंभ करें या किसी भी मार्ग को बदलें, इसे वापस लौटाएं और एप्लिकेशन को सहेजें। यह संकलन शुरू कर देंगे। अर्थात

const routes: Routes = [
  {
    path: '', // i.e. remove , (comma) and then insert it and save, it'll start compile
    component: VersionsComponent
  }
]

Comments

क्या आजकल वीएस कोड उस सुविधा का समर्थन करता है? पिछली बार जब मैंने जाँच की, तो यह बच नहीं सका और मुझे इसे करने के लिए एक्सटेंशन का उपयोग करने की आवश्यकता पड़ी।

— अंती

अब यह समर्थन करता है

— WasiF

Answer 8

मैंने gulp-typecript और incremental build का उपयोग करके gulp टास्क के साथ save पर संकलित किया । इससे आप जो चाहें संकलन को नियंत्रित कर सकते हैं। मेरे चर tsServerProject पर ध्यान दें, मेरी वास्तविक परियोजना में मेरे पास tsClientProject भी है क्योंकि मैं अपने क्लाइंट कोड को निर्दिष्ट मॉड्यूल के साथ संकलित करना चाहता हूं। जैसा कि मुझे पता है कि आप इसे बनाम कोड के साथ नहीं कर सकते।

var gulp = require('gulp'),
    ts = require('gulp-typescript'),
    sourcemaps = require('gulp-sourcemaps');

var tsServerProject = ts.createProject({
   declarationFiles: false,
   noExternalResolve: false,
   module: 'commonjs',
   target: 'ES5'
});

var srcServer = 'src/server/**/*.ts'

gulp.task('watch-server', ['compile-server'], watchServer);
gulp.task('compile-server', compileServer);

function watchServer(params) {
   gulp.watch(srcServer, ['compile-server']);
}

function compileServer(params) {
   var tsResult = gulp.src(srcServer)
      .pipe(sourcemaps.init())
      .pipe(ts(tsServerProject));

   return tsResult.js
      .pipe(sourcemaps.write('./source-maps'))
      .pipe(gulp.dest('src/server/'));

}

Answer 9

प्राथमिकताएँ चुनें -> कार्यक्षेत्र सेटिंग्स और निम्नलिखित कोड जोड़ें, यदि आपके पास हॉट रीलोड सक्षम है, तो परिवर्तन तुरंत ब्राउज़र में दिखाई देते हैं

{
    "files.exclude": {
        "**/.git": true,
        "**/.DS_Store": true,
        "**/*.js.map": true,
        "**/*.js": {"when": "$(basename).ts"}
    },
    "files.autoSave": "afterDelay",
    "files.autoSaveDelay": 1000
}

Answer 10

इस मुद्दे की वर्तमान स्थिति:

https://github.com/Microsoft/vscode/issues/7015

Answer 11

मैं Visual Studio कोड के टाइपस्क्रिप्ट 1.8.X और 1.0 के नवीनतम संस्करण के साथ कह सकता हूं, मैंने जो तकनीक दिखाई वह अप्रचलित है। बस अपनी परियोजना के मूल स्तर पर एक tsconfig.json का उपयोग करें और सभी सिंटैक्स जाँच के लिए स्वचालित रूप से काम करता है। फिर स्वचालित रूप से देखने / फिर से देखने के लिए कमांड लाइन पर tsc -w का उपयोग करें। यह tsconfig.json फ़ाइल को ts संकलन के विकल्पों और विन्यास के लिए पढ़ेगा।

// tsconfig.json

{
    "compilerOptions": {
        "module": "amd",
        "target": "ES5",
        "noImplicitAny": false,
        "removeComments": true,
        "preserveConstEnums": true,
        "inlineSourceMap": true
    },
    "exclude": [ "node_modules" ]
} 

Answer 12

सेव पर ऑटो-कंपाइल करने का एक बहुत ही सरल तरीका टर्मिनल में निम्नलिखित टाइप करना है:

tsc main --watch

main.tsआपका फ़ाइल नाम कहाँ है

ध्यान दें, यह केवल तब तक चलेगा जब तक यह टर्मिनल खुला है, लेकिन यह एक बहुत ही सरल समाधान है जिसे आप किसी प्रोग्राम को संपादित करते समय चला सकते हैं।

Comments

tsc -wभी परियोजना में सभी टाइपप्रति फ़ाइलों के लिए काम करता है

— abitcode

Answer 13

आपको सहेजें, ओपन टर्मिनल पर recompile समस्या को ठीक करने और इन दोनों आदेशों को दर्ज करने के लिए घड़ियों की सीमा बढ़ाने की आवश्यकता है:

sudo sysctl fs.inotify.max_user_watches=524288
sudo sysctl -p --system

पुनरारंभ करने के बाद भी परिवर्तनों को लगातार बनाए रखने के लिए, इस कमांड को भी चलाएं:

echo fs.inotify.max_user_watches=524288 | sudo tee /etc/sysctl.d/40-max-user-watches.conf && sudo sysctl --system

Answer 14

उपरोक्त तरीकों की कोशिश की, लेकिन जब यह देखने के लिए अधिकतम फ़ाइलों के कारण खान ने ऑटो-संकलन बंद कर दिया सीमा पार हो गई।

रन cat /proc/sys/fs/inotify/max_user_watchesकमांड।

यदि यह नोड_मॉड्यूल्स सहित कम फ़ाइलों की गिनती दिखा रहा है, तो फ़ाइल /etc/sysctl.confको रूट विशेषाधिकार और एपेंड में खोलें

fs.inotify.max_user_watches=524288 फ़ाइल में और सहेजें

परिणाम देखने के लिए फिर से कैट कमांड चलाएं। यह काम करेगा! उम्मीद है कि!

Answer 15

मैं फ़ोल्डर में चलाए जाने वाले स्वचालित कार्यों का उपयोग करता हूं (। VSCode> = 1.30) में .vscode / functions.json को काम करना चाहिए

{
 "version": "2.0.0",
 "tasks": [
    {
        "type": "typescript",
        "tsconfig": "tsconfig.json",
        "option": "watch",
        "presentation": {
            "echo": true,
            "reveal": "silent",
            "focus": false,
            "panel": "shared"
        },
        "isBackground": true,
        "runOptions": {"runOn": "folderOpen"},
        "problemMatcher": [
            "$tsc-watch"
        ],
        "group": {
            "kind": "build",
            "isDefault": true
        }
    }
 ]
}

यदि यह अभी भी प्रोजेक्ट फ़ोल्डर पर काम नहीं करता है, तो Ctrl + Shift + P और कार्य आज़माएं: फ़ोल्डर में स्वचालित कार्य प्रबंधित करें और मुख्य प्रोजेक्ट फ़ोल्डर या चल रहे फ़ोल्डर में "स्वचालित फ़ोल्डर में अनुमति दें" चुनें।