Confluence 에 심각한 보안 취약점이 발견되었으니 사용자분들은 업그레이드 하세요.!
Skip to end of metadata
Go to start of metadata

개요

Visual Studio Code(이하 VSCode)는 Microsoft 社에서 내놓은 Modern 텍스트 편집기입니다. (Atom, Brackets 등)

Macintosh 등 멀티 플랫폼 용으로도 출시되었지만, "Made in MS"인 만큼 Windows와의 궁합이 좋습니다.


특장점은 다음과 같습니다.

  • Modern 텍스트 편집기 중 초기 실행속도가 가장 빠름 (Windows 10 기준)
  • 강력한 자동완성(Autocomplete) 지원
  • Visual Studio Marketplace(https://marketplace.visualstudio.com)에 등록된 수많은 확장 제공
  • Version Control System 제어 기능 내장 (Git)
  • License Free (회사에서 사용 가능)


본인이 Windows 환경에서 Modern PHP를 개발하고자 하는데, 회사에서 PhpStorm을 사용하기에는 라이센스·퍼포먼스 등의 사유로 사용이 어렵다면,

VSCode는 좋은 선택이 될 수 있습니다.

설치

초기설정

다음은 VSCode 설치 후 Modern PHP 개발을 위한 몇 가지 초기설정 항목입니다.

필수사항은 아니며 어디까지나 권장사항(Recommendations)일 뿐이니 본인의 환경에 알맞게 적절히 취사선택하여 주시면 되겠습니다.

KeyMap

본인이 PhpStorm 등 JetBranis 社의 통합개발환경(이하 IDE)에 익숙하다면 KeyMap을 PhpStorm과 동일하게 맞추어 주면 도움이 될 수 있습니다.

좌측 사이드 바의 "확장" 아이콘을 클릭하거나 Ctrl + Shift + X 단축키로 확장 프로그램 설치 화면으로 이동합니다.

그리고 "intellij" 키워드를 검색하여 "IntelliJ IDEA Keybindings" 확장을 설치합니다.

 

확장 설치 후 "재시작"하면 다음과 같이 KeyMap이 PhpStorm의 KeyMap으로 일괄 적용되었음을 확인할 수 있습니다.

변경전변경후

또한, 확장 섹션의 입력란에 "@recommended:keymaps" 라고 입력하면 타사·Vendor의 텍스트 편집기의 KeyMap도 내려받을 수 있습니다.


설정 관리

Atom, Sublime Text 등과 유사하게 VSCode 역시 편집기의 환경설정을 JSON 파일 형태로 제공합니다.

"모든 명령 표시" 입력창에 "setting" 키워드를 입력하면 "기본 설정: 사용자 설정 열기" 항목이 있습니다.

여기서 편집기의 모든 환경설정을 제어할 수 있습니다.

제어가 가능한 대상은 좌측 패널에 표시되며, 좌측 패널의 기본 설정에 마우스 포인터 Over시 연필 아이콘이 나타납니다.

이 연필 아이콘을 클릭하여 해당 기본 설정 항목을 우측에 복사한 다음, 자신만의 설정으로 바꾸어주고 저장하면 해당 환경설정이 즉시 반영됩니다.

사용자화(Customize)를 위한 설정에 집중하다 보면 settings.json 파일이 뒤죽박죽이 되어 가독성이 떨어질 수 있습니다.


또한, 기능 확장을 위해 확장 추가 시, 확장별 설정도 이 settings.json에서 함께 관리하기 때문에,

아래와 같이 카테고리별 주석을 달아 구분하는 것을 권장드립니다.

(제가 사용하고 있는 settings.json 파일을 첨부합니다)

settings.json
{
    /*
     * Defaults
     */

    // Editor settings
    "editor.fontFamily": "Consolas, NanumGothicCoding",
    "editor.fontSize": 14,
    "editor.formatOnType": true,
    "editor.renderControlCharacters": true,
    "editor.renderIndentGuides": true,

    // Window settings
    "window.reopenFolders": "all",
    "window.restoreFullscreen": true,
    "window.showFullPath": true,
    "window.zoomLevel": 0.8,

    // File settings
    "files.exclude": {
        "**/.git": true,
        "**/.svn": true,
        "**/.hg": true,
        "**/.DS_Store": true,
        "**/.idea": true
    },
    "files.autoSave": "afterDelay",

    // Searche settings
    "search.exclude": {
        "**/node_modules": true,
        "**/bower_components": true,
        "**/vendor": true,

        "**/.git": true,
        "**/.svn": true,
        "**/.hg": true,
        "**/.DS_Store": true,
        "**/.idea": true
    },
    "search.quickOpen.includeSymbols": true,

    // HTML settings
    "html.format.indentInnerHtml": true,

    // PHP settings
    "php.validate.executablePath": "C:/xampp/php/php.exe",

    // Extensions
    "extensions.autoUpdate": true,

    // Externel terminal settings

    // Common terminal settings
    "terminal.integrated.fontSize": 16,
    "terminal.integrated.cursorBlinking": true,
    "terminal.integrated.scrollback": 10000,

    // View problems
    // Remote analysis
    // Update settings
    // Git settings
    // HTTP settings
    // CSS settings
    // Sass settings
    // Debug settings
    // Typescript settings
    // JSON settings
    // Markdown settings
    // File explorers
    // Emmet settings
    // Workbench settings

    /*
     * Extensions
     */

    // vector-of-bool.gitflow
    "gitflow.deleteRemoteBranches": false,

    // Composer Dependency Manager for PHP configuration
    "composer.executablePath": "C:/ProgramData/ComposerSetup/bin/composer.bat",

    // Code Settings Sync Configuration Settings
    "sync.gist": "********************",
    "sync.lastUpload": "2017-01-12T17:10:10.788Z",
    "sync.autoDownload": true,
    "sync.autoUpload": true,
    "sync.lastDownload": "2017-01-07T23:55:19.133Z",
    "sync.version": 242,
    "sync.showSummary": false,
    "sync.forceDownload": false,
    "sync.workspaceSync": false,
    "sync.anonymousGist": false
    // gitignore extension configuration
    // Annotator configuration
    // vscode-icons configuration
    // Better Merge extension configuration
    // mkloubert.vs-deploy
    // PHP CodeSniffer configuration
    // Git History configuration
    // Crane Configuration
    // Git Project Manager configuration
    // PHPUnit Configuration
    // GitLens configuration
    // PHP Formatter settings
    // Run Code configuration
    // ESLint
    // Color Picker configuration
}

설정 동기화

회사·출장지 등 여러 대의 PC에서 작업한다면 Cloud 저장소에 설정·확장목록 등을 올려놓고 모든 PC에서 동기화하면, 동일 개발환경 유지에 도움이 될 수 있습니다.

먼저 "Settings Sync" 확장을 설치합니다.

/* 추후 업데이트 예정입니다 ^^; */

추천 확장

/* 업데이트 예정입니다 ^^; */