저장 시 Visual Studio 코드 컴파일
저장 시 텍스트 파일을 컴파일하도록 Visual Studio Code를 구성하려면 어떻게 해야 합니까?
, 「는, 「파일을 포커스로 빌드 」를 할 수 요.${file}★★★★. 단, 때해 합니다.하지만 파일이 저장되면 이 작업을 수행했으면 합니다.
2018년 5월 갱신:
부터는 2018년 5월까지는 만들 .tsconfig.json작업을 수동으로 수행하거나 작업 실행자를 구성합니다.
- 실행합니다.
tsc --init폴더를 만듭니다.tsconfig.json파일(아직 파일이 없는 경우)을 클릭합니다. - VS 코드에서 작업 목록을 열고 선택하려면 누르십시오.
tsc: watch - tsconfig.json. - 완료! 파일을 저장할 때마다 프로젝트가 다시 컴파일됩니다.
개를 가질 수 요.tsconfig.json여러 컴파일을 동시에 실행할 수 있습니다(예: 프런트 엔드 및 백엔드를 개별적으로 실행).
원답:
빌드 명령을 사용하여 이 작업을 수행할 수 있습니다.
심플하게 작성하다"watch": true(컴파일된 모든 파일을 감시하도록 컴파일러에 지시합니다).
{
"compilerOptions": {
"target": "es5",
"out": "js/script.js",
"watch": true
}
}
:files으로는 all " " " " " " 입니다.*.ts모든 서브디렉토리의 파일이 컴파일 됩니다.할 수 .target/outwatch로 설정되어 있다.true.
작업을 Ctrl+Shift+P설정합니다( - >Configure Task Runner
{
"version": "0.1.0",
"command": "tsc",
"showOutput": "silent",
"isShellCommand": true,
"problemMatcher": "$tsc"
}
를 눌러 프로젝트를 빌드합니다.출력창()Ctrl+Shift+U에 컴파일러 출력이 표시됩니다.
컴파일러는 저장 시 자동으로 파일을 컴파일합니다.컴파일을 정지하려면 ->를 누릅니다.> Tasks: Terminate Running Task
이 답변을 위해 특별히 프로젝트 템플릿을 만들었습니다.
「 」를 하지 CTRL+SHIFT+B파일을 저장할 때마다 명령을 저장 액션과 동일한 바로 가기에 바인딩할 수 있습니다.
[
{
"key": "ctrl+s",
"command": "workbench.action.tasks.build"
}
]
이것은 keybindings.json - ([파일]-> [설정]-> [키보드 숏컷]를 사용하여 이 페이지로 이동합니다).
++ShiftB를 누르는 것이 힘들 것 같으면 [Auto Save]([File]> [ Auto Save ])를 켜고 노드를 사용할 수 있습니다.프로젝트의 모든 파일을 감시하고 TSC를 자동으로 실행합니다.
노드를 엽니다.JS 명령 프롬프트에서 디렉토리를 프로젝트 루트 폴더로 변경하고 다음을 입력합니다.
tsc -w
그리고 VS Code auto가 파일을 저장할 때마다 TSC가 파일을 다시 컴파일합니다.
이 기술은 블로그 투고에 기재되어 있습니다.
http://www.typescriptguy.com/getting-started/angularjs-typescript/
아래로 스크롤하여 "저장 시 컴파일"
확장자 쓰기
이제 vscode를 확장할 수 있으므로 확장을 통해 저장 시 이벤트에 연결할 수 있습니다.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입니다.
저장 시 자동 컴파일을 수행하는 매우 간단한 방법은 단말기에 다음 중 하나를 입력하는 것입니다.
tsc main --watch // autosave `main.ts`
tsc -w // autosave all typescript files in your project
이 단말기가 열려 있을 때만 실행되지만 프로그램을 편집하는 동안 실행할 수 있는 매우 간단한 솔루션입니다.
하나의 파일을 작성하고 Ctrl+S를 바인드하여 빌드를 트리거하는 대신 다음 작업을 사용하여 watch 모드에서 tsc를 시작할 것을 권장합니다.json 파일:
{
"version": "0.1.0",
"command": "tsc",
"isShellCommand": true,
"args": ["-w", "-p", "."],
"showOutput": "silent",
"isWatching": true,
"problemMatcher": "$tsc-watch"
}
이렇게 하면 프로젝트 전체가 빌드되고 저장된 파일이 저장되는 방법에 관계없이 재구축됩니다(Ctrl+S, 자동 저장 등).
순서 1
고객님의 고객명tsconfig.json
"compileOnSave": true, // change it to true and save the application
가 해결되지 않은 는, 「」를 적용합니다.step-2
순서 2
에디터를 재기동합니다.
하세요.step-3
순서 3
임의의 루트를 변경하여 되돌리고 응용 프로그램을 저장합니다.편찬이 시작될 거야
const routes: Routes = [
{
path: '', // i.e. remove , (comma) and then insert it and save, it'll start compiling
component: MyComponent
}
]
이 문제의 현재 상태:
https://github.com/Microsoft/vscode/issues/7015
gulp-typescript와 증분 빌드를 사용하여 gulp 태스크로 컴파일 온세이브를 구현했습니다.이렇게 하면 원하는 컴파일을 제어할 수 있습니다.변수 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/'));
}
폴더(VShode > = 1.30)에서 실행되는 자동 작업을 .sysode/syson.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 및 폴더에서 태스크: 자동 태스크 관리를 시도하고 기본 프로젝트 폴더 또는 실행 중인 폴더에서 "폴더에서 자동 태스크 허용"을 선택합니다.
[ Preferences ]- > [ Workspace Settings ]를 선택하고 다음 코드를 추가합니다.핫 새로고침이 활성화되어 있는 경우 변경 내용은 브라우저에 즉시 반영됩니다.
{
"files.exclude": {
"**/.git": true,
"**/.DS_Store": true,
"**/*.js.map": true,
"**/*.js": {"when": "$(basename).ts"}
},
"files.autoSave": "afterDelay",
"files.autoSaveDelay": 1000
}
최신 버전의 TypeScript 1.8.X와 1.0의 Visual Studio 코드에서는 제가 보여드린 기술은 구식이라고 말할 수 있습니다.프로젝트의 루트 레벨에서 tsconfig.json을 사용하면 구문 체크가 자동으로 수행됩니다.그런 다음 명령줄에서 tsc -w를 사용하여 자동으로 감시/재컴파일합니다.ts 컴파일 옵션 및 설정에 대해 동일한 tsconfig.json 파일을 읽습니다.
// tsconfig.json
{
"compilerOptions": {
"module": "amd",
"target": "ES5",
"noImplicitAny": false,
"removeComments": true,
"preserveConstEnums": true,
"inlineSourceMap": true
},
"exclude": [ "node_modules" ]
}
저장 시 재컴파일 문제를 수정하려면 워치 제한을 늘려야 합니다.단말기를 열고 다음 두 가지 명령을 입력합니다.
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
여기에는 다양한 유효한 답변이 있지만 TS 컴파일러 환경에 따라 모든 사용자에게 적합한 것은 아닙니다.팔로잉은 글로벌하게 기능할 수 있습니다.
순서 1
최소한으로 하다tsconfig.json예를 들어 프로젝트 루트 폴더 아래에 있습니다.
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/",
"forceConsistentCasingInFileNames": true,
"sourceMap": true,
"strict": true,
"target": "es2017",
"module": "es2020",
}
# where you can set your outDir accordingly.
순서 2
현재 TS 컴파일러 설정tsc프로젝트 루트 폴더를 확인합니다.이를 수행하려면 다른 터미널 탭을 열고 다음 명령을 실행하여 백그라운드에서 그대로 두십시오.
$ tsc --watch --project ./
# tsc is your working compiler, may be different than this. I currently using global TyperScript Compiler to watch on save therefore tcs. Change to yours accordingly
# ref: https://www.typescriptlang.org/docs/handbook/compiler-options.html
이는 IDE 작업 감시자에 의존하는 것보다 더 깔끔합니다.
더 이상 시청할 필요가 없는 경우 Ctrl/Command + C를 눌러 종료하거나 단말기를 닫거나 다시 켜면 됩니다.
프로젝트 폴더에서 tsc --init을 실행하여 tsconfig.json 파일을 만듭니다(아직 파일이 없는 경우).
Ctrl+Shift+B를 눌러 VS 코드에서 작업 목록을 열고 "tsc: watch - tsconfig.json"을 선택합니다.
완료! 파일을 저장할 때마다 프로젝트가 다시 컴파일됩니다.
이 방법은 효과가 있었지만 스텝2에서는 작업 목록에서 "tsc:espion - tsconfig.json"만 선택할 수 있습니다(목록에 "tsc: watch - tsconfig.json"은 없습니다).
위의 방법을 시도했지만 최대 파일 수가 제한을 초과했기 때문에 느낌이 들 때 자동 갱신이 중지되었습니다.
려려를 cat /proc/sys/fs/inotify/max_user_watches명령어를 사용합니다.
를 포함한 가 적은 ./etc/sysctl.conf 및 권한에
fs.inotify.max_user_watches=524288에
cat 명령어를 다시 실행하여 결과를 확인합니다.잘 될 거야!바라건대!
언급URL : https://stackoverflow.com/questions/29996145/visual-studio-code-compile-on-save
'it-source' 카테고리의 다른 글
| Angularjs 업로드 전 이미지 미리보기 (0) | 2023.02.22 |
|---|---|
| IntelliJ 미사용 속성 (0) | 2023.02.22 |
| Backbone.js REST 콜에 대해서 (0) | 2023.02.22 |
| 유형 선언의 @typescript-eslint/no-discript-false positive false 긍정 (0) | 2023.02.22 |
| numpy 유형을 python으로 변환 (0) | 2023.02.22 |