ভিজ্যুয়াল স্টুডিও কোড সংরক্ষণের উপর সংকলন

Question

সংরক্ষণে টাইপ স্ক্রিপ্ট ফাইলগুলি সংকলন করতে আমি কীভাবে ভিজ্যুয়াল স্টুডিও কোডটি কনফিগার করতে পারি?

আমি দেখছি ${file}আর্গুমেন্ট হিসাবে ফোকাসে ফাইলটি তৈরির জন্য কোনও টাস্ক কনফিগার করা সম্ভব । তবে ফাইলটি সংরক্ষণ করা হয়ে গেলে এটি করা চাই।

Comments

উপরের লিঙ্কটি ভিএস কোডের জন্য নয়, ভিএসের জন্য। সংরক্ষণের উপর সংকলন করা ও সংকলনের চেয়ে আলাদা বৈশিষ্ট্য। সংরক্ষণের সময় এটি কেবল একক জেএস ফাইল নির্গত করে। আমি এটিও ভিএস কোডে চাই।

— সিয়ানটিক

এটি একটি ভাল পরামর্শ। আমি এই বৈশিষ্ট্যটি বাস্তবায়নের জন্য একটি অভ্যন্তরীণ কাজের আইটেমটি খুললাম।

— ডার্ক বুমার

এখানে কাজের আইটেমটি দেওয়া হয়েছে: ভিজ্যুয়ালস্টুডিও.ইউসারওয়্যস

— পাওয়েল

আপনি দয়া করে একটি উত্তর চিহ্নিত করতে পারেন

— সেকা

tsc <filename> --watchটার্মিনালে টাইপ করুন

— ড্যানিয়েল সি জ্যাকবস

Answer 1

মে 2018 আপডেট:

মে 2018 এর মধ্যে আপনাকে আর tsconfig.jsonম্যানুয়ালি তৈরি বা টাস্ক রানার কনফিগার করতে হবে না ।

1. ফাইল tsc --initতৈরি করতে আপনার প্রকল্প ফোল্ডারে চালান tsconfig.json(যদি আপনার কাছে ইতিমধ্যে একটি না থাকে)।
2. Ctrl+Shift+Bভিএস কোডে কাজের তালিকা খুলতে টিপুন এবং নির্বাচন করুনtsc: watch - tsconfig.json ।
3. সম্পন্ন! আপনার প্রকল্পটি প্রতিটি ফাইল সংরক্ষণে পুনরায় কম্পাইল করা হয়েছে।

আপনার বেশ কয়েকটি থাকতে পারে 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

এটির সাথে সমস্যা হ'ল এটি কোনও কাজ চালিয়ে যায়, ভিএস কোড জানে আমি যখন কম ফাইল বা টিএস ফাইল সংরক্ষণ করি তখন এটি অপ্রয়োজনীয়র মতো মনে হয় কেবল অন্য অন্বেষণকারীকে "অন সেভ" কমান্ডটি সহজেই আঁকতে পারি না বলে। আমি ভাবছি যদি নির্দিষ্ট ফাইল টাইপ সংরক্ষণ করা হয় তবে কারও যদি কিছু চালানোর জন্য ইতিমধ্যে কোনও এক্সটেনশন সম্পন্ন হয়ে থাকে তবে আরও ভাল।

— সায়েন্টিক

@ সায়েন্টিক এই উত্তরটি ভিএস কোডের এক্সটেনশনের সমর্থন পাওয়ার আগেই লেখা হয়েছিল। আপনার কেবলমাত্র একটি এক্সটেনশান রয়েছে যার কথা আপনি বলছেন তবে টাইপস্ক্রিপ্ট সংকলক ফাইলগুলি দেখার এবং কেবলমাত্র পরিবর্তিত ফাইলগুলি পুনরায় সংকলন করা খুব দ্রুত।

— zlumer

@ কোকোডোকো বিসি সংকলনঅনসেভ কেবল ভিএস 2015 তে কাজ করে, কোড নয়

— স্কেপ করুন

@ স্ক্র্যাপটি এটি ভিএস কোডেও কাজ করে, যদি আপনি Tasks.json- তে কমান্ড লাইন যুক্তিতে "-w" যুক্ত করেন!

— কোকোডোকো

আসলে ভিএসকোড আপনার জন্য কনফিগারেশন স্টাফ করে: চালু configure task: ভিএসকোড স্বয়ংক্রিয়ভাবে সনাক্ত করবে যে একটি আছেtsconfig.json একটি ডায়ালগ রয়েছে এবং অনুরোধ জানানো হবে যেখানে আপনি tsc: build - tsconfig.jsonবা বেছে নিতে পারেন tsc: watch - tsconfig.json। পরবর্তীটি চয়ন করুন এবং ভিএসকোড tasks.jsonফাইলটি উত্পন্ন করে (যদি আগে না থাকে) এবং আপনার জন্য সঠিক কনফিগারেশন যুক্ত করে।

— ড্যানিয়েল

Answer 2

আপনার ব্যবহারের জন্য থাকার এড়াতে চান তাহলে CTRL+ + SHIFT+ + Bএই যে কোনো সময় ঘটতে পরিবর্তে চান আপনি একটি ফাইল সংরক্ষণ করুন, আপনি কর্ম সংরক্ষণ হিসাবে একই ছোট করে কাটা কমান্ড বাঁধে করতে পারেন:

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

এটি আপনার কী-বাইন্ডিংস.জেএসনে যায় - (ফাইলটি ব্যবহার করে -> অগ্রাধিকার -> কীবোর্ড শর্টকাটগুলি)।

Comments

এটি কেবল উপরের উত্তরের (সম্পাদিত) অ্যাড-অন হওয়া উচিত। এটি আমার দিন তৈরি!

— ক্রিস্যাভেজ

ভাল উত্তর ...? কীভাবে চালু হবে ফিল্টার করবেন ... উদাহরণস্বরূপ: আমি কেবল কমান্ড চালাতে চাই যদি ফাইলটির এইচটিএমএল এক্সটেনশন থাকে ???

— ZEE

@ হ্যাঁ হ্যাঁ, এটি সম্ভব, দয়া করে কী- বাইন্ডিংয়ের জন্য এই বিট ডকুমেন্টেশন এবং একটি সংক্ষিপ্ত উদাহরণের জন্য httpste এর উত্তরও দেখুন । বিশেষতঃ whenশর্তটি ব্যবহার editorLangIdকরা হচ্ছে আমদানি।

— ববচাও 87

Answer 3

যদি Ctrl+ Shift+ টিপুন Bপ্রচুর পরিশ্রমের মতো মনে হয় তবে আপনি "অটো সেভ" (ফাইল> অটো সেভ) স্যুইচ করতে পারেন এবং আপনার প্রকল্পের সমস্ত ফাইল দেখতে নোডজেএস ব্যবহার করতে পারেন এবং স্বয়ংক্রিয়ভাবে টিএসসি চালাতে পারেন।

একটি নোড.জেএস কমান্ড প্রম্পট খুলুন, আপনার প্রকল্পের মূল ফোল্ডারে ডিরেক্টরি পরিবর্তন করুন এবং নিম্নলিখিতটি টাইপ করুন;

tsc -w

আরে প্রেস্টো, প্রতিবার ভিএস কোড অটো ফাইলটি সংরক্ষণ করে, টিএসসি এটি পুনরায় সংকলন করবে।

এই কৌশলটি একটি ব্লগ পোস্টে উল্লেখ করা হয়েছে;

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

"সংরক্ষণের সংকলন" এ নীচে স্ক্রোল করুন

Answer 4

একটি এক্সটেনশন লিখুন

এখন যেটি 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 )

বিদ্যমান ভিএসকোড এক্সটেনশন

আপনি যদি কেবল বিদ্যমান এক্সটেনশানটি ইনস্টল করতে চান তবে আমি ভিএসকোড গ্যালারীটিতে এটি লিখেছি যা এখানে পাওয়া যায়: https://marketplace.visualstudio.com/items/emeraldwalk.RunOnSave

উত্স কোডটি এখানে উপলভ্য: https://github.com/emeraldwalk/vscode-runonsave/blob/master/src/extension.ts

Answer 5

আমার যে আচরণটি চান তা পেতে আমি দৃigh়তার সাথে লড়াই করেছি। এই টাইপস্ক্রিপ্ট ফাইলগুলি সংরক্ষণের জন্য সংকলন করার সবচেয়ে সহজ এবং সর্বোত্তম উপায়, আমি যে কনফিগারেশনটি চাই তা কেবল এই ফাইলটি (সংরক্ষিত ফাইল)। এটি একটি Tasks.json এবং একটি keybindings.json।

Comments

অলস বিকাশকারীদের জন্য: { "version": "0.1.0", "command": "tsc", "isShellCommand": true, "args": ["--module","amd","--target","ES5","${file}"], "showOutput": "silent", "problemMatcher": "$tsc" } কিবিংিংস:{ "key": "cmd+s", "command": "workbench.action.tasks.build", "when":"editorTextFocus && editorLangId == 'typescript'" }

— দরিসজ ফিলিপিয়াক

আমি টাইপস্ক্রিপ্টের 1.8.X এর সর্বশেষ সংস্করণ এবং ভিজ্যুয়াল স্টুডিও কোডের 1.0 এর সাথে বলতে পারি, আমি যে কৌশলটি দেখিয়েছি তা অপ্রচলিত। আপনার প্রকল্পের মূল স্তরে কেবল একটি tsconfig.json ব্যবহার করুন এবং সিনট্যাক্স পরীক্ষার জন্য সমস্ত স্বয়ংক্রিয়ভাবে কাজ করে। তারপরে স্বয়ংক্রিয়ভাবে দেখার / পুনরায় সংযোগের জন্য কমান্ড লাইনে tsc -w ব্যবহার করুন। comp "compilerOptions": {"মডিউল": "amd", "টার্গেট": "ES5", "noImpectedAny": মিথ্যা, "অপসারণ মন্তব্যসমূহ": সত্য, "preservConstEnums": সত্য, "ইনলাইনসোর্সম্যাপ": সত্য}, "বাদ" : ["নোড_মডিউলস"]}

— httpste

Answer 6

একটি বিল্ড তৈরির পরিবর্তে এবং সেই বিল্ডটি ট্রিগার করতে Ctrl + S বেঁধে রাখার জন্য আমি নীচের Tasks.json ফাইলটি ব্যবহার করে ওয়াচ মোডে টিএসসি শুরু করার পরামর্শ দেব:

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

এটি একবারে পুরো প্রকল্পটি তৈরি করবে এবং তারপরে ফাইলগুলি কীভাবে সংরক্ষণ হবে সেগুলি থেকে স্বাধীনভাবে সংরক্ষণ করা পুনর্নির্মাণ করবে (Ctrl + S, অটো সেভ, ...)

Comments

এই প্রপসগুলির কিছু হ্রাস করা হয়েছে।

— এব্রু গাঙ্গার

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

আজকাল ভিএস কোড কি সেই বৈশিষ্ট্যটিকে সমর্থন করে? গতবার যখন আমি চেক করেছি, এটি সংরক্ষণ করতে পারেনি এবং এটি করার জন্য আমার এক্সটেনশনটি ব্যবহার করা দরকার।

— আন্তি

এখন এটি সমর্থন করে

— ওয়াসিএফ

Answer 8

আমি গাল্প-টাইপ স্ক্রিপ্ট এবং ইনক্রিমেন্টাল বিল্ড ব্যবহার করে গাল্প টাস্ক সহ সেভের উপর সংকলন প্রয়োগ করেছি । এটি আপনি যা চান তা সংকলন নিয়ন্ত্রণ করতে দেয়। আমার ভেরিয়েবল টিএস সার্ভারপ্রজেক্টটি লক্ষ্য করুন, আমার বাস্তব প্রকল্পে আমারও tsClientProject আছে কারণ আমি আমার ক্লায়েন্ট কোডটি কোনও মডিউল নির্দিষ্ট না করে সংকলন করতে চাই। আমি জানি আপনি বনাম কোড দিয়ে এটি করতে পারবেন না do

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

আমি টাইপস্ক্রিপ্টের 1.8.X এর সর্বশেষ সংস্করণ এবং ভিজ্যুয়াল স্টুডিও কোডের 1.0 এর সাথে বলতে পারি, আমি যে কৌশলটি দেখিয়েছি তা অপ্রচলিত। আপনার প্রকল্পের মূল স্তরে কেবল একটি tsconfig.json ব্যবহার করুন এবং সিনট্যাক্স পরীক্ষার জন্য সমস্ত স্বয়ংক্রিয়ভাবে কাজ করে। তারপরে স্বয়ংক্রিয়ভাবে দেখার / পুনরায় সংযোগের জন্য কমান্ড লাইনে tsc -w ব্যবহার করুন। এটি বিকল্প ts এবং সংকলনের কনফিগারেশনের জন্য একই tsconfig.json ফাইলটি পড়বে।

// 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প্রকল্পের সমস্ত টাইপ

— স্ক্রিপ্ট

Answer 13

সেভ, টার্মিনাল খুলুন এবং এই দুটি কমান্ড সন্নিবেশ করানোর ক্ষেত্রে পুনরায় কম্পাইল ইস্যুটি ঠিক করতে আপনাকে ঘড়ির সীমা বাড়াতে হবে:

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 ফাইল এবং সংরক্ষণ করুন

ফলাফলটি দেখতে আবার ক্যাট কমান্ড চালান run এটা কাজ করবে! আশা!

Answer 15

আমি .vscode / Tasks.json এ ফোল্ডারে (VSCode> = 1.30 ব্যবহার করা উচিত) স্বয়ংক্রিয় কাজগুলি ব্যবহার করি

{
 "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 এবং Tasks খুলুন: ফোল্ডারে স্বয়ংক্রিয় টাস্কগুলি পরিচালনা করুন এবং মূল প্রকল্প ফোল্ডারে বা চলমান ফোল্ডারে "ফোল্ডারে স্বয়ংক্রিয় কার্যগুলিকে মঞ্জুরি দিন" নির্বাচন করুন।