VS Code: WordPress 개발자를 위한 심층 검토

마이크로소프트는 나쁜 평가를 받는다. 수년에 걸쳐 그들은 시대에 뒤떨어지고 사용자 친화적이지 않다는 평판을 얻었습니다. 몇 년 전만 해도 그들은 그럴 자격이 있었을 것입니다. 하지만 더 이상은 아닙니다. Microsoft의 최신 벤처는 플랫폼 간, 직관적이며 기술의 한계를 뛰어 넘습니다. 이것이 Visual Studio Code가 필요한 이유입니다. 2015년에 출시된 이후 VS Code는 Sublime Text와 Atom을 최고의 선택으로 밀어붙이는 많은 개발자를 위한 사실상의 코드 편집기가 되었습니다. 그리고 그것은 많은 것을 말하고 있습니다. 그래서 VS Code가 왜 그토록 훌륭한지, 그리고 Microsoft가 어떻게 우리의 신뢰를 되찾았는지 살펴보겠습니다.

Visual Studio Code: 오픈 소스와 사랑

겉으로 보기에 Visual Studio Code는 대부분의 다른 편집기처럼 보입니다. 구문 강조 표시, 어두운 테마, 확장 등. 그러나 조금 더 깊이 파고들면 다른 많은 편집기 및 IDE와 달리 VS Code에서 얻는 경험이 부드럽고 - 말장난을 용서 - 숭고하다는 것을 알 수 있습니다.

VS Code의 가장 큰 장점은 오픈 소스라는 것입니다. 그러나 Atom도 마찬가지입니다(기술적으로 Microsoft도 GitHub를 인수했기 때문에 기술적으로 소유하고 있습니다). 게다가 마이크로소프트는 오픈소스 라이선스 중 가장 관대하고 개방적인 MIT 라이선스로 공개했다. 역사적으로 특허와 지적 재산권에 대해 매우 엄격했던 회사에게 이것은 큰 진전입니다.

이 라이선스 덕분에 VS Code는 전문적인 삶을 위해 소프트웨어를 사용할 뿐만 아니라 편집기 자체 또는 사용자 지정에 사용할 수 있는 여러 확장 및 플러그인에 기여하는 열성적인 개발자 커뮤니티를 지휘합니다. Visual Studio Code에 대한 MIT 라이선스의 범위에 대해 약간의 논쟁이 있지만, 이는 사용자나 대다수 개발자에게 영향을 미치지 않습니다.

올인원 IDE?

다음 은 오늘 의 질문입니다. VS Code는 코드 편집기입니까 아니면 IDE입니까? 내장된 Git 통합, 터미널 액세스 및 bash, 디버깅 콘솔, IntelliSense라는 특수한 종류의 구문 강조 표시 및 코드 완성 기능이 있습니다.

확장이나 사용자 정의가 전혀 없이 다운로드 즉시 모든 것이 가능합니다. 일반적으로 공식 개발 팀에서 내장 및 업데이트하는 이러한 종류의 기능은 PhpStorm과 같은 프리미엄 앱에서 사용할 수 있습니다. 하지만 VS Code를 사용하면 그 선이 흐려집니다. IDE와 유사한 많은 기능을 제공합니다.

그러나 결국, 꽤 전체 IDE 아니다. 기본 코드 리팩토링, 공식 언어별 업데이트 및 미래 보장, IDE가 통과할 수 있는 기타 무거운 것들을 얻을 수 없습니다. 즉, Visual Studio IDE가 있습니다. Microsoft가 수년 동안 만든 별도의 프리미엄 제품이며 Visual Studio Code는 Visual Studio 제품군의 또 다른 구성원입니다. 따라서 완전한 중량 IDE를 찾고 있다면 MS에서 구할 수 있습니다. 그러나 이것은 솔직히 매우 가까운 두 번째입니다.

또한 Visual Studio IDE가 있기 때문에 개발자가 Visual Studio가 아닌 VS Code 또는 단순히 Code라고 합니다. 그렇지 않으면 너무 혼란스러울 것입니다.

VS 코드: 즉시 사용 가능

지금까지 추측하지 못했다면 VS Code를 구성하는 많은 부분이 있습니다. 어떤 종류의 확장을 추가하거나 무엇이든 사용자 정의하기 전에 기본 사항과 모든 것이 즉시 작동하는 방식을 살펴보는 것으로 시작하겠습니다.

편집기를 처음 열면 두 가지 사항을 알 수 있습니다.

• 레이아웃과 디자인은 다른 편집기와 유사하므로 대부분의 사람들에게 친숙합니다.
• 대부분의 다른 코드 편집기보다 빠르게 로드됩니다(Atom, 우리는 당신의 방향을 찾고 있습니다)

반응 속도에 놀랐다면 왼쪽 사이드바로 이동할 수 있습니다. 여기에 VS Code와 함께 제공되는 대부분의 추가 도구가 있습니다.

측면의 기본 아이콘을 클릭하면 크기를 조정하고 사용자 지정할 수 있는 새 열이 각각 열립니다.

1. 익스플로러

VS Code의 기본 보기는 탐색기 탭입니다. 여기에는 문서에 대한 VS Code 속어인 Open Editors 라는 섹션이 표시됩니다. 열려 있는 각 파일은 새 편집기로 간주됩니다. 따라서 8개의 .css 파일이 열려 있으면 8개의 편집기 목록이 표시됩니다.

그런 다음 VS Code로 편집할 파일을 생성할 수 있는 열려 있는 프로그램 목록이 있습니다. 이 예에서는 내가 백그라운드에서 열어 놓은 유일한 것이 Snagit임을 알 수 있습니다. 그 아래에는 현재 파일의 골격을 표시하는 아웃라인 이 있습니다. 거대한 파일을 얻고 전체 구조의 하향식 보기를 가져와야 할 때 개요 보기는 실제로 화면 오른쪽의 미니맵보다 조금 더 부드럽게 작동합니다.

2. 검색

VS Code의 검색 기능은 놀랍습니다. 다른 편집자보다 강력하다는 것은 아닙니다(솔직히 말해서: 저는 Sublime Text에서 찾기/바꾸기를 좋아합니다). 다른 에디터보다 쉽고 투명하기 때문입니다.

검색을 수행하면 검색 용어의 각 인스턴스가 오른쪽 열의 맨 아래에 있습니다. 그런 다음 단일 인스턴스를 클릭하여 파일 내에서 검색어의 위치를 ​​강조 표시할 수 있습니다. (CTRL/CMD-클릭하면 새로 선택한 라인을 강조 표시하는 파일의 두 번째 인스턴스가 열립니다.)

두 번째 필드에서 용어를 바꾸 도록 선택하면 결과에 빨간색의 X 표시가 있는 버전의 검색어와 녹색 색조의 대체가 표시됩니다. 결과에서 찾기/바꾸기를 클릭하면 비교 비교가 표시되어 변경 사항을 미리 볼 수 있습니다. 이 기능은 매우 유용하여 이 기능 없이 어떻게 살았는지 궁금할 것입니다.

3. 힘내

나는 Git에 대한 접근 방식이 편향되어 있다고 말하면서 시작하겠습니다. 저는 명령줄/bash 사용자인 경향이 있으며 Git용 그래픽 클라이언트는 저에게 적합하다고 느껴본 적이 없습니다. 따라서 다른 편집기 및 IDE와의 많은 Git 통합은 제 몫이 아닙니다. 그러나 VS Code의 구현은 명령줄과 GUI 간의 하이브리드이며 선호하는 Git 버전에 관계없이 놀라울 정도로 잘 작동합니다. 그것을 얻으십시오 ... Git의 버전 ?

VS Code의 Git 통합에 대한 부분은 바로 작동한다는 것입니다. Git 아이콘을 클릭할 때 나타나는 왼쪽 열은 리포지토리의 상태를 시각적으로 표시합니다. 줄임표(…)를 클릭하여 일반적으로 매우 구체적으로 입력해야 하는 Git 명령을 확인할 수 있습니다. 상황에 맞는 메뉴를 통해 준비된 파일을 추가, 커밋, 푸시 및 수정할 수 있으며 다양한 분기에서 작업할 수 있습니다.

또한 편집기 자체에서 bash 터미널을 여는 옵션이 있습니다. 탐색 모음에 터미널 메뉴가 있으며 VS Code 내부의 메뉴는 사용자 정의할 필요 없이 빠르고 깨끗하며 매끄럽고 꽤 유용합니다. 필요한 경우 여러 열로 분할할 수 있으며 드롭다운을 통해 전환할 수 있는 여러 터미널에서 다양한 디렉토리를 열어 둘 수 있습니다.

터미널도 Git 전용이 아닙니다. 기능과 너무 잘 작동하므로 여기에 포함시키는 것이 자연스럽습니다.

4. 디버그 콘솔

디버그 콘솔 은 또한 다른 코드 편집기와 차별화되는 VS Code의 기본 기능 중 하나입니다. 이 글을 쓰는 현재, VS Code 내에서 설치할 수 있는 171개의 디버깅 환경이 있습니다 . 그들은 계산을 제공하지 않지만 알고 싶었고 당신도 그렇게 생각했기 때문에 수동으로 계산했습니다.

결과 내에서 상상할 수 있는 모든 것에 대한 디버거를 찾을 수 있습니다. JavaScript, CoffeeScript, Coffee, Java… 모든 카페인 브랜드 스크립트. LUA 환경과 Python 및 Ruby, Docker, PHP, SASS, LESS 등 모든 것을 얻을 수 있습니다. 내가 디버거를 찾으려고 했던 모든 모호하거나 죽은 프로그래밍 언어 중에서 QBasic은 어떤 결과도 얻지 못한 유일한 언어였습니다. 그리고 아무도 그것을 아주 오랫동안 사용하지 않았습니다. Extensions Marketplace에서 사용할 수 없는 현대적인 용도를 찾기가 어려울 것이라고 생각합니다.

5. 확장 마켓플레이스

그렇긴 하지만 Extensions Marketplace를 자세히 살펴보면 편집자의 개발 커뮤니티에서 기대할 수 있는 도구 종류에 대한 아이디어를 얻을 수 있습니다. 위의 스크린샷에서 일부 확장 프로그램에 설치된 수백만 건의 설치를 볼 수 있으며, 어디서부터 시작해야 할지 모르겠다면 설치 또는 인기도 별로 정렬하는 것이 가장 좋습니다.

@sort 매개변수를 사용하여 키워드별로 정렬 및 검색할 수 있습니다. 그러나 모든 옵션이 포함된 드롭다운의 줄임표 (2) 를 클릭할 수도 있습니다. 설치된 확장 프로그램을 관리하기 위한 옵션도 여기에 있습니다.

설치하려는 항목을 찾으면 수행하는 것은 매우 간단합니다. 녹색 설치 버튼을 클릭하고,

그런 다음 설치를 완료하려면 VS Code 편집기를 다시 로드 해야 합니다.

그게 다야 이 작업이 완료되면 확장을 사용할 준비가 된 것입니다. 하지만 종종 업데이트되고 색상으로 구분된 태그를 통해 다양한 문제가 다루어지기 때문에 때때로 세부 정보 탭으로 돌아가고 싶을 수도 있습니다.

종속성 및 취약성 상태를 확인할 수 있는 것은 훌륭하며 확장에 대한 미해결 문제와 일반적으로 문제를 해결하는 데 걸리는 시간을 확인할 수 있습니다. 모든 확장 프로그램이 모든 정보를 표시하는 것은 아니지만 표시할 때 매우 유용합니다.

키보드 단축키 및 키맵

코드 편집기 의 가장 중요한 부분은 바로 가기 키와 키맵일 것입니다. 우리가 이미 이야기한 모든 내용은 훌륭하며 편집자와 프로젝트의 성공에 필수적입니다. 그러나 키맵에 익숙해지고 근육 메모리를 통해 손가락이 사용하면 새 키맵으로 교체하는 것이 거의 불가능합니다.

기껏해야 스와핑은 프로젝트 일정을 늦추고 효율성을 감소시키며, 최악의 경우 엉망인 손가락으로 인해 코드베이스에 치명적인 주입이 발생합니다.

VS Code로 마이그레이션할 때 어디서 왔는지에 관계없이 커뮤니티에서 처리할 수 있습니다. VIM, Emacs, Sublime Text 또는 Notepad++에서 가져온 것이든 익숙한 단축키와 키맵을 유지할 수 있습니다. @recommended:keymaps로 Extensions Marketplace를 검색하거나 File – Preferences – Keymaps 로 이동하여 사용 가능한 확장 목록을 불러올 수 있습니다.

바로 가기에 대한 기본 설정이 없는 경우에도 괜찮습니다. 무엇이든 사용자 정의해야 할 필요가 있다고 느끼거나 기본적으로 VS Code에서 사용할 수 있는 키보드 단축키에 대한 개요를 원하는 경우 파일 – 환경 설정 – 키보드 단축키 로 이동할 수 있습니다.

기타 알아야 할 기능

일반적인 개요로서 이 시점에서 VS Code가 텍스트 및 코드 편집기로 제공할 수 있는 대부분을 볼 수 있어야 합니다. 즉, 알아야 할 몇 가지 유용한 정보가 있습니다.

1. 선택 메뉴

이것은 개발자 수준에 관계없이 유용하지만 일반적으로 편집자가 처음인 경우 특히 유용합니다. 선택 메뉴에는 매우 유용한 기능이 많이 있습니다.

특히 클릭 시 행 끝에 커서 추가 를 사용할 수 있는 것이 좋으며 메뉴로 이동하여 현재 파일 내에서 강조 표시된 단어, 구 또는 스니펫의 모든 항목 선택 으로 이동할 수 있습니다. 대부분의 편집기에는 이러한 단축키가 있지만 모든 편집자가 VS Code처럼 쉽게 레이블을 지정하거나 사용할 수 있는 것은 아닙니다. 당신이 사용할 가장 가치 있고 눈에 띄는 명령 중 일부이기 때문에 그것들을 정면에서 보는 것은 상쾌했습니다.

2. 터미널 메뉴

코드 편집기에서 작업한다고 해서 명령줄 마법사가 되는 것은 아닙니다. 사실, 위의 명령줄과 터미널 섹션을 보고 절대 사용하지 않을 거라고 생각했을 것입니다.

그러나 터미널 메뉴를 살펴보십시오. 많은 작업을 수행하지 않더라도 메뉴에서 실행할 수 있는 몇 가지 기본 명령이 표시되어 개발에 상당한 도움이 될 것입니다.

셸 명령을 알 필요 없이 메뉴를 통해 액세스할 수 있으면 많은 앱에서 놓치는 방식으로 터미널과 bash 및 명령줄이 열립니다. VS Code가 VIM이나 Emacs에서 온 베테랑 코더뿐만 아니라 모든 사람에게 진정으로 어필하는 것은 이와 같은 작은 터치입니다.

3. 젠 모드

보기 메뉴 아래에 Toggle Zen Mode 옵션이 포함된 Appearance 라는 하위 메뉴가 있습니다. 보기 아래의 다른 옵션은 확인하고 실험할 가치가 있지만 많은 사람들이 한 번도 시도해 본 적이 없을 것으로 예상하기 때문에 젠 모드에 주의를 환기시키고 싶습니다.

편집자마다 이름이 다를 수 있지만 일반적으로 현재 편집 중인 문서 만으로 전체 화면을 채우는 것이 좋습니다. 앱을 최대화하지 않고 문서를 최대화한다는 점에서 전체화면 모드와 다릅니다.

전체 화면이 VS Code 편집기로 덮여 있다는 것을 실제로 보여줄 수 없기 때문에 스크린샷으로 모드를 보여주기가 어렵습니다. Windows 작업 표시줄과 MacOS 독도. 화면 공간의 모든 픽셀은 현재 프로젝트에서 가져오므로 다른 작업에는 집중할 수 없습니다.

그리고 그것이 당신을 위한 것이 아니라면, 그냥 ESC를 누르십시오. 그러면 이전 보기로 돌아갑니다.

별 것 아닌 것 같고, 저는 회의론자였습니다. 그러나 Scrivener의 유사한 기능을 사용하여 소설을 쓴 후 저는 개종자가 되었습니다. 더 쉽게 흐름 상태에 들어가 실제로 작업을 완료할 수 있습니다. 우리가 원할 때마다(또는 가능한 한 많이) 이어폰을 꽂고 방해 없이 작업할 수 있도록 Zen 모드를 구현한 VS Code에 대해 많은 찬사를 보냅니다.

마무리

모든 것을 고려할 때 Visual Studio Code를 다운로드하지 않고 시도해 보십시오. Microsoft는 가장 안정적이고, 가장 지원되고, 가장 빠르고, 그에 비례하여 가볍고 기능이 많은 편집기를 내놓았습니다. 새로운 코더, 노련한 개발자 또는 올바른 도구를 찾고자 하는 취미 생활자...VS Code는 여러분을 염두에 두고 만들어졌습니다. 이는 달성하기 쉬운 위업은 아니지만 VS Code는 하드 드라이브에 있는 비트와 바이트의 가치가 있습니다. 이전에 삭제했다면 Microsoft를 다시 한 번 살펴볼 수도 있습니다.

VS Code에서 가장 좋아하는 부분은 무엇입니까? 스위치를 만드셨나요?