시간과 노력을 절약하기 위해 VS Code에서 자동 서식 지정하는 방법 [2023]

Visual Studio Code, 줄여서 VS Code는 광범위하게 사용되는 코드 편집기 중 하나입니다. VS Code는 Node.js, JavaScript, 그리고 TypeScript에 대한 기본 지원을 제공합니다. 추가적으로, 다양한 확장 기능을 통해 거의 모든 언어와 런타임 환경에서 활용할 수 있습니다.

이 강력한 무료 오픈 소스 코드 편집기는 Microsoft에서 개발되었습니다.

VS Code가 널리 사용되는 데에는 여러 이유가 있습니다:

  • Intellisense: 코드 자동 완성 및 구문 강조 기능은 개발 생산성을 크게 향상시킵니다.
  • 크로스 플랫폼: Linux, Windows, 그리고 macOS와 같은 다양한 운영체제에서 동일한 환경을 제공합니다.
  • 확장 기능: 풍부한 확장 기능 생태계는 VS Code를 단순한 편집기를 넘어 강력한 통합 개발 환경(IDE)으로 만들어줍니다.
  • 다국어 지원: 거의 모든 프로그래밍 언어를 지원하는 확장 기능들을 통해 개발자는 다양한 언어를 자유롭게 사용할 수 있습니다.
  • 통합 터미널: VS Code 내장 터미널은 Git 명령을 포함한 다양한 명령어를 직접 실행할 수 있도록 지원하여, 코드 편집과 버전 관리를 통합합니다.

VS Code에서 자동 서식 설정하기

시작하기 전에 준비해야 할 사항은 다음과 같습니다.

  • VS Code 설치: 아직 설치하지 않았다면, 공식 웹사이트에서 운영체제에 맞는 VS Code를 다운로드하여 설치하십시오.
  • 언어 선택: 사용하는 언어에 따라 적합한 포맷터가 다르므로, 코딩에 사용할 언어를 먼저 결정해야 합니다.
  • 포맷터 설치: VS Code에서는 확장을 통해 코드 포맷팅을 제공합니다. 이 글에서는 예시로 Prettier를 사용하지만, 프로젝트에 필요한 다른 포맷터를 자유롭게 선택할 수 있습니다.

자동 서식 기능은 미리 정의된 규칙과 설정에 따라 코드 블록, 줄 또는 전체 파일의 형식을 자동으로 조정해줍니다. 이 기능은 주로 들여쓰기, 줄바꿈, 간격 등의 서식 규칙을 지정하는 설정 파일을 기반으로 동작합니다.

자동 서식 기능이 활성화되면, 해당 규칙들이 작성하는 코드의 모든 파일에 자동으로 적용되어 일관성 있는 코드 스타일을 유지할 수 있습니다.

만약 특정 코드 블록을 강조하고 싶다면, 자동 서식 기능을 일시적으로 비활성화할 수도 있습니다. 특정 코드 영역에 적용할 규칙을 명시하는 주석 블록을 사용하여 자동 서식을 제어할 수 있습니다.

VS Code 코드 자동 서식의 장점

  • 시간 절약: 코드 작성 및 서식 지정에 소요되는 시간을 줄여주어, 개발자가 코드 논리와 기능에 더 집중할 수 있게 합니다.
  • 일관성 유지: 코드베이스 전반에 걸쳐 일관된 스타일을 유지함으로써, 여러 개발자가 협업하는 대규모 프로젝트에서 특히 유용합니다.
  • 모범 사례 준수: 자동 서식 기능은 일관된 들여쓰기, 공백, 그리고 명명 규칙을 적용함으로써 코드 품질을 향상시킵니다.
  • 가독성 향상: 깔끔하게 정돈된 코드는 다른 개발자가 코드를 이해하고 검토하는 데 도움을 주어, 효율적인 협업을 가능하게 합니다.

VS Code에서 자동 서식을 활성화하고 사용자 정의하는 방법

자동 서식을 활성화하는 단계는 다음과 같습니다:

  1. 먼저 VS Code에서 자동 서식을 위한 확장 프로그램을 설치해야 합니다. 왼쪽 메뉴에서 확장 아이콘을 클릭합니다.
  2. 검색창에 “Prettier”를 입력하여 해당 확장을 찾은 후 “설치” 버튼을 클릭합니다. 여러 Prettier 확장 프로그램이 표시될 수 있으니, 개발자인 Prettier를 선택합니다.

Prettier가 VS Code에 성공적으로 설치되었다면, 자동 서식 기능을 활성화할 준비가 되었습니다.

자동 서식이 어떻게 적용되는지 보여드리기 위해, 간단한 HTML 로그인 페이지 예시를 사용하겠습니다.

다음 코드를 참고하십시오:

<!DOCTYPE html>

<html>

 <head>

 <title>Login Form</title>

 </head>

 <body style>

 <h2 style="text-align: center; margin-top: 50px;">Login </h2>

 <form action="" method="POST" style="max-width: 250px; margin: 0 auto; background-color: white; padding: 20px; border-radius: 5px; box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);">

   <label for="email" style="display: block; margin-bottom: 10px;">Enter Email</label>

 <input type="email" id="email" name="email" required style="width: 100%; padding: 10px; border-radius: 3px; border: 1px solid #ccc;"><br><br>

<label for="password" style="display: block; margin-bottom: 10px;">Enter Password</label>

 <input type="password" id="password" name="password" required style="width: 100%; padding: 10px; border-radius: 3px; border: 1px solid #ccc;"><br><br>

<input type="submit" value="Login" style="background-color: #af4c9e; color: white; padding: 10px 20px; border: none; border-radius: 3px; cursor: pointer;">

 </form>

 </body>

</html>

위 코드는 기능적으로는 문제가 없지만, 들여쓰기가 제대로 되어있지 않아 가독성이 떨어집니다. Prettier를 이용하여 이 코드의 형식을 자동으로 변경해 보겠습니다.

다음 단계를 따르세요:

  1. HTML 파일(예: index.html)을 생성하고 위의 코드를 붙여넣습니다.
  2. VS Code 왼쪽 하단의 설정 아이콘을 찾습니다.

  1. 설정 검색창에 “Formatter”를 입력한 후, “Editor: Default Formatter” 탭에서 Prettier를 선택합니다.

  1. “Editor: Format On Save” 옵션을 찾아서 체크합니다.

  1. 이제 HTML 파일을 저장하고, 코드 영역에서 우클릭한 후 “Format Document”를 선택합니다.
  2. 코드가 깔끔하게 정렬되었는지 확인하십시오. Prettier 확장은 앞으로 작성하는 다른 모든 코드에도 자동 서식을 적용합니다.
  3. Prettier 설정 사용자 정의: Prettier는 기본 설정으로도 훌륭하게 작동하지만, 필요에 따라 설정을 변경할 수 있습니다. VS Code 설정에서 Prettier를 검색하여 원하는 설정을 조정하세요.

  1. Prettier 설정 파일 생성: 협업하는 개발팀이 있는 경우, 각 개발자의 설정이 다를 수 있습니다. .prettierrc 파일을 프로젝트 루트에 생성하여 설정을 공유하면, 팀 전체가 동일한 코드 스타일을 유지할 수 있습니다. JSON 형식으로 다음과 같이 설정할 수 있습니다.
{
  "trailingComma": "es5",
  "tabWidth": 4,
  "semi": false,
  "singleQuote": true
}

위 코드 블록은 후행 쉼표 사용, 탭 너비, 세미콜론 사용 여부, 그리고 작은 따옴표 사용 여부를 설정하는 데 사용됩니다.

  • 후행 쉼표는 코드가 ES5로 변환될 때만 추가됩니다.
  • 탭 너비는 4개의 공백으로 설정됩니다.
  • 세미콜론 사용 여부는 false로 설정되어, 문장 끝에 세미콜론이 자동으로 추가되지 않도록 합니다.
  • 작은 따옴표를 사용하도록 설정되어 있습니다.

더욱 자세한 Prettier 설정 방법은 Prettier 공식 문서를 참조하십시오.

VS Code 자동 서식 모범 사례

올바른 포맷터 사용

이 글에서는 예시로 Prettier를 사용했지만, 이것이 모든 언어에 적용된다는 의미는 아닙니다. VS Code에는 다양한 서식 확장 프로그램이 존재하므로, 사용자의 언어와 프로젝트에 맞는 포맷터를 선택하는 것이 중요합니다. 예를 들어, Prettier나 Beautify는 HTML과 CSS에 적합하며, Python 코드 포맷에는 Black이나 Python 확장 프로그램을 사용하는 것이 좋습니다.

일관된 코드 스타일 사용

포맷터 설정은 사용자 정의가 가능하므로, 팀으로 작업하는 경우 모두가 동일한 설정을 사용해야 합니다. 이를 위해 프로젝트의 루트 디렉토리에 .prettierrc 파일을 생성하여 공유하는 것이 좋습니다.

린터 사용

린터는 코드 스타일 위반, 구문 오류, 그리고 잠재적인 버그를 검사하는 데 사용됩니다. 자동 서식 기능과 함께 린터를 사용하면 코드 품질을 크게 향상시킬 수 있으며, 디버깅에 필요한 시간과 노력을 줄일 수 있습니다.

키보드 단축키 활용

VS Code는 다양한 키보드 단축키를 제공하여 코드 포맷팅 속도를 높여줍니다. 이러한 단축키를 사용자 정의하여 더욱 효율적으로 작업할 수도 있습니다.

커밋 전 코드 확인

자동 서식 및 린터가 코드의 일부 문제를 해결할 수 있지만, 코드를 커밋하기 전에 반드시 다시 한번 코드를 검토해야 합니다.

코드 서식 지정 단축키

VS Code는 Windows, macOS, Linux 기반 시스템 (예: Ubuntu)에서 사용할 수 있는 크로스 플랫폼 코드 편집기입니다. 다음 단축키를 사용하여 전체 문서 또는 선택한 코드 영역의 서식을 지정할 수 있습니다.

Windows

  • Shift + Alt + F: 전체 문서 서식 지정
  • Ctrl + K, Ctrl + F: 선택한 코드 영역 서식 지정 (예: div 태그)

macOS

  • Shift + Option + F: 전체 문서 서식 지정
  • Ctrl + K, Ctrl + F: 선택한 코드 영역 서식 지정 (예: div 태그)

Ubuntu

  • Ctrl + Shift + I: 전체 문서 서식 지정
  • Ctrl + K, Ctrl + F: 선택한 코드 영역 서식 지정 (예: div 태그)

사용자 정의 단축키를 설정한 경우, 위의 단축키가 작동하지 않을 수 있습니다. VS Code 단축키를 확인하려면 다음 단계를 따르십시오:

  • VS Code를 실행하고 왼쪽 상단 메뉴에서 “파일”을 클릭합니다.
  • “기본 설정”으로 이동합니다.
  • “키보드 단축키”를 클릭하여 사용 가능한 모든 단축키를 확인합니다.

결론

자동 서식 기능은 개발 시간을 절약하는 데 매우 유용합니다. 사용할 포맷터는 사용하는 언어에 따라 다를 수 있으며, 여러 언어를 사용하는 경우 여러 개의 포맷터를 설치할 수 있습니다.

사용하는 포맷터의 설명서를 확인하여 지원하는 언어 및 올바른 사용법을 숙지하는 것이 중요합니다.

개발자를 위한 최고의 VS Code 확장 프로그램에 대한 글도 확인해보십시오.