Visual Studio Code biên dịch khi lưu

Làm cách nào tôi có thể định cấu hình Visual Studio Code để biên dịch các tệp bản thảo khi lưu?

Tôi thấy có thể cấu hình một tác vụ để xây dựng tệp tập trung bằng cách sử dụng ${file}làm đối số. Nhưng tôi muốn điều này được thực hiện khi một tập tin được lưu.

Cập nhật tháng 5 năm 2018:

Kể từ tháng 5 năm 2018, bạn không còn cần phải tạo tsconfig.jsonthủ công hoặc định cấu hình trình chạy tác vụ.

1. Chạy tsc --inittrong thư mục dự án của bạn để tạo tsconfig.jsontệp (nếu bạn chưa có tệp này).
2. Nhấn Ctrl+Shift+Bđể mở danh sách các tác vụ trong VS Code và chọn tsc: watch - tsconfig.json.
3. Làm xong! Dự án của bạn được biên dịch lại trên mỗi tệp lưu.

Bạn có thể có một số tsconfig.jsontệp trong không gian làm việc của mình và chạy nhiều phần tổng hợp cùng một lúc nếu bạn muốn (ví dụ: frontend và backend riêng).

Câu trả lời gốc:

Bạn có thể làm điều này với các lệnh Build:

Tạo một đơn giản tsconfig.jsonvới "watch": true(điều này sẽ hướng dẫn trình biên dịch xem tất cả các tệp được biên dịch):

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

Lưu ý rằng filesmảng bị bỏ qua, theo mặc định, tất cả *.tscác tệp trong tất cả các thư mục con sẽ được biên dịch. Bạn có thể cung cấp bất kỳ tham số nào khác hoặc thay đổi target/ out, chỉ cần đảm bảo rằng nó watchđược đặt thành true.

Định cấu hình tác vụ của bạn ( Ctrl+Shift+P-> Configure Task Runner):

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

Bây giờ nhấn Ctrl+Shift+Bđể xây dựng dự án. Bạn sẽ thấy đầu ra của trình biên dịch trong cửa sổ đầu ra ( Ctrl+Shift+U).

Trình biên dịch sẽ tự động biên dịch các tệp khi được lưu. Để dừng quá trình biên dịch, bấm Ctrl+P->> Tasks: Terminate Running Task

Tôi đã tạo một mẫu dự án cụ thể cho câu trả lời này: typescript-node-basic

Nếu bạn muốn tránh phải sử dụng CTRL+ SHIFT+ Bvà thay vào đó muốn điều này xảy ra bất cứ khi nào bạn lưu tệp, bạn có thể liên kết lệnh với cùng một cách rút gọn như hành động lưu:

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

Điều này diễn ra trong keybindings.json của bạn - (hướng tới mục này bằng Tệp -> Tùy chọn -> Phím tắt).

Nếu nhấn Ctrl+ Shift+ Bcó vẻ như rất nhiều nỗ lực, bạn có thể bật "Tự động lưu" (Tệp> Tự động lưu) và sử dụng NodeJS để xem tất cả các tệp trong dự án của bạn và tự động chạy TSC.

Mở một dấu nhắc lệnh Node.JS, thay đổi thư mục vào thư mục gốc dự án của bạn và gõ như sau;

tsc -w

Và xin chào, mỗi lần VS Code tự động lưu tệp, TSC sẽ biên dịch lại nó.

Kỹ thuật này được đề cập trong một bài đăng trên blog;

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

Cuộn xuống "Biên dịch khi lưu"

Viết phần mở rộng

Bây giờ vscode có thể mở rộng, có thể nối vào sự kiện lưu thông qua một phần mở rộng. Tổng quan tốt về các tiện ích mở rộng bằng văn bản cho VSCode có thể được tìm thấy tại đây: https://code.visualstudio.com/docs/extensions/overview

Đây là một ví dụ đơn giản chỉ gọi echo $filepathvà xuất ra thiết bị xuất chuẩn trong một cuộc đối thoại tin nhắn:

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

(Cũng được tham khảo trong câu hỏi SO này: https://stackoverflow.com/a/33843805/20361 )

Phần mở rộng VSCode hiện có

Nếu bạn chỉ muốn cài đặt một tiện ích mở rộng hiện có, đây là tiện ích mà tôi đã viết có sẵn trong bộ sưu tập VSCode: https://marketplace.visualstudio.com/items/emeraldwalk.RunOnSave

Mã nguồn có sẵn ở đây: https://github.com/emeraldwalk/vscode-runonsave/blob/master/src/extension.ts

Tôi đã đấu tranh rất nhiều để có được hành vi mà tôi muốn. Đây là cách dễ nhất và tốt nhất để có được các tệp TypeScript để biên dịch khi lưu, theo cấu hình tôi muốn, chỉ có tệp NÀY (tệp đã lưu). Đó là task.json và keybindings.json.

Thay vì xây dựng một tệp duy nhất và liên kết Ctrl + S để kích hoạt bản dựng đó, tôi khuyên bạn nên bắt đầu tsc ở chế độ theo dõi bằng tệp task.json sau:

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

Điều này sẽ một lần xây dựng toàn bộ dự án và sau đó xây dựng lại các tệp được lưu độc lập với cách chúng được lưu (Ctrl + S, tự động lưu, ...)

Đã cập nhật

Trong bạn tsconfig.json

"compileOnSave": true, // change to true

nếu vấn đề vẫn còn đó thì hãy thực hiện bất kỳ thao tác nào sau đây:

Khởi động lại trình chỉnh sửa của bạn hoặc Thay đổi bất kỳ tuyến đường nào, hoàn nguyên lại và lưu ứng dụng. Nó sẽ bắt đầu biên dịch. I E

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

Tôi đã triển khai biên dịch khi lưu với tác vụ gulp bằng cách sử dụng gulp-typecript và xây dựng gia tăng. Điều này cho phép kiểm soát việc biên dịch bất cứ điều gì bạn muốn. Lưu ý biến tsServerProject của tôi, trong dự án thực tế của tôi, tôi cũng có tsClientProject vì tôi muốn biên dịch mã máy khách của mình mà không có mô-đun nào được chỉ định. Theo tôi biết bạn không thể làm điều đó với vs code.

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

}

Chọn Tùy chọn -> Cài đặt không gian làm việc và thêm mã sau, Nếu bạn đã bật Tải lại nóng, thì các thay đổi sẽ phản ánh ngay lập tức trong trình duyệt

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

Tình trạng hiện tại của vấn đề này:

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

Tôi có thể nói với phiên bản mới nhất của TypeScript 1.8.X và 1.0 của mã Visual Studio, kỹ thuật tôi đã trình bày đã lỗi thời. Chỉ cần sử dụng tsconfig.json ở cấp gốc của dự án của bạn và tất cả đều hoạt động tự động để kiểm tra cú pháp. Sau đó sử dụng tsc -w trên dòng lệnh để xem / biên dịch lại tự động. Nó sẽ đọc cùng một tệp tsconfig.json cho các tùy chọn và cấu hình của trình biên dịch ts.

// tsconfig.json

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

Một cách cực kỳ đơn giản để tự động biên dịch khi lưu là nhập nội dung sau vào thiết bị đầu cuối:

tsc main --watch

main.tstên tập tin của bạn ở đâu

Lưu ý, điều này sẽ chỉ chạy miễn là thiết bị đầu cuối này mở, nhưng đó là một giải pháp rất đơn giản có thể chạy trong khi bạn đang chỉnh sửa chương trình.

Bạn cần tăng giới hạn đồng hồ để khắc phục sự cố biên dịch lại khi lưu, Mở thiết bị đầu cuối và nhập hai lệnh sau:

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

Để thay đổi liên tục ngay cả sau khi khởi động lại, hãy chạy lệnh này:

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

đã thử các phương pháp trên nhưng tôi đã dừng tự động biên dịch khi cảm thấy như vậy, do các tệp tối đa để xem đã vượt quá giới hạn.

chạy cat /proc/sys/fs/inotify/max_user_watches lệnh.

nếu nó hiển thị số lượng tệp ít hơn bao gồm cả node_modules thì hãy mở tệp /etc/sysctl.conftrong đặc quyền gốc và nối thêm

fs.inotify.max_user_watches=524288 vào tập tin và lưu

chạy lại lệnh mèo để xem kết quả. Nó sẽ làm việc! Hy vọng!

Tôi sử dụng các tác vụ tự động chạy trên thư mục (nên hoạt động VSCode> = 1.30) trong .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
        }
    }
 ]
}

Nếu điều này vẫn không hoạt động trên thư mục dự án, hãy thử Ctrl + shift + P và Nhiệm vụ: Quản lý tác vụ tự động trong thư mục và chọn "Cho phép tác vụ tự động trong thư mục" trên thư mục dự án chính hoặc thư mục đang chạy.