Visual Studio Code (VSCode)에서 코드의 형식을 지정하는 방법

의 상응하는 무엇입니까 Ctrl+ K+ F와 Ctrl+ K+ DVisual Studio에서 Windows에서 Visual Studio를 코드 편집기에서, 또는 "아름답게"코드를 포맷 하시나요?

코드 형식은 Visual Studio Code에서 다음 바로 가기를 통해 사용할 수 있습니다.

• Windows Shift+ Alt+에서F
• Mac Shift+ Option+에서F
• Linux Ctrl+ Shift+에서I

또는 편집기에서 Ctrl+ Shift+ P(또는 Mac의 경우 Command+ Shift+) 와 함께 제공되는 '명령 팔레트'를 통해 바로 가기와 다른 바로 가기를 P찾은 다음 형식 문서 를 검색 할 수 있습니다 .

코드 포맷 바로 가기 :

Windows의 Visual Studio 코드- Shift+ Alt+F

MacOS의 Visual Studio 코드- Shift+ Option+F

우분투의 Visual Studio 코드- Ctrl+ Shift+I

필요한 경우 환경 설정을 사용하여이 바로 가기를 사용자 정의 할 수도 있습니다.

파일을 저장하는 동안 코드 형식 :

Visual Studio Code를 사용하면 기본 설정을 사용자 지정할 수 있습니다.

저장하는 동안 컨텐츠를 자동으로 포맷하려면 Visual Studio Code의 작업 공간 설정에 아래 코드 스 니펫을 추가하십시오.

메뉴 파일 → 환경 설정 → 작업 공간 설정

{
    // Controls if the editor should automatically format the line after typing
    "beautify.onSave": true,

    "editor.formatOnSave": true,

    // You can auto format any files based on the file extensions type.
    "beautify.JSfiles": [
        "js",
        "json",
        "jsbeautifyrc",
        "jshintrc",
        "ts"
    ]
}

참고 : 이제 TypeScript 파일을 자동으로 포맷 할 수 있습니다. 내 업데이트를 확인하십시오.

메뉴 파일 → 환경 설정 → 키보드 단축키 에서 키 바인딩을 추가 할 수 있습니다 .

{ "key": "cmd+k cmd+d", "command": "editor.action.formatDocument" }

또는 Visual Studio 는 다음과 같습니다.

{ "key": "ctrl+k ctrl+d", "command": "editor.action.formatDocument" }

1. 파일을 마우스 오른쪽 버튼으로 클릭하십시오
2. 메뉴에서 문서 형식을 선택하십시오 .
   • 윈도우 : Alt Shift F
   • 리눅스 : Alt Shift I
   • 맥 OS: ⌥ ⇧ F

올바른 키 조합은 Shift+ Alt+ F입니다.

페도라

1. File-> Preferences->를 클릭하십시오 Keyboard shortcuts.
2. 에서 Default Keyboard Shortcuts( Ctrl+ F)를 검색하십시오 editor.action.format.

내 읽기 "key": "ctrl+shift+i"

변경할 수도 있습니다. 방법에 대한 이 답변 을 참조하십시오 .

"환경 설정-> 키보드 단축키"에서 키 바인딩을 추가 할 수 있습니다.

{ "key": "cmd+k cmd+d", "command": "editor.action.format" }

또는 Visual Studio는 다음과 같습니다.

{ "key": "ctrl+k ctrl+d", "command": "editor.action.format" }

참고 : cmd키는 Mac 전용입니다. Windows 및 Fedora (Windows 키보드) 사용Ctrl

편집 :

비주얼 코드 버전에 따라 1.28.2이것이 내가 찾은 것입니다.

editor.action.format더 이상 존재하지 않습니다. 지금으로 대체되었습니다 editor.action.formatDocument및 editor.action.formatSelection.

editor.action.format검색 창에 입력 하여 기존 바로 가기를 봅니다.

키 조합을 변경하려면 다음 단계를 수행하십시오.

1. 클릭 editor.action.formatDocument또는editor.action.formatSelection
2. 펜 모양의 아이콘이 왼쪽에 나타납니다. 클릭하십시오.
3. 팝업이 나타납니다. 원하는 키 조합을 누르고 Enter를 누르십시오.

Linux에서는 Ctrl+ Shift+ I입니다.

Windows에서는 Alt+ Shift+ F입니다. HTML / CSS / JavaScript 및 Visual Studio Code 1.18.0으로 테스트되었습니다.

다른 언어의 경우 특정 언어 패키지를 설치해야 할 수도 있습니다.

Visual Studio Code 1.6.1 은 " 포맷시 형식 지원" "을 하여 설치된 관련 포맷터 확장을 자동으로 선택하고 각 저장시 전체 문서를 포맷합니다.

설정하여 "포맷시 저장"활성화

"editor.formatOnSave": true

사용 가능한 단축키가 있습니다 (Visual Studio Code 1.7 이상).

전체 문서를 포맷 : Shift+ Alt+F

형식 선택 만 : Ctrl+ K, Ctrl+F

우분투에서는 Ctrl+ Shift+ I입니다.

텍스트를 마우스 오른쪽 버튼으로 클릭하고 "포맷 코드"를 선택하십시오.

Visual Studio Code는 js-beautify내부적으로 사용 하지만 사용하려는 스타일을 수정하는 기능이 없습니다. 확장 "beautify"를 사용하면 설정을 추가 할 수 있습니다.

메뉴 파일 → 환경 설정 → 설정

"editor.formatOnType": true

세미콜론을 입력하면 형식이 지정됩니다.

또는을 사용할 수도 있습니다 "editor.formatOnSave": true.

Shift+ Alt+ F는 1.17.2 이상에서 잘 작동합니다.

어떤 이유로 Alt+ Shift+ F는 Mac Visual Studio Code 1.3.1에서 작동하지 않았으며 실제로 "문서 포맷"명령이 전혀 작동하지 않았습니다. 그러나 Formatter 명령 은 매우 잘 작동했습니다.

Command+ Shift+ 를 사용 P하고 Formatter를 입력 하거나 메뉴 File → Preferences → Keyboard Shortcuts → Command+ K Command+ 에서 직접 단축키를 S만든 다음 Formatter 를 입력하십시오 하고 단축키를 추가 할 수 있습니다.

예를보십시오 :

Visual Studio에서 코드 형식화

Windows 8에서 포맷을 시도했습니다.

아래 스크린 샷을 따르십시오.

1. 상단 메뉴 표시 줄에서보기를 클릭 한 다음 명령 팔레트를 클릭하십시오.

   

2. 그런 다음 Format 형식이 필요한 곳에 텍스트 상자가 나타납니다.

   Shift+ Alt+F

   

Visual Studio를 코드에서, Shift+ Alt+는 F무엇을하고있다 Ctrl+ K+는 DVisual Studio에서하고있다.

Mac OS X, DNVM 및 DNX 용 Mono 를 설치할 때까지 C #의 형식 바로 가기가 작동하지 않았습니다. .

Mono를 설치하기 전에 자동 형식 바로 가기 ( Shift+ Alt+ F)가 .json파일에 대해서만 작동했습니다 .

Mac에서는 Shift+ Alt+F 작동합니다.

메뉴에서 언제든지 키 바인딩을 확인할 수 있습니다.

메뉴 파일 → 환경 설정 → 키보드 단축키 및 키워드 '형식'으로 필터링하십시오.

Visual Studio Code의 기본 동작을 변경하려면 확장이 필요하지만 작업 영역 또는 사용자 수준의 기본 동작을 재정의 할 수 있습니다. 지원되는 대부분의 언어에서 작동합니다 (HTML, JavaScript 및 C #을 보장 할 수 있음).

작업 공간 수준

혜택

• 확장이 필요하지 않습니다
• 팀간 공유 가능

결과

• .vscode/settings.json 프로젝트 루트 폴더에 생성됩니다

어떻게?

1. 메뉴 파일 → 환경 설정 → 작업 공간 설정으로 이동하십시오.

2. "editor.formatOnType": truesettings.json에 추가하고 저장하십시오 (.vscode / settings.json 파일을 작성하여 작업하는 프로젝트의 기본 동작을 무시 함).

   

사용자 환경 수준

혜택

• 확장이 필요하지 않습니다
• 그들 모두를 지배하는 개인 개발 환경 tweeking (설정 :))

결과

• 사용자 settings.json가 수정되었습니다 (아래 운영 체제 별 위치 참조).

어떻게?

1. 메뉴 파일 → 환경 설정 → 사용자 설정으로 이동하십시오.

2. 추가의 값 변경 "editor.formatOnType": false에를 "editor.formatOnType": true사용자 settings.json에

Visual Studio Code 사용자의 settings.json위치는 다음과 같습니다.

플랫폼에 따라 설정 파일 위치, 사용자 설정 파일은 다음 위치에 있습니다.

• 윈도우 : %APPDATA%\Code\User\settings.json
• 맥: $HOME/Library/Application Support/Code/User/settings.json
• Linux : $HOME/.config/Code/User/settings.json작업 공간 설정 파일은 프로젝트의 .vscode 폴더에 있습니다.

자세한 내용은 여기를 참조 하십시오 .

기본적으로이 키는 HTML, CSS 및 JavaScript 문서에서 작동하지 않았습니다.

검색 후 133,796 설치로 인기있는 플러그인 JS-CSS-HTML Formatter 를 발견했습니다. .

설치 후 창을 다시로드하고 Ctrl+ Shift+를 누르면 F작동했습니다!

텍스트를 선택하고 선택을 마우스 오른쪽 단추로 클릭 한 다음 "명령 팔레트"옵션을 선택하십시오.

새로운 창이 열립니다. "형식"을 검색하고 요구 사항에 따라 형식이있는 옵션을 선택하십시오.

Microsoft에서 Visual Studio Keymap 을 설치하기 만하면 됩니다. 문제 해결됨. :피

Mac에서는 ⌘+ K를 사용한 다음 ⌘+를 사용하십시오 F.

서식을 지정할 JavaScript 파일을 사용자 정의하려는 경우 특성 의 모든 확장자를 사용할 수 있습니다 JSfiles. HTML에도 동일하게 적용됩니다.

{
    "beautify.onSave": true,
    "beautify.JSfiles": ["js", "json", "jsbeautifyrc", "jshintrc", "ts"],
    "beautify.HTMLfiles": ["htm", "html"]
}

그러면 TypeScript를 저장할 때 아름답게 설정하고 HTML 옵션에 XML로 추가 할 수 있습니다.

서식 문서의 스타일을 사용자 정의하려면 Beautify 확장 을 사용해야합니다 .

이 스크린 샷을 참조하십시오 :

적절한 플러그인을 먼저 설치해야합니다 (예 : XML, C # 등).

관련 플러그인을 설치하고 파일을 적절한 확장자로 저장해야 포맷 할 수 있습니다.

Visual Studio Code (Ubuntu)에서 사용하는 가장 간단한 방법은 다음과 같습니다.

마우스로 서식을 지정할 텍스트를 선택하십시오.

마우스 오른쪽 버튼을 클릭하고 "형식 선택"을 선택하십시오 .

이건 아니야. 이것을 사용하십시오 :

메뉴 파일 → 환경 설정 → 작업 공간 설정 , "editor.formatOnType" : true

확장 사용 ...

파일을 저장할 때 코드의 자동 서식을 사용합니다.

Visual Studio Code 및 빠른 열기 ( Ctrl+ P)를 시작 하고 다음 명령을 붙여넣고를 누릅니다 Enter.

저장시 ext install format

https://marketplace.visualstudio.com/items?itemName=gyuha.format-on-save

Linux의 Visual Studio 코드 :

Ctrl+ [들여 쓰기되지 않은 코드 블록

Ctrl+ ]대량 들여 쓰기