안녕하세요, JetBrains 한국 총판 단군소프트입니다.

오늘의 JetBrains 소식, WebStorm 및 기타 JetBrains IDE에서 Vim의 강력한 성능 이용하기입니다!

그럼, 시작해 보겠습니다.

개발자에게 예전부터 제공해왔던 IdeaVim은은 Vim의 강력한 기능을 JetBrains IDE에 확장할 수 있도록 도와주는 플러그인입니다. JetBrains 내에는 IDE를 지원하는 키보드 중심적 에디터로서 두 가지 장점을 모두 제공하기 위해 이 플러그인을 유지 관리하는 전담 팀이 있습니다.

Vim은 텍스트를 이동하고 수정할 수 있는 뛰어난 유연성을 제공합니다. 그 덕분에 이 플러그인은 개발자 사이에서 가장 인기 있는 텍스트 에디터 중 하나가 되었습니다. Vim에서는 마우스 없이 빠르게 탐색할 수 있어 매우 효과적으로 텍스트를 편집할 수 있습니다.

이 블로그 게시물에서는 IdeaVim 플러그인과 그 주요 기능은 무엇인지, 그리고 어떻게 사용을 시작할 수 있는지 자세히 살펴보겠습니다.

IdeaVim 플러그인 설치하기

IdeaVim 플러그인을 설치하려면 Preferences(환경 설정) / Settings(설정) | Plugins(플러그인)을 클릭하고 Marketplace 탭에서 IdeaVi을 검색하면 됩니다. 여기에서 플러그인을 설치하세요.

설치가 완료되면 이제 IDE에서 Vim을 사용할 준비가 되었습니다.

IdeaVim으로 작업할 때의 주요 차이점

Vim을 이미 경험해 보았다면 IdeaVim으로 작업하는 데 매우 익숙할 것입니다. 그렇지 않은 사용자를 위해 이 플러그인 사용을 시작하는 데 도움이 되는 몇 가지 사항을 소개해 드리겠습니다.

- Vim 처음 사용하기

Vim으로 작업하는 것이 처음이라면 준비하세요! 워크플로가 익숙한 것과는 매우 달라 생소한 느낌을 받을 수 있습니다. Vim은 상당히 키보드 중심적이며 Vim 키보드 바인딩에 익숙해지려면 시간이 걸립니다. Vim에 대해 가장 먼저 알아야 할 것은 Normal(일반), Insert(삽입), Visual(비주얼) 및 Command(명령어)와 같은 다양한 모드가 있다는 것입니다.

Normal 모드: Esc

Normal 모드는 Vim을 독특하게 만들어줍니다. 이 모드에서는 키를 눌러도 텍스트가 변경되지 않습니다. 대신, 에디터 주변을 이동하는 단축키와 같은 기능을 합니다. 캐럿이 평소보다 두꺼우면 Normal 모드에 있다는 의미입니다.

기본 이동 명령에는 다음이 포함됩니다.

● h – 커서를 왼쪽으로 한 문자 이동합니다.

● l – 커서를 오른쪽으로 한 문자 이동합니다.

● k – 커서를 한 줄 위로 이동합니다.

● j – 커서를 한 줄 아래로 이동합니다.

● w – 단어 단위로 앞으로 이동합니다.

● b – 단어 단위로 뒤로 이동합니다.

● 0 – 줄의 맨 앞으로 이동합니다.

● $ – 줄 끝으로 이동합니다.

이동 명령에는 그 밖에 다른 것들도 있지만 시작하는 데 도움이 되도록 중요한 것들만 소개한 것이며 가장 일반적으로 사용할 수 있는 커서 이동 옵션 중 일부를 강조 표시했습니다. 또한 이동 명령을 숫자와 결합할 수도 있습니다. 예를 들어, 8j는 커서를 8줄 아래로 이동하고 6k는 커서를 다시 6줄 위로 이동합니다.

삽입 모드: i

삽입 모드는 대부분의 사람들에게 이미 익숙한 동작 유형입니다. 삽입 모드에 있을 때는 일반 텍스트 에디터처럼 입력할 때 문자가 추가됩니다. 삽입 모드로 전환하려면 삽입 명령 중 하나를 사용해야 합니다. 캐럿이 가늘게 표시되면 삽입 모드에 있는 것입니다.

기본 삽입 명령에는 다음이 포함되어 있습니다.

● i – 커서가 있는 위치에서 vim을 삽입 모드로 전환합니다.

● a – 커서를 현재 문자 다음으로 이동하고 삽입 모드로 전환합니다.

● o – 현재 줄 아래에 새 줄을 삽입하고 새 줄에서 삽입 모드로 전환합니다.

이러한 명령은 대문자 형태인 경우, 약간 다른 효과를 나타냅니다.

● Shift+I – 커서를 줄의 맨 앞으로 이동하고 삽입 모드로 전환합니다.

● Shift+A – 커서를 줄 끝으로 이동하고 삽입 모드로 전환합니다.

● Shift+O – 위에 새 줄을 삽입하고 새 줄에서 삽입 모드로 전환합니다.

비주얼 모드: v

또 다른 기본 모드 유형은 비주얼 모드입니다.

비주얼 모드에서는 이동 명령을 사용하여 선택 영역을 조정한 다음 `d `와 같은 다른 명령을 사용하여 선택한 텍스트를 삭제하거나 `y`(단어 “yank”에서)를 사용하여 강조 표시된 텍스트를 복사할 수 있습니다. 간단히 말해서 이 모드를 사용하면 명령을 수행할 텍스트를 선택할 수 있습니다.

기본 비주얼 명령에는 다음이 포함됩니다.

● v – 캐럿이 있는 문자를 강조 표시합니다.

● Shift + V – 전체 줄을 강조 표시합니다.

● d – 강조 표시된 텍스트를 삭제합니다.

● y – 강조 표시된 텍스트를 복사합니다.

명령 모드: :

명령 모드를 사용하여 코드 전체에서 다양한 명령을 수행할 수 있습니다. 명령 모드는 ‘:‘을 눌러 들어갈 수 있습니다. 그러면 에디터 창 하단에 명령을 입력할 수 있는 명령 상자가 열립니다. 마찬가지로 ‘/‘를 사용하여 에디터 창 하단에서 패턴을 검색할 수 있는 검색 상자를 열 수 있습니다.

기본 명령에는 다음이 포함됩니다.

● :w – 파일을 저장합니다.

● :100 – 100번째 줄로 이동합니다.

● / – 검색합니다.

이러한 명령은 IdeaVim의 매우 기본적인 키 매핑 중 일부일 뿐입니다. Vim 스타일의 이동에 익숙해질수록 텍스트 에디터를 통한 탐색이 훨씬 빨라질 수 있습니다. Vim에는 IdeaVim에서 지원하는 다른 많은 명령이 있으며, 시간을 들여 연습하면 효과적으로 활용할 수 있습니다.

- JetBrains IDE를 처음 사용하는 경우

IDE를 사용하면서 알 수 있는 가장 중요한 차이점은 리팩터링, 디버그 및 테스트 기능을 사용할 수 있다는 것입니다. JetBrains IDE에서는 특정 언어 지원 및 빠른 검색을 위해 환경을 설정하는 데 시간을 들일 필요가 없습니다. 또한 라이브 템플릿 제안 및 코드 완성의 이점도 얻을 수 있습니다.

Vim과 IdeaVim을 사용하면서 알 수 있는 한 가지 주된 차이점은 기본적으로 IdeaVim은 에디터 외부에서 작동하지 않는다는 것입니다. 완전한 Vim 경험을 원한다면 IdeaVim을 확장하고 Vim과 같은 경험을 할 수 있게 해주는 여러 플러그인을 사용할 수 있습니다.

추가 Vim 플러그인

EasyMotion

vim-easymotion을 에뮬레이트하고, 코드에서 원하는 지점으로 이동하는 데 필요한 키 입력 수를 최소화하는 간단한 목표를 가지고 있습니다.

우선, 추가 플러그인을 설치해야 합니다. 그런 다음 .ideavimrc 파일에 다음 스니펫을 추가해야 합니다. Plug 'easymotion/vim-easymotion'

NERDTree

NERDTree 플러그인을 사용하면 Vim 스타일 키 바인딩을 사용하여 프로젝트 창을 탐색할 수 있습니다. 이것은 NERDTree를 에뮬레이트합니다.

.ideavimrc 파일에 다음 스니펫을 추가합니다.

Plug 'preservim/nerdtree`

map <c-t>:NERDTree<CR>

.ideavimrc 파일을 사용하여 NERDTree에 더 많은 명령을 추가할 수 있습니다.

이 플러그인은 Vim과 더 유사한 경험을 만드는 데 사용할 수 있는 플러그인 확장의 일부 예에 불과합니다. IdeaVim을 위한 필수 Vim 플러그인의 전체 목록을 보려면 이 페이지를 확인하세요.

JetBrains IDE에서 IdeaVim 사용하기

- .ideavimrc 파일 구성

IdeaVim과 Vim의 주된 차이점 중 하나는 JetBrains IDE가 ~/.vimrc 대신 ~/.ideavimrc 구성 파일을 사용한다는 것입니다.

이미 Vim 사용자이고 vimrc 파일을 원하는 대로 설정했다면 IdeaVim에서도 해당 설정을 사용할 수 있습니다. 해당 ideavimrc 파일에 source ~/.vimrc를 추가하기만 하면 됩니다.

Vim을 처음 사용하는 경우라면 이 부분에 특히 주의해야 합니다. Vim, 그리고 더 확장하여 IdeaVim에서는 IDE를 시작할 때 실행되는 구성 파일을 설정할 수 있습니다. 기본적으로 설정을 구성할 수 있도록 이 파일에 명령 세트를 추가할 수 있습니다.​

이 파일은 메인 디렉터리에 직접 만들어야 합니다.

ideavimrc 파일 만들기

상태 표시줄에 IdeaVim 아이콘이 있습니다. IdeaVim 아이콘을 클릭하고 Create ~/.ideavimrc를 선택하기만 하면 됩니다. 그런 다음 IDE에서 이 파일을 수정할 수 있습니다. 다른 사람들이 설정 작업을 어떻게 수행했는지 몇 가지 좋은 예를 보려면 이 토론을 확인하세요

- IDE 액션에 Vim 단축키 바인딩하기

IdeaVim은 Vim과 IDE 사이의 가교 역할을 하여 두 영역의 장점을 모두 제공합니다. Vim 단축키를 map r <Action> (ReformatCode)와 같이 IDE 액션에 바인딩할 수 있습니다. 즉, r을 사용하면 IDE에서 코드 서식 다시 지정을 호출할 수 있고 IDE 코드 서식 다시 지정 기능이 사용됩니다.

IdeaVim은 IDE 액션을 실행 가능한 명령으로 나열 및 실행을 위한 여러 명령어와 :map 명령 매핑을 통해 다양한 명령어를 추가합니다.

매핑의 경우, 특수 <Action> 키워드를 사용할 수 있습니다.

예: map gh <Action>(ShowErrorDescription)​

그러면 gh를 누를 때 마우스 오버가 실행됩니다.

다음은 많이 이용되는 몇 가지 액션의 예입니다.

● QuickJavaDoc – 빠른 문서(모든 언어)

● ShowErrorDescription – 캐럿 아래에 오류에 대한 설명을 표시합니다(커서 호버링).

● QuickImplementations – 텍스트 캐럿 아래의 심볼에 대해 좀 더 자세히 설명하는 도구 설명을 제공합니다.

참고: 한 번만 사용하려는 경우 명령 상자에서 액션을 실행할 수도 있습니다.​

액션을 실행하려면 다음 :action {action_id} 시퀀스를 사용하세요. 이 명령은 코드에서 해당 액션을 실행합니다. 예를 들어, :action ShowErrorDescription은 IDE에서 Show Error Description(오류 설명 표시) 액션을 실행합니다.

ideajoin

JetBrains IDE에는 Smart Join 기능이 있어 코드 컨텍스트를 이해하고 조인될 때 그에 따라 코드 형식을 지정할 수 있습니다. 따라서 표준 Vim 조인 명령 j를 사용할 때 IDE는 여전히 Smart Join 기능을 사용합니다. 이 기능을 사용하려면 ~/.ideavimrc 파일에 set ideajoin을 추가하기만 하면 됩니다. 여기에서 Smart Join이 코드를 처리하는 방식의 예를 볼 수 있습니다.

ideaput

마지막으로, 놓쳐서는 안되는 중요한 것은 Ideaput을 활성화하는 것입니다. 이렇게 하면 IDE 삽입을 사용할 수 있으므로 클립보드에서 정상적으로 내용을 붙여넣을 수 있습니다. 이것이 없으면 다소 답답할 수 있습니다.

- Vim 키맵 익히기

Vim을 잘 사용하려면 많은 연습이 필요합니다. IDE에서 Vim 스타일 편집에 능숙해지려면 완전히 몰입하여 Vim만 사용하는 것이 가장 좋습니다. 그러나 이런 식으로 작업하는 것이 생산성에 방해가 되는 경우가 있습니다. Vim 에뮬레이션을 중지하려면 상태 표시줄에서 IdeaVim 아이콘을 클릭하고 Enabled(사용됨)를 선택 취소하여 언제든지 사용을 중지할 수 있습니다.

보너스 팁: Vim 동작을 기억하는 데 어려움이 있다면 온라인에서 아주 멋진 Vim 키맵 치트 시트 이미지를 찾을 수 있습니다. 그런 다음 IDE에서 이미지를 배경으로 설정할 수 있습니다. Preferences(환경 설정) / Settings(설정) | Appearance & Behavior(모양 및 동작) | Appearance(모양)를 클릭하고 Background Image(배경 이미지) 버튼을 클릭합니다.

Vim을 WebStorm 또는 기타 JetBrains IDE와 함께 사용하려는 모든 사용자에게 이 정보가 유용했기를 바랍니다. 공유하고 싶은 팁이나 트릭이 있으면 아래의 댓글 섹션을 자유롭게 이용하세요. 이러한 내용이 마음에 들고 IdeaVim 사용에 대한 고급 가이드를 보고싶다면 저희에게 알려주세요.

다음 게시물도 유용한 정보로 찾아뵙겠습니다.

긴 글 읽어주셔서 감사합니다

출처:  https://blog.jetbrains.com/ko/webstorm/2022/11/ideavim-in-webstorm/