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


156

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

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


4
Выше ссылка для VS, а не для кода VS. Компиляция при сохранении отличается от компиляции и задач. При сохранении выдает только один файл JS. Я тоже хочу это с кодом VS
Ciantic

Это хорошее предложение. Я открыл внутренний рабочий элемент для реализации этой функции.
Дирк Баумер


1
Не могли бы вы отметить ответ
Seega

2
Введите tsc <filename> --watchв терминале
Даниэль C Джейкобс

Ответы:


204

Май 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


10
Проблема в том, что он поддерживает выполнение задачи, VS Code знает, что когда я сохраняю файл меньшего размера, или файл ts, кажется избыточным иметь другого наблюдателя только потому, что мы не можем легко подключиться к команде «При сохранении». Интересно, было бы намного лучше, если бы кто-то уже сделал расширение для запуска чего-либо при сохранении определенного типа файла.
Ciantic

2
@Ciantic этот ответ был написан до того, как VS Code получил поддержку расширений. Есть только расширение, о котором вы говорите, но на самом деле компилятор TypeScript быстрее просматривает файлы и перекомпилирует только измененные.
Zlumer

1
@Kokodoko до н.э. compileOnSave работает только в VS 2015, но не в Code
scape

2
@scape Он работает и в VS Code, если вы добавите «-w» к аргументам командной строки в tasks.json!
Кокодоко

1
На самом деле VSCode выполняет все за вас: On configure task: VSCode автоматически обнаружит наличие и выведет tsconfig.jsonдиалоговое окно, в котором вы можете выбрать либо, tsc: build - tsconfig.jsonлибо tsc: watch - tsconfig.json. Выберите последний вариант, и VSCode создаст tasks.jsonфайл (если его раньше не было) и добавит правильную конфигурацию для вас.
Даниил

37

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

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

Это происходит в вашем keybindings.json - (перейдите к этому, используя File -> Preferences -> Keyboard Shortcuts).


1
Это должно быть просто дополнение к ответу выше (отредактировано). Это сделало мой день!
chrissavage

хороший ответ ...? как отфильтровать, что будет запущено ... например: я хочу выполнить команду, только если файл имеет расширение html ???
ZEE

@ZEE да, это возможно, пожалуйста, ознакомьтесь с этой частью документации по сочетаниям клавиш, а также с ответом httpete для краткого примера. В частности, использование whenусловия editorLangIdимеет значение.
BobChao87

22

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

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

tsc -w

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

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

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

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


6

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

Теперь, когда 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


5

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

введите описание изображения здесь


7
для ленивых разработчиков: { "version": "0.1.0", "command": "tsc", "isShellCommand": true, "args": ["--module","amd","--target","ES5","${file}"], "showOutput": "silent", "problemMatcher": "$tsc" } keybingings:{ "key": "cmd+s", "command": "workbench.action.tasks.build", "when":"editorTextFocus && editorLangId == 'typescript'" }
Дариуш Филипяк

Я могу сказать, что с последней версией кода на языке TypeScript 1.8.X и 1.0 кода Visual Studio показанная мною техника устарела. Просто используйте tsconfig.json на корневом уровне вашего проекта, и все работает автоматически для проверки синтаксиса. Затем используйте tsc -w в командной строке для автоматического просмотра / перекомпиляции. {"compilerOptions": {"module": "amd", "target": "ES5", "noImplicitAny": false, "removeComments": true, "preserveConstEnums": true, "inlineSourceMap": true}, "exclude" : ["node_modules"]}
httpete

5

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


2
некоторые из этих реквизитов устарели.
Эбру

3

обновленный

В твоем 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
  }
]

1
Код VS в настоящее время поддерживает эту функцию? В прошлый раз, когда я проверял, он не мог сохранить, и мне нужно было использовать расширение, чтобы сделать это.
Антти

Теперь это поддерживает
WasiF

2

Я реализовал компиляцию при сохранении с 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/'));

}

1

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

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


1

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

1

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

tsc main --watch

где main.tsваше имя файла

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


tsc -wтакже работает для всех машинописных файлов в проекте
abitcode

1

Вам нужно увеличить лимит часов, чтобы исправить проблему перекомпиляции при сохранении, открыть терминал и ввести эти две команды:

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

0

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

запустить cat /proc/sys/fs/inotify/max_user_watchesкоманду.

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

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

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


0

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

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.