VS 코드에서 코드를 포맷하는 방법

by

VS Code에서 명령을 입력할 때 깔끔하게 하려고 하는 것이 때때로 마지막 생각일 수 있습니다. 프로그램을 실행하는 데 포맷이 필요하지는 않지만 디버깅하고 오류를 찾는 데 큰 도움이 됩니다.

이 기사에서는 VS Code에서 코드 형식을 지정하는 방법과 코드를 잘 구성하는 데 유용한 다른 팁을 보여줍니다.

코드 형식 지정 방법

VS Code에는 현재 입력된 코드를 표준 형식으로 정렬하는 명령이 내장되어 있습니다. 이러한 바로 가기 키는 추가 확장이 필요하지 않으며 언제든지 사용할 수 있습니다. 바로 가기는 다음과 같습니다.

PC용

전체 문서 서식 지정:

  • 포맷하려는 코드가 있는 파일을 엽니다.
  • “Shift + Alt + F”를 누릅니다.
  • 왼쪽 상단 모서리에 있는 “파일”을 클릭한 다음 “저장”을 선택하거나 “Ctrl + S”를 눌러 변경 사항을 저장합니다.

    • 선택한 코드만 서식 지정:

  • 서식을 지정할 코드 줄이 있는 파일에서 마우스로 해당 줄을 강조 표시하여 선택합니다.
  • “Ctrl + K”를 누릅니다.
  • “Ctrl + F”를 누르십시오.
  • 왼쪽 상단 모서리에 있는 파일 메뉴에서 “저장”을 선택하거나 “Ctrl + S”를 눌러 변경 사항을 저장합니다.

    • “Ctrl + K”를 먼저 누르지 않고 “Ctrl + F”를 누르면 찾기 메뉴가 열립니다. 이 경우 “x” 버튼을 클릭하거나 Esc 키를 눌러 닫습니다.

    줄을 위 또는 아래로 이동:

  • 이동하려는 줄의 시작 부분으로 커서를 이동합니다.
  • Alt 키를 누르고 있습니다.
  • 선을 위쪽으로 이동하려면 위쪽 화살표를 누릅니다. 아래로 이동하려면 아래쪽 화살표를 누릅니다.
  • 창의 왼쪽 상단 모서리에 있는 파일 메뉴에서 파일을 선택하거나 “Ctrl + S”를 눌러 파일을 저장합니다.

    • 한 줄 들여쓰기 변경:

  • 들여쓰기를 변경하려는 줄의 시작 부분으로 커서를 이동합니다.
  • “Ctrl + ]”를 눌러 들여쓰기를 늘립니다.
  • “Ctrl + [“ to decrease the indent.
  • Save changes by selecting Save from the File menu or by pressing “Ctrl + S”.
    •   진화 후 포켓몬의 CP가 얼마인지 계산하는 방법

    For Mac

    Format the entire document:

  • Open the file with the code that you wish to format.
  • Press “⇧ + ⌥ + F.”
  • Save your changes by clicking “File” on the upper left then choosing “Save” or pressing “⌘ + S”.

    • Formatting selected code only:

  • Highlight the part of the document that you wish to format.
  • Press “⌘ + K”.
  • Press “⌘ + F”.
  • Save your file by pressing “⌘ + S” or by choosing “Save” from the File menu on the upper left corner of the window.

    • Note that using “⌘ + F” without pressing “⌘ + K” beforehand will only open the Find Menu. To close the Find Menu just press “x” on the right side or press Esc.

    Move lines up or down:

  • Place your cursor at the beginning of the line you want to edit.
  • Hold down the “⌥” Key.
  • To move a line up, press the up arrow. To move it down, press the down arrow.
  • Save your changes by choosing “Save” from the File menu or by pressing “⌘ + S”.

    • Change indentation of a single line:

  • Move your cursor to the beginning of the line in which you want to change the indention.
  • Press “⌘ + ]”를 사용하여 들여쓰기를 늘립니다.
  • 들여쓰기를 줄이려면 “⌘ +[“를누릅니다[“todecreasetheindent
  • “⌘ + S”를 누르거나 창의 왼쪽 상단 모서리에 있는 파일 메뉴에서 “저장”을 선택하여 파일을 저장합니다.

    • 저장 시 VS 코드 형식 코드

    VS Code에는 저장할 때 문서의 서식을 지정하는 기본 명령이 없습니다. 대신 VS Code 애플리케이션에 서식 확장을 설치하여 이를 수행할 수 있습니다. 이러한 확장 중 가장 인기 있는 것은 VS Code에 많은 서식 기능을 제공하는 Prettier입니다. 다음을 수행하여 Prettier를 설치할 수 있습니다.

      25 최고의 삼성 갤럭시 S9 및 S9+ 배경 화면
  • VS 코드를 엽니다.
  • 왼쪽 메뉴에 있는 확장 프로그램 버튼을 클릭합니다. 네 개의 상자처럼 생긴 아이콘입니다. 또는 PC의 경우 “Ctrl + Shit + x” 또는 Mac의 경우 “⌘ + ⇧ + x”를 누를 수 있습니다.
  • 메뉴 상단의 검색창에 Prettier를 입력하세요.
  • Prettier 아이콘의 오른쪽 하단에 있는 설치 버튼을 클릭합니다.
  • 확장 프로그램이 설치를 마칠 때까지 기다리십시오.

    • Prettier가 저장 시 문서 형식을 자동으로 지정하기 전에 확장 기능을 설정하여 기능을 활성화해야 합니다. 이것은 다음을 수행하여 수행됩니다.

  • PC에서는 “Ctrl +”, Mac에서는 “⌘ +”를 눌러 설정 창을 엽니다.
  • 검색 표시줄에 포맷터를 입력합니다. 그러면 여러 서식 설정이 표시됩니다.
  • Editor: Default Formatter 설정에서 선택한 확장자가 Prettier인지 확인합니다. 기본 포맷터가 없거나 VS Code가 기본적으로 다른 포맷터를 사용하는 경우 드롭다운 화살표를 누릅니다. 목록에서 “Prettier – Code Formatter”를 선택합니다. 또는 Prettier가 목록에 “esbenp.prettier-vscode”로 나타날 수 있습니다.
  • “편집기: 저장 시 포맷” 옵션이 선택되었는지 확인하십시오. 그렇지 않은 경우 확인 표시를 전환합니다.
  • 설정 검색 창에 “예쁘게”를 입력하십시오.
  • “Prettier: Require Config” 줄을 찾을 때까지 아래로 스크롤합니다. 확인란이 선택되었는지 확인하십시오. 이 설정은 Prettier가 구성 파일 없이 문서를 포맷하는 것을 방지합니다. 이것은 자체 서식 규칙이 있을 수 있는 다운로드된 코드를 볼 때 편리합니다. 이렇게 하면 실수로 서식 옵션을 덮어쓰는 것을 방지할 수 있습니다. 이 설정을 선택하더라도 제목 없는 파일은 계속 자동으로 포맷됩니다.
  • 기본 설정에 따라 특정 Prettier 설정을 편집할 수 있습니다. 완료되면 이 메뉴를 종료할 수 있습니다.

    • 설정 파일이 있을 때만 자동으로 포맷하도록 Prettier를 설정했으므로 프로젝트별로 하나씩 생성해야 합니다. 이것은 다음 단계에 따라 수행됩니다.

  • 왼쪽 메뉴에서 프로젝트의 루트를 선택합니다.
  • 새 파일 버튼을 클릭하여 구성 파일을 만듭니다.
  • 이 파일의 이름을 “.prettierrc”로 지정합니다.
  • 파일에 {}를 입력하기만 하면 됩니다.
  • Prettier는 이제 문서를 저장할 때마다 자동으로 문서의 서식을 지정합니다.
    •   Linux에 PHP를 설치하는 방법

    코드 정리를 위한 팁

  • 들여쓰기는 프로그램을 실행하는 데 필요하지 않지만 코드를 관리 가능한 모듈로 구분하여 디버깅에 도움이 될 수 있습니다. 예를 들어 If-Then 문 또는 중첩 사례는 각 대안 옵션을 서로 시각적으로 구별할 수 있도록 하여 이점을 얻을 수 있습니다. 이것은 구문 오류 대신 논리 오류를 처리할 때 유용합니다.
  • 모듈이나 짧은 코드 줄의 이름을 지정하는 경우 단순히 모듈 1, 모듈 2 등으로 부르기보다 설명이 포함된 제목을 사용하는 습관을 들이십시오. 이렇게 하면 코드의 어느 부분이 특정 기능을 수행하는지 더 쉽게 알 수 있습니다.
  • 의견을 유리하게 사용하는 것은 항상 좋은 생각입니다. 간단한 설명을 포함하거나 자신을 위한 메모를 추가하는 경우 주석은 디버깅하는 동안 엄청난 도움이 됩니다.

    • 코드 정리

    프로젝트 형식을 적절하게 유지하면 읽기가 더 쉬울 뿐만 아니라 오류를 식별하고 코드를 정리하는 데 도움이 됩니다. 프로그램을 실행하는 데 꼭 필요한 것은 아니지만 VS Code에서 파일 형식을 지정하는 방법을 아는 것은 확실한 이점입니다.

    VS Code에서 파일 형식을 지정하는 다른 방법을 알고 있습니까? 아래 의견 섹션에서 자유롭게 생각을 공유하십시오.