Visual Studio Code скомпилировать при сохранении

Как настроить код Visual Studio для компиляции файлов машинописи при сохранении?

Я вижу, что можно настроить задачу для создания файла в фокусе, используя ${file} в качестве аргумента. Но я бы хотел, чтобы это было сделано при сохранении файла.

Ответ 1

Обновление за май 2018 года:

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

Запустите tsc --init в папке вашего проекта, чтобы создать файл tsconfig.json (если у вас его еще нет).
Нажмите Ctrl+Shift+B, чтобы открыть список задач в VS Code и выберите tsc: watch - tsconfig.json.
Готово! Ваш проект перекомпилируется при каждом сохранении файла.

Вы можете иметь несколько файлов tsconfig.json в своей рабочей области и запускать несколько компиляций одновременно, если хотите (например, frontend и backend отдельно).

Оригинальный ответ:

Вы можете сделать это с помощью команд 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 прекратить выполнение > Tasks: Terminate Running Task

Я создал шаблон проекта специально для этого ответа: typescript-node-basic

Ответ 2

Если вы хотите избежать использования CTRL + SHIFT + B и вместо этого хотите, чтобы это произошло в любое время, когда вы сохраняете файл, вы можете привязать команду к тому же сокращению, что и действие сохранения

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

Это относится к вашему keybindings.json - (перейдите к этому с помощью File → Preferences → Shortcut).

Ответ 3

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

Откройте командную строку Node.JS, замените каталог в корневую папку проекта и введите следующее:

tsc -w

И hey presto, каждый раз, когда VS Code автоматически сохраняет файл, TSC будет перекомпилировать его.

Этот метод упоминается в сообщении в блоге;

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

Прокрутите вниз до пункта "Скомпилировать при сохранении"

Ответ 4

Записать расширение

Теперь, когда 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: fooobar.com/questions/67148/...)

Существующий расширение VSCode

Если вы хотите просто установить существующее расширение, вот что я написал в галерее VSCode: https://marketplace.visualstudio.com/items/emeraldwalk.RunOnSave

Исходный код доступен здесь: https://github.com/emeraldwalk/vscode-runonsave/blob/master/src/extension.ts

Ответ 5

Я очень сильно боролся, чтобы получить такое поведение, которое я хочу. Это самый простой и лучший способ получить файлы TypeScript для компиляции при сохранении, в конфигурацию, которую я хочу, только ЭТОГО файла (сохраненный файл). Это задачи .json и keybindings.json.

Ответ 6

Вместо того, чтобы создавать один файл и связывать Ctrl + S для запуска этой сборки, я бы рекомендовал запустить tsc в режиме просмотра, используя следующий файл tasks.json:

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

Это создаст весь проект, а затем восстановит файлы, которые будут сохранены независимо от того, как они будут сохранены (Ctrl + S, автоматическое сохранение,...)

Ответ 7

Я реализовал компиляцию с сохранением с помощью задачи gulp, используя gulp-typescript и инкрементную сборку. Это позволяет контролировать компиляцию независимо от того, что вы хотите. Обратите внимание на мою переменную 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/'));

}

Ответ 8

Выберите Настройки → Параметры рабочей области и добавьте следующий код. Если у вас включена горячая перезагрузка, изменения сразу отражаются в браузере

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

Ответ 9

Я могу сказать, что с последней версией 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" ]
}

Ответ 10

Текущее состояние этой проблемы:

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

Ответ 11

обновленный

В вашем tsconfig.json

"compileOnSave": true, // change to true

если проблема не устранена, измените любой маршрут, верните его обратно и сохраните приложение. Он начнет компилироваться т.е.

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

Надеюсь, это кому-нибудь поможет. Хотя это не постоянное решение, но оно работает, пока вы не получите лучшее решение.

Ответ 12

попробовал вышеуказанные методы, но мой остановил автокомпиляцию, когда захотелось, из-за того, что максимальное количество файлов для просмотра превысило лимит.

выполните команду cat/proc/sys/fs/inotify/max_user_watches.

если он показывает меньшее количество файлов, включая node_modules, откройте файл /etc/sysctl.conf с правами суперпользователя и добавьте

fs.inotify.max_user_watches=524288 в файл и сохраните

снова запустите команду cat, чтобы увидеть результат. Это будет работать! с надеждой!

Ответ 13

Чрезвычайно простой способ автоматической компиляции при сохранении - ввести в терминал следующее:

tsc main --watch

где main.ts - это имя вашего файла.

Обратите внимание, что это будет работать только до тех пор, пока этот терминал открыт, но это очень простое решение, которое может быть запущено во время редактирования программы.

Ответ 14

Ответ для VisualStudio, а не VisualStudio-Code:

Установить тип Script -Extension для VisualStudio:
Через VS: Инструменты- > Расширения и обновления- > В сети → TypeScript для Microsoft Visual Studio или

http://www.typescriptlang.org/#download-links

Перейдите в Инструменты- > Параметры- > Текстовый редактор → (JavaScript/*) TypeScript → Проект

Активировать 'Compile on Safe' → Автоматически компилировать TypeScript файлы, которые не являются частью Project
* VS2017