VSCode 코드 정렬 - VSCode kodeu jeonglyeol

이런 저런 코드를 갖다붙여 놓다보면 들여쓰기가 뒤죽박죽으로 되곤 합니다. 이것을 모두 찾아서 일일이 들여쓰기 해주려면, 꽤 많은 시간과 노력을 들여야하겠지요. 

vscode에는 웹 기반 언어들(html, css, javascript 등)의 코드를 자동으로 정렬해주는 플러그인이 여럿 있습니다. 저는 그 중 Beauty라는 플러그인을 사용하고 있습니다. Beauty를 사용하시려면, 마켓플레이스(Ctrl + Shift + X)에서 Beauty를 검색해서 찾은 후에 설치해주시면 됩니다.

VSCode 코드 정렬 - VSCode kodeu jeonglyeol
Beauty 플러그인으로 코드를 예쁘게 정렬하자

Beauty의 코드 자동 정렬 단축키는 Ctrl + Shift + B입니다. 

전체 코드를 Ctrl + A로 선택하신 후에 Ctrl + Shift + B를 입력해주면 전체 코드가 보기 좋게 정렬됩니다.

다만, 파이썬과 같이 들여쓰기가 굉장히 중요한 언어의 경우에는 Beauty의 자동 정렬 기능을 사용하지 않는 것이 좋습니다. 되려 망가질 수 있습니다. 

(이 글은 2021-2-13에 마지막으로 수정되었습니다.)

Clean Blog

  • 분류 전체보기 (48)
    • study() (0)
    • : Software (2)
    • : Algorithm (7)
    • : Back-end (1)
    • : Front-end (4)
    • : Git (VCS) (1)
    • : JavaScript (3)
    • : Architecture (5)
    • : Desgin Pattern (4)
    • : IDE tool (4)
    • : any (5)
    • write( : Diary) (8)
    • think( : any) (3)

POWERED BY TISTORY


: IDE tool

geekylli 2021. 4. 15. 15:28

반응형

[Visual studio] Shortcut about Code formatting and Comments 

  • 자동정렬(Aligning or code formatting)
    • Alt + F8
    • Ctrl + K + D (블럭이 해제)
    • Ctrl + K + F (블럭이 유지)
  • 주석(Comments)
    • 해당 부분 드래그 후
    • Ctrl + K + C
    • Ctrl + K + U (undo)

반응형

': IDE tool' 카테고리의 다른 글

[VSCode] 변수, 함수 이름 동시에 변경  (0)2021.05.03
[IntelliJ] 자주 쓰는 단축키 (Keymap or shortcut)  (0)2021.04.15
[VS Code] [C/C++] No-slash(/) Compile Error  (0)2021.04.15

태그

visual-studio, 단축키, 주석, 코드정렬

  • [VSCode] 변수, 함수 이름 동시에 변경
  • [IntelliJ] 자주 쓰는 단축키 (Keymap or shortcut)
  • VSCode 코드 정렬 - VSCode kodeu jeonglyeol
    [VS Code] [C/C++] No-slash(/) Compile Error

    Secret


    프로그래밍을 할때, 

    들여쓰기만 잘 되어 있어도 가독성 높은 코드를 만들 수 있습니다.

    VSCode는 사용자가 타이핑을 할 때, 복사한 코드를 붙여 넣을 때, 파일을 저장할 때

    자동으로 코드를 정렬해 주는 기능을 제공합니다.

    이 기능을 활성화하는 방법입니다.

     1. Setting(설정) 메뉴로 이동합니다. 

    VSCode 코드 정렬 - VSCode kodeu jeonglyeol

    다음 중 한가지 방법을 선택하여 설정 메뉴에 들어갑니다.

    1. File > Preperences > Settings 메뉴 이용
    2. 화면 왼쪽 하단의 톱니바퀴 모양의 '설정' 아이콘 이용
    3. 단축키 : Ctrl + , 이용

     2. User > Text Editor > Formatting 

    • Format On Paste
      • 사용자가 코드를 붙여넣기 했을 때, 자동으로 코드를 정렬해 줍니다.
    • Format On Save
      • 사용자가 코드를 저장 했을 때, 자동으로 코드를 정렬해 줍니다.
    • Format On Type
      • 사용자가 코드를 입력할 때, 자동으로 코드를 정렬해 줍니다.
    VSCode 코드 정렬 - VSCode kodeu jeonglyeol

    설정 화면의 오른쪽 상단의 문서 모양을 클릭해서, 직접 설정 값을 입력 할 수도 있습니다.

    • "editor.formatOnPaste" : true
    • "editor.formatOnSave : true
    • "editor.formatOnType" : true
    VSCode 코드 정렬 - VSCode kodeu jeonglyeol

     3. 코드 입력 시 자동 정렬 (Format On Type) 

    코드가 입력되고, 엔터를 칠 때마다 자동 정렬이 되고 있습니다.

    VSCode 코드 정렬 - VSCode kodeu jeonglyeol

     4. 코드 붙여넣기 시 자동정렬 (Format On Paste) 

    정렬되지 않은 코드를 복사해서 붙여넣기 했을 때, 자동으로 들여쓰기가 되고 있습니다.

    VSCode 코드 정렬 - VSCode kodeu jeonglyeol

     5. 파일 저장 시 자동 정렬 (Format On Save) 

    정렬되지 않은 코드를 저장할 때, 자동으로 정렬이 되고 있습니다.

    VSCode 코드 정렬 - VSCode kodeu jeonglyeol

    VSCode의 자동 정렬 기능을 이용하여,

    코드를 작성할 때, 붙여넣을 때, 저장할 때 자동으로 정렬이 되도록 하는 방법을 알아보았습니다.