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

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

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

Май 2018 обновление:

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

1. Запустите tsc --initв папке вашего проекта, чтобы создать tsconfig.jsonфайл (если у вас его еще нет).
2. Нажмите, Ctrl+Shift+Bчтобы открыть список задач в VS Code и выберите 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 - (перейдите к этому, используя File -> Preferences -> Keyboard Shortcuts).

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

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

tsc -w

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

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

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

Прокрутите вниз до «Компилировать при сохранении»

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

Теперь, когда vscode является расширяемым, можно подключиться к событию on save через расширение. Хороший обзор написания расширений для 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);
}

(Также упоминается по этому вопросу 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 компилироваться при сохранении в нужную мне конфигурацию только ЭТОГО файла (сохраненный файл). Это tasks.json и keybindings.json.

Вместо того, чтобы создавать отдельный файл и связывать 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, автосохранение, ...)

обновленный

В твоем 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-typcript и пошаговую сборку. Это позволяет контролировать компиляцию как угодно. Обратите внимание на мою переменную 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/'));

}

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

{
    "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с правами root и добавьте

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

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

Я использую автоматические задачи, запускаемые в папке (должен работать VSCode> = 1.30) в .vscode / tasks.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 и Задачи: Управление автоматическими задачами в папке и выберите «Разрешить автоматические задачи в папке» в основной папке проекта или рабочей папке.