VS 코드로 저장할 때 코드 형식을 지정하는 방법

186

Visual Studio Code로 파일을 저장할 때 내장 포맷터를 사용하여 TypeScript 코드를 자동으로 포맷하고 싶습니다.

다음 옵션을 알고 있지만 그중 어느 것도 충분하지 않습니다.

수동 형식 Shift + Alt + F
형식의 형식 "editor.formatOnType": true
- Enter 키를 누르면 줄 형식이 지정됩니다. 불행히도 다른 라인을 마우스 클릭하거나 위 / 아래 화살표를 누르면 포맷되지 않은 상태로 남습니다.
기존 확장 사용
- 나는이 시도 하나 ,하지만 너무 잘 작동하지 않습니다.
미화 사용 "beautify.onSave": true
- TypeScript에서는 작동하지 않습니다
맞춤 확장 프로그램 작성
- 자동 저장 및 빌드를 올바르게 처리하려면 까다 롭습니다.

visual-studio-code vscode-settings code-formatting

— 토마스 니코 덤
소스

280

2016 년 9 월 (VSCode 1.6)부터는 공식적으로 지원됩니다 .

settings.json파일에 다음을 추가 하십시오.

"editor.formatOnSave": true

— 토마스 니코 덤
소스

5

일부 파일을 제외시키는 방법이 있습니까? 즉, .html 파일이 아닌 .js 파일 만 형식화하려고합니다.

— gabrielAnzaldo

VS 코드의 @ gabodev77prettier에는 HTML이 아닌이 옵션 (예 : prettier.javascriptEnable, prettier.cssEnable ...)이 있습니다.

— Freewalker

7

자동 저장시 형식을 지정할 수 있습니까? formatOnSave는 Cmd + S를 수동으로 눌렀을 때만 작동합니다.

— Freewalker

@gabrielAnzaldo 특정 파일 / 파일 형식을 제외하는 방법에 대해서는이 질문을 참조하십시오 : stackoverflow.com/questions/44831313/…

— Gama11

@LukeWilliams 현재 불가능합니다. 여기에 대한 기능 요청이 있습니다. github.com/microsoft/vscode/issues/45997

— Gama11

64

저장시 코드를 자동으로 포맷하려면 :

Ctrl ,사용자 기본 설정을 열려면 누르 십시오
열린 설정 파일에 다음 코드를 입력하십시오
```
{
    "editor.formatOnSave": true
}
```
파일을 저장

출처

— 자 메르
소스

33

Javascript 소스만으로 저장시 자동 서식을 설정하려면 다음을 추가하십시오 Users Setting( Cmd,또는 누르기 Ctrl,).

"[javascript]": { "editor.formatOnSave": true }

— 긴 응 우옌
소스

내 버전은, 내가 "formatOnSave"을 검색을 시작하고 바로 대 코드 설정 UI의 체크 박스를 클릭했다

— 아킨 환을

26

더 이상 명령을 추가 할 필요가 없습니다. Visual Studio Code를 처음 사용하고 저장시 코드를 포맷하는 쉬운 방법을 찾는 사람들은 아래 단계를 따르십시오.

[Cmd+,]Mac에서 누르 거나 아래 스크린 샷을 사용하여 설정을 엽니 다 .

검색 창에 ' 형식 '을 입력하고 '저장시 형식 '옵션을 활성화 하십시오 .

끝났습니다. 감사합니다.

— 발라 수 브라 마니 M
소스

4

대한 MAC 사용자 기본 설정에이 줄을 추가

파일 경로는 / Users / USER_NAME / Library / Application Support / Code / User / settings.json입니다.

"tslint.autoFixOnSave": true

파일 샘플은 다음과 같습니다.

{
    "window.zoomLevel": 0,
    "workbench.iconTheme": "vscode-icons",
    "typescript.check.tscVersion": false,
    "vsicons.projectDetection.disableDetect": true,
    "typescript.updateImportsOnFileMove.enabled": "always",
    "eslint.autoFixOnSave": true,
    "tslint.autoFixOnSave": true
}

— 리차드
소스