Візуальний код Studio компілюється при збереженні

Як я можу налаштувати Visual Studio Code для компіляції файлів машинописних файлів при збереженні?

Я бачу, що можна налаштувати завдання зібрати файл у фокусі, використовуючи ${file}як аргумент. Але я хотів би, щоб це було зроблено, коли файл зберігається.

Оновлення травня 2018 року:

З травня 2018 року вам більше не потрібно створювати tsconfig.jsonвручну чи налаштовувати бігун завдань.

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, просто переконайтеся, що 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

Якщо ви хочете уникнути необхідності використання CTRL+ SHIFT+ Bі замість цього бажаєте, щоб це відбувалося кожного разу, коли ви зберігаєте файл, ви можете прив’язати команду до тієї самої ярлика, що і дія збереження:

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

Це стосується вашого keybindings.json - (зверніться до цього за допомогою Файл -> Налаштування -> Комбінації клавіш).

Якщо натискання Ctrl+ Shift+ Bздається великим зусиллям, ви можете увімкнути "Автозбереження" (Файл> Автозбереження) та використовувати NodeJS для перегляду всіх файлів у вашому проекті та запустити TSC автоматично.

Відкрийте командний рядок Node.JS, змініть каталог у кореневу папку проекту та введіть наступне;

tsc -w

І ось престо, щоразу, коли код VS автоматично зберігає файл, 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);
}

(Також посилається на це питання ТА: 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 в режимі перегляду, використовуючи такі файли task.json:

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

Після цього буде зібрано весь проект, а потім відновити збережені файли незалежно від їх збереження (Ctrl + S, автоматичне збереження, ...)

Оновлено

У вашому 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, використовуючи gulp-typecript та інкрементальну збірку. Це дозволяє контролювати компіляцію все, що завгодно. Зверніть увагу на свою змінну 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/isissue/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у root права та додайте

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 і Завдання: Керуйте автоматичними завданнями в папці та виберіть "Дозволити автоматичні завдання в папці" в головній папці проекту або запущеній папці.