Visual Studio Code รวบรวมเมื่อบันทึก

ฉันจะกำหนดค่ารหัส Visual Studio เพื่อรวบรวมไฟล์ typescript เมื่อบันทึกได้อย่างไร

ฉันเห็นว่าเป็นไปได้ที่จะกำหนดค่างานเพื่อสร้างไฟล์ในโฟกัสโดยใช้${file}อาร์กิวเมนต์ แต่ฉันต้องการทำสิ่งนี้เมื่อไฟล์ถูกบันทึก

อัปเดตพฤษภาคม 2018:

ตั้งแต่พฤษภาคม 2018 คุณไม่จำเป็นต้องสร้างtsconfig.jsonด้วยตนเองอีกต่อไปหรือกำหนดค่า task runner

1. เรียกใช้tsc --initในโฟลเดอร์โครงการของคุณเพื่อสร้างtsconfig.jsonไฟล์ (หากคุณยังไม่มี)
2. กดCtrl+Shift+Bเพื่อเปิดรายการของงานใน VS tsc: watch - tsconfig.jsonรหัสและเลือก
3. ทำ! โครงการของคุณจะคอมไพล์ใหม่ทุกไฟล์ที่บันทึก

คุณสามารถมีหลายtsconfig.jsonไฟล์ในเวิร์กสเปซของคุณและเรียกใช้การคอมไพล์หลายครั้งในเวลาเดียวกันถ้าคุณต้องการ (เช่นส่วนหน้าและส่วนหลังแยกต่างหาก)

คำตอบเดิม:

คุณสามารถทำได้ด้วยคำสั่ง Build:

สร้างแบบง่าย ๆtsconfig.jsonด้วย"watch": true(ซึ่งจะสั่งให้คอมไพเลอร์ดูไฟล์ที่คอมไพล์ทั้งหมด):

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

โปรดทราบว่าfilesอาร์เรย์จะถูกละเว้นโดยค่าเริ่มต้น*.tsไฟล์ทั้งหมดในไดเรกทอรีย่อยทั้งหมดจะถูกรวบรวม คุณสามารถให้พารามิเตอร์อื่น ๆ ใด ๆ หรือการเปลี่ยนแปลงtarget/ outเพียงให้แน่ใจว่ามีการตั้งค่าwatchtrue

กำหนดค่างานของคุณ ( 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

หากคุณต้องการหลีกเลี่ยงการใช้CTRL+ SHIFT+ Bและต้องการให้สิ่งนี้เกิดขึ้นเมื่อใดก็ตามที่คุณบันทึกไฟล์คุณสามารถผูกคำสั่งกับทางลัดเดียวกับการบันทึก:

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

สิ่งนี้จะเกิดขึ้นใน keybindings.json ของคุณ - (มุ่งหน้าไปที่สิ่งนี้โดยใช้ไฟล์ -> การตั้งค่า -> แป้นพิมพ์ลัด)

หากกดCtrl+ Shift+ Bดูเหมือนว่าพยายามอย่างมากคุณสามารถเปิด "บันทึกอัตโนมัติ" (ไฟล์> บันทึกอัตโนมัติ) และใช้ NodeJS เพื่อดูไฟล์ทั้งหมดในโครงการของคุณและเรียกใช้ TSC โดยอัตโนมัติ

เปิดพร้อมต์คำสั่ง Node.JS เปลี่ยนไดเร็กทอรีเป็นโฟลเดอร์รูทโปรเจ็กต์ของคุณและพิมพ์ดังต่อไปนี้

tsc -w

และทุกครั้งที่ VS Code auto บันทึกไฟล์ TSC จะทำการคอมไพล์ใหม่

เทคนิคนี้ถูกกล่าวถึงในบล็อกโพสต์;

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

เลื่อนลงไปที่ "รวบรวมเมื่อบันทึก"

เขียนส่วนขยาย

ขณะนี้ vscode สามารถขยายได้จึงเป็นไปได้ที่จะเชื่อมต่อกับเหตุการณ์บันทึกบนผ่านส่วนขยาย ภาพรวมที่ดีของการเขียนส่วนขยายสำหรับ VSCode สามารถดูได้ที่นี่: https://code.visualstudio.com/docs/extensions/overview

นี่เป็นตัวอย่างง่ายๆที่เพิ่งโทรออกecho $filepathและส่งออก stdout ในการสนทนาข้อความ:

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);
}

(อ้างอิงจากคำถาม SO นี้ด้วย: 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

ฉันพยายามอย่างมากเพื่อให้ได้พฤติกรรมที่ฉันต้องการ นี่เป็นวิธีที่ง่ายที่สุดและดีที่สุดในการรับไฟล์ TypeScript เพื่อรวบรวมในการบันทึกตามการกำหนดค่าที่ฉันต้องการเฉพาะไฟล์นี้ (ไฟล์ที่บันทึก) มันเป็น task.json และ keybindings.json

แทนที่จะสร้างไฟล์เดียวและผูก Ctrl + S เพื่อสร้างสิ่งนั้นฉันอยากจะแนะนำให้เริ่ม tsc ในโหมด watch โดยใช้ไฟล์ task.json ต่อไปนี้:

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

ครั้งนี้จะสร้างโครงการทั้งหมดแล้วสร้างไฟล์ที่ได้รับการบันทึกโดยอิสระจากวิธีการบันทึก (Ctrl + S, บันทึกอัตโนมัติ, ... )

Updated

ในตัวคุณ 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
  }
]

ฉันใช้การคอมไพล์กับบันทึกด้วยงานอึกโดยใช้gulp-typescriptและบิลด์ที่เพิ่มขึ้น สิ่งนี้จะช่วยให้สามารถควบคุมสิ่งที่คุณต้องการได้ สังเกตุตัวแปร tsServerProject ของฉันในโครงการจริงของฉันฉันยังมี tsClientProject เพราะฉันต้องการรวบรวมรหัสลูกค้าโดยไม่ได้ระบุโมดูล อย่างที่ฉันรู้ว่าคุณไม่สามารถทำได้ด้วยรหัส vs

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/'));

}

เลือกการตั้งค่า -> การตั้งค่าพื้นที่ทำงานและเพิ่มรหัสต่อไปนี้หากคุณเปิดใช้งานการโหลดซ้ำร้อนการเปลี่ยนแปลงจะแสดงทันทีในเบราว์เซอร์

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

สถานะปัจจุบันของปัญหานี้:

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

ฉันสามารถพูดได้ด้วยเวอร์ชันล่าสุดของ TypeScript 1.8.X และ 1.0 ของรหัส Visual Studio เทคนิคที่ฉันแสดงให้เห็นนั้นล้าสมัย เพียงใช้ 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" ]
} 

วิธีที่ง่ายที่สุดในการรวบรวมโดยอัตโนมัติเมื่อบันทึกคือการพิมพ์สิ่งต่อไปนี้ลงในเทอร์มินัล:

tsc main --watch

main.tsชื่อไฟล์ของคุณอยู่ที่ไหน

หมายเหตุนี่จะทำงานเฉพาะเมื่อเทอร์มินัลนี้เปิด แต่เป็นโซลูชันที่ง่ายมากที่สามารถทำงานได้ในขณะที่คุณกำลังแก้ไขโปรแกรม

คุณต้องเพิ่มขีด จำกัด การเฝ้าดูเพื่อแก้ไขปัญหาการคอมไพล์ซ้ำในบันทึก, เปิดเทอร์มินัลแล้วป้อนคำสั่งสองคำสั่งต่อไปนี้:

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

ลองใช้วิธีการด้านบน แต่ฉันหยุดการคอมไพล์โดยอัตโนมัติเมื่อรู้สึกเช่นนั้นเนื่องจากไฟล์สูงสุดที่ดูได้เกินขีด จำกัด แล้ว

เรียกใช้cat /proc/sys/fs/inotify/max_user_watchesคำสั่ง

หากมันแสดงจำนวนไฟล์น้อยลงรวมถึง node_modules ให้เปิดไฟล์ /etc/sysctl.confในสิทธิ์ของรูทและผนวก

fs.inotify.max_user_watches=524288 ลงในไฟล์และบันทึก

รันคำสั่ง cat อีกครั้งเพื่อดูผลลัพธ์ มันจะทำงาน! หวังว่า!

ฉันใช้งานอัตโนมัติทำงานในโฟลเดอร์ (ควรทำงาน VSCode> = 1.30) ใน. vscode / task.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 และงาน: จัดการงานอัตโนมัติในโฟลเดอร์และเลือก "อนุญาตงานอัตโนมัติในโฟลเดอร์" ในโฟลเดอร์โครงการหลักหรือโฟลเดอร์ที่กำลังเรียกใช้