향상된 타입스크립트 개발 환경을 위해 Vim 구성하기

Vim은 빠른 코딩 환경을 제공하지만 언어 서버 지연으로 인해 대규모 TypeScript 프로젝트에서 어려움을 겪습니다.

### VS 코드 기능으로 Vim 환경 설정하기
* ⌨ 사용자가 좋아하는 VS Code 기능 중 일부를 모방하기 위해 **Vim 환경을 설정**하여 TypeScript 프로젝트에 집중했습니다.
* 🔌 플러그인 관리를 위해 NeoVim과 Vim-Plug를 사용했으며, VS 코드와 같은 자동 완성 기능을 위해 **가장 중요한 CoC(Conquer of Completion) 플러그인**을 설치했습니다.
* 🎨 사용자는 VS Code의 Dark+ 테마와 어울리는 **GrooveBox 테마**를 선택하고 파일 트리 탐색을 위해 **NERDTree 플러그인**을 추가했습니다.
* 🌳 Git 통합을 위한 플러그인으로 NERDTree가 개선되었지만 사용자가 **VS Code에서 색상으로 구분된 파일 상태를 완전히 복제하지 못**한다는 사실을 발견했습니다.
* 🔍 퍼지 검색을 위한 **CtrlP 플러그인**과 간편한 코드 주석을 위한 **NERDCommenter 플러그인**을 통해 파일 탐색이 개선되었습니다.
* 📊 Git 통합은 VS Code의 기본 기능과 유사하게 수정된 줄을 표시하는 **거터를 제공하는 플러그인**을 통해 이루어졌습니다.
* ⚙ 성공적인 설정에도 불구하고 사용자는 대규모 프로젝트에서 VS Code에서 경험한 것과 유사한 **TypeScript 언어 서버의 성능 문제**를 겪었습니다.
* 🤔 이러한 성능 문제로 인해 VS Code로의 복귀를 고려하고 있지만, 전반적으로 **Vim에서 재현할 수 있는 VS Code와 유사한 기능**에 만족하고 있습니다.

I'm a big fan of Vyas code and have been using the Vim extension with it. But lately, I've noticed specifically enlarged TypeScript projects that's been really laggy and really slow, and the Vim emulation is kind of just met overall. So, what I wanted to try to figure out is if I could set up Vim in a way that uses some of my favorite VS Code features. And so, what I did is over the past three days or so, I've tried configuring Vim to use some of Vyas Scott's features. Now, it doesn't cover all of them; I selectively picked some of the most important ones to me. So, I'm going to be showing you this setup that I got working that I'm actually pretty happy with. And I'll show you everything that I installed and how I set it up, and I'm gonna be walking through that here. If you prefer just to see the end results and look at the dot files for this, I'll put in the description the configuration file for Vim. Alright, so to

start off with what I decided was to go with neo vim over them. That seems just the, or at least vim 8. That seems to be the way to go for them these days, and this seems to be a better option overall. And then the next thing that I decided to go with this was to start installing some plugins, set stuff up. I went with vim plug. I was very happy with it. I've used it before and was overall really solid. And so what I'm gonna be doing is kind of switching back and forth between notion, where I have some notes of kind of what I set up, and then also I have here my own vim, which is just the Neo vim config file. And then you can see over here, over here, look at that. I have basically the keys that I am typing, so you can see the hotkeys that I'm using for this. I'm also using T MUX that I'm going to be just like switching between the two files here. So if you see control B here, this is my leader to

switch between just emulators or terminals, so that's T MUX if you're wondering what that is and why I'm pressing ctrl B to switch back and forth. All right, so this is the start of my configuration file where I just declare all the plugins. So this is what then plug does or how the syntax for it works, and here you can see these are each plugin that I have added. Now, the most important one to get started with, to start getting some of the villa's code features, is this one called conquer of completion or COC dot in vim. So have him add right here, and once you install this guy, he's pretty neat. So let's hop on over to the code, and I can show you some of the stuff we can get with this. So you can see right here I'm importing a function called create tokens. Just going to delete that, and then I'm going to start typing and notice I'm getting some auto-completion here. So this is thanks to that particular plugin, and I can also see on the right over here some

definition of for example that this is a prompt. It returns a promise. This create connection function so it's integrating nicely with TypeScript 2. But anyway, I can type my create tokens and I can hit enter. You're gonna see it finishes the word for me. It also automatically imports it, which is super sweet. And you can see here I can see just definition as well that it takes a user as a parameter. So I can pass any user, whatever I want. So this detection also we can see right here that a little pop-up telling me that I had don't have user defined. So this is all using that particular plugin. Now how this plugin works is you actually need to get a language server or it's running a language server in the background. And if I just search him, I mean hop over here. We'll talk about prettier in a second. These are the extensions that I'm using with it. So you install that base plugin and then it comes with other extensions that you can add into it. So I here have a JSON configuration, prettier, ESLint.

type syrup server pairs and snippets pairs. This is going to complete my / in there, that my parentheses snippets. I'll show that real quick. It's for example, if I do CL, you can see this is a custom snippet I did to do console.log. And how I did that is if I say, I actually forget what the command for this is. I think I have it right here. Yeah, let's copy this. Oops. So if I run this command here, install snippets. Actually, I don't want to install it on this one. That command that I just ran there is how you can individually install extensions. The one that I want is this one right here. So this is the edit snippets. I can see this is my snippets file. And this is how you add a snippet using it. So I gave it the prefix CL, and then I can use it in my code using Auto completion. Let's close out their room. So that's pretty nifty. Another thing that I use with this is GD, which is good to definition. So I'm hovering over this function here, and you can see

it actually took me to a separate file here. This is where the create tokens function came from. If I press ctrl o, I hop back here. I'm still kind of getting used to all the different hotkeys that I'm pressing again now, so bear with me there. But there you go, so that's go definition. Also, if I press command K, I can bring up my definition here for the particular function. Can also do it for whatever I want. And I'll say it wasn't anything else that I want to show with this. I showed go to, showed these two, and control spaces. What I actually bound, actually I think it came by default. So like for example here, you see how the auto completion windows not open. Control space will open this for me. All right, so I'm gonna just press Gd here, go to here, and I'm gonna press f2 to rename this. So another thing that I did is I tried to keep the hotkeys the same as Vyas code, that way I could switch between them if I needed to. So f tu is

rename envious code as well. I'm gonna rename create tokens to create tokens to, and I hit save. And now, if I go back control, oh, you can see it actually renamed this everywhere. So, you get that same cool effect where you get all completion auto imports renamed everywhere, all that fun stuff. You get envious code with this function, so it's super powerful and super nifty. I really like it. The other thing that I have integrated with it is prettier. So, that's an extension that I add to it. So, you can see here I can make it ugly, and I have it running on save. So, when I hit W, it'll actually format everything for me. And just to show you how I have that, all the stuff that I have here, this is a whole bunch of configuration. I just copy and pasted. There's actually a lot of it copy and pasted from the readme. All this stuff is from that, and I think I had to do a particular thing for prettier. If I go up here, I don't remember, and this I

actually need to put it down there. I don't know why I have it all the way up here. I'm glad to define a command here called prettier. That way, when I automatically saved the file, it'll run this command. And there's actually this other thing I didn't - I haven't actually mentioned this yet, but let's open up just a separate terminal here. And this is using T MUX, by the way, so that's not a vain thing. And we'll just open up config slash and them slash preferences. Actually, there we go. So this is another file that you can create to kind of give settings for the language server. So you can see I have no select set to false. And this one is actually - don't even remember what no select does, but I just remembered that was one of the settings that I liked to match with vs code. And this one, you can see I set prettier to format on save for these file types. So those are the things I'm doing. And against that, I can actually switch between these.

two team ox windows that's using a plug-in. This one, vim team ox navigator. It's pretty sweet. So I push ctrl L to go to the actually, yeah, to go to the right, and ctrl H to go to the left. I go confused for a second. I was like, why is ctrl L to the right? But that is how it works. All right, we'll close that, and we'll close that. I just remapped, had to change my leader 40 bucks. That's why I like it. Feels a little awkward to push control B right now. So yeah, so this is really the main plug-in that's gonna give you like that awesome Vyas code auto-completion and just Auto everything that is super fun about it. So I showed you, I think, everything related to that and the preferences and all that. The next thing is my theme. So this is really just a small thing. I actually really like the VS code default dark plus theme, and unfortunately, I couldn't get like a similar one that worked nicely, weird actually colored things the same. So what

I did instead was went with Grove box. This is another favorite of mine, and so that's this plug-in, and this is what looks like. You saw the syntax highlighting for this. This is another one, but one thing I noticed when I add this plug-in, it actually looks super ugly by default. I need to add a language sent or a syntax plugin, so I installed this TypeScript syntax plugin. Yeah, it's, and now it's been working great. It's been syntax highlighting stuff correctly, so that's the combination I'm using for just the color and what it looks like. Next up is Nerd Tree, so this is how I got files to show up or a file tree. So let's go back to my structure here. So I have it control in, and you see here's my file tree. Now I have a few extra things going on besides just like a default Nerd Tree configuration, which we're gonna get to it in a second. I bound it, I think it's a default bind, either Ctrl N is or they had me, yeah.

right here. I added a bind control and opened up the air toggles that tree. Okay, so the other things that installed this. So this. This is what this comes with. It's just a basic tree where you can, you know, click files. So I can click this, open up the file. Now, the way I actually navigate between these two trees is actually with the MT MUX navigator. So I'll actually push Ctrl L to go to the writing, Ctrl H to hop back and forth. So that's how I hop between the tree. So I can press Aziz to open and close files and whatnot, and you can do all your file tree-related stuff in here. I'm not going to go through all that stuff now. One of the nice things that I really like about the file tree in VS Code is that they color-code it. So you can see here that I've made a change in index, and so I can see that it's red, and I can also see that it basically has some errors in it with the TypeScript compiler. And that's

why it's red. Now, if I make a change in auth, for example, and it's a good change, like we'll just console.log hi, and I go to another file, it's gonna turn, I don't know what color this is, like an orange-yellow thing, tan. So, that's really nice. So, I basically, in my mind, I have this color association where I know whether their file is modified, deleted, new, that sort of thing. It's super handy. So, it integrates with git. So, one, like I see if I get a similar thing going, and I could get kind of a similar thing going. So, there's this plug-in called, not this one, well, it kind of integrates with this, but it's called a nerd tree git plug-in. There's two of them. So, there's this one, Bay, this dude, let's put them together, and let's Britain this guy down here. Alright, so these are the three plugins, well, these four, that really kind of go together with nerd tree here. So, these two, you can see, are doing the exact same

thing this one I could not get working properly, and this one actually maps colors to the files, but for a reason, it never looked correctly on mine. I don't know if it's because I have grabbed a boxed and like conflict with that theme. I tried disabling it. I tried a whole bunch of stuff. Couldn't get it working, and so I just settled for this one. And so, what this one does is it does little icons next to it, so you can see I have actually touched the index file, and I have touched the auth file, and you just see these modified, and we can see these X's up here for the folder tree. So, they have these little symbols. I don't like the symbols quite as much as the color coding, but I'll compromise there. So, that is what this plug-in here is doing, is that checks git, and it might basically set an icon next to the folder tree. And for this to work, it also uses the syntax highlighting one. Will actually a syntax highlighting one I installed with this, so maybe I don't

need this one now. We'll see, and you can see here I have a thing to comment stuff out. We'll talk about him in a second. I mean, there's this plug-in called dev icons. That's where you can see I have like TS and these sort of things going. Now, to get that working was kind of interesting because my font wasn't supported by default. So, I had to go to... I'm using Iterm too. So, I went to my preferences, and I actually installed a new font specifically for... Let's go. This specifically for... On this. It's a nerd font. So, I installed this font here. I'm trying out ligatures. I'm not sure if I actually like them or not, but I am trying them out. But yeah, so I had to actually install a separate font. And if you go to the readme of this guy, of dev icons, you can read about where you go to actually install the font. But after I install the font, it worked correctly, and I can see these little extensions here now. So, that's what these do. So, I got

like a decent file tree going on there with nerd tree. It's quite nice, but that's not the only way that I actually... oops, I kind of... oh yeah, I just reopened that. I was like, What'd I just do? That's not the only way that I actually like to navigate. So, I also like to navigate... whosh, I'll show it. Envious code first, command P opens up this little window here where I can, like, you know, go to different files. And it's a fuzzy finder of files. So, for that, there is this plugin that I got called ctrl P. And so, it works the same way. So, I hit... I actually just special binding to command P as well, so it matches. And so, I can type a file in here off, and then I can switch to it. It's been changed. Yeah, that's fine. And I can switch to the file. Now, notice one thing that I did is I have my nerd tree highlight the file that I have open here. That actually took a special configuration as well. So, that's what

this I have did like a little bit of code here. Where did I put it? I haven't organized this quite too well yet. Wall mat though, this is one thing I added. I had nerd tree ignore node modules, and I also had my fuzzy finder files ignore all files that are ignored by git, and that's what this command does: ignores a stuff in the ignore. They put it down here, yeah, here it is. So I have these two functions: is nerd tree open and sync a tree, and this buffer enter thingamabob err. What they do is whenever I switch files using command P and I type resolver, you'll see it highlights it here on the left automatically. So that is what that's doing. So that's pretty nice. This is the way I like to navigate now. Getting command P to work was actually kind of interesting. So if I go to, and this just kind of an AI term to thing in a Mac-specific thing because the command keys doesn't really bind well. So what I actually do is when I hit command P, it

actually sends: ctrl P, so it actually basically hits: here and actually types out ctrl P and launches it like that. So, that's how it actually got IMAP command P. I actually did it through I term and not through them. And I did basically a similar thing with my commenting out stuff, which we're going to talk about in a second. But yeah, so that's fuzzy finding files, so that's pretty handy. And this is just a fun way I like to navigate, similar to how you could do it in VS Code. Okay, so that is how I find files and stuff. Let's talk about this guy. I haven't talked about my comments are out yet, so I bound this to command slash, the same way you do it in VS Code, so I can select files and it counts them out. It's this plugin right here, Nerd Commenter. And to get him working, I mapped plus plus. I just picked an arbitrary keystroke that I was never gonna use, and it calls this function. And then in my I term to preferences profiles, no keys key.

bindings. I have command slash send plus plus, and it triggers that. And so I can select groups of code and command slash to do that. And we can hop over here, and we can do it with a real piece of code if you want to command slash comment it all out. File has changed just reading it. Do you really want to write it? Yeah, I do. Alright, so that's handy. What else do I have? I talked about that, and okay, so this is pretty much the last thing is the gutter. So, envious code, I can know where in my file I've changed stuff with this little gutter here. So, I can see I've added these lines here. I can see I modified this line 'cause it's blue. It's color code and stuff with my resolvers. I thought maybe there was a red one. Maybe red only shows up on the right over here. It's quite small too, but there you go. Color codes it. So, this gutter plug-in wears it here. This one here gets the same effect. So, here you see this a

little squiggly, and if I go to my index, you can see a squiggly here. And how it works is I think my leader is this slash. I actually forgot the things P maybe. No, I actually totally forgot what my key for this is. Basically, there's some key combination that I can press to get this effect, same as clicking here, and I can see the diff. I forget what my key combination is. I haven't memorized it yet for that. But yes, so I was able to get that with the gutter. That's pretty sweet. So, I like that a lot. And also, this one I do remember. If I can actually go to the next one by pressing the little bracket there. So, bracket my shade, press bracket once, and then I press C, and then it'll take me. I'll bracket C, bracket C, bracket C. And what it does is it just takes me to the next modified line. So, it's a pre-handy one. So, this gutter was pretty nice. And again, that's another one that integrates with Git and tells me which

line has changed. So, there you go. That is my configuration with all the plugins that I end up installing to get this working. I'm gonna put this entire file again in the description if you want to check out any of it. I think we went over most of it that was of relevance besides just a bunch of junk in there. And really, the conclusion I came down to playing around with this is it was actually really nice at first, and I forgot how nice it is to just type without lag. So, like, the vim stuff is really snappy, and when I press stuff and move around, it's really responsive, which was just quite a nice change from using VS Code Vim emulation for a while. And so, I liked that a lot, but everything else just feels like slightly worse in the VS Code version, which I'm kinda like about, but like, I'm okay with. But I think the biggest thing that I ran into is the server, or the TypeScript server, language server works great with small stuff at first like this, but I found when I tried

doing this in a large project, and maybe I just need to configure the language server. It was lagging just as bad as the VS Code was, so I think the real problem is these language servers don't work well for large projects, or at least I'm not configuring them well, or I'm doing something wrong that makes them really slow and really unresponsive. Because I was getting basically problems with them just as bad, which was unfortunate because it was working really nice at first. So yeah, I'm basically running into the same problem with basically there's the language server does not work as well as I'd like it, at least the TypeScript one. So I'm not sure if I'm gonna continue using this Vim setup, although it is pretty sweet. But yeah, that's pretty much it. I probably should be switching back to VS Code still, but this is what I would do if I was going to be using Vim today. But I'm getting the same lag, I might as well try to fix it in VS Code, but yeah.

That's pretty much where I'm at with it, you.

How to Configure Vim like VSCode

I'm a software developer who makes videos about React, React Native, GraphQL, Typescript, Node.js, PostgreSQL, Python, and all things coding.

Ben Awad

작성자는 느린 TypeScript 프로젝트 때문에 Vyas 코드용 Vim 확장 프로그램 사용에서 Neo Vim 설정으로 전환하고 있습니다.

Vim 플러그와 함께 플러그인을 설치하고 자동 완성 및 TypeScript 통합을 위해 COC 플러그인을 사용하고 있습니다.

이 설정에는 언어 서버와 JSON, Prettier 및 ESLint를 위한 추가 확장 기능도 포함되어 있습니다.

코드 편집기의 사용자 지정 코드 조각 및 키 바인딩

콘솔 로그에 대한 "CL"과 같은 사용자 지정 코드조각을 생성하고 자동 완성 기능을 통해 사용하는 방법을 시연합니다.

함수 정의로 이동하고 다양한 작업을 위해 단축키를 사용하는 'GD' 명령을 강조하여 VS Code의 바인딩과 일치하도록 합니다.

또한 저장 시 코드 서식을 지정하기 위해 Prettier를 통합하고 언어 서버 설정을 위한 구성 파일을 설정합니다.

플러그인을 사용하여 Vim 팀 설정하기

탐색에는 Vim Team Ox Navigator 플러그인이 사용되며, 오른쪽과 왼쪽 이동에는 Ctrl L과 Ctrl H를 사용합니다.

테마 사용자 정의에는 Grove Box 플러그인이 선택되었으며, 적절한 구문 강조를 위해 TypeScript 구문 플러그인으로 보완되었습니다.

Nerd Tree는 수정된 파일과 새 파일을 색상으로 구분하여 파일 탐색에 사용되며, 버전 관리를 위해 Git과 통합됩니다.

플러그인 및 글꼴로 파일 탐색하기

저자는 파일에 적합한 색상 매핑 플러그인을 구하는 데 어려움을 겪다가 아이콘을 사용하는 플러그인을 사용하기로 결정했습니다.

아이콘을 지원하기 위해 괴짜 글꼴을 설치하고 파일 확장명에는 개발자 아이콘 플러그인을 사용했습니다.

또한 퍼지 파일 찾기 플러그인인 ctrl P를 사용하여 파일을 탐색하고 너드 트리에서 열린 파일을 강조 표시하도록 구성했습니다.

편리한 파일 탐색 및 코드 주석 기술

이 스피커는 Ctrl + P 명령을 통해 파일을 찾는 독특한 방법을 사용합니다.

코드에 주석을 달기 위한 명령을 Command + 슬래시로 매핑하고, Nerd Commenter 플러그인을 사용하여 기능을 구현했습니다.

또한 거터 플러그인을 사용하여 색상 코딩과 수정된 줄 사이를 이동할 수 있는 키 조합을 통해 코드의 변경 사항을 시각적으로 추적합니다.

저자가 Vim 환경을 개선하기 위해 플러그인을 설치하는 구성을 공유합니다.

VS Code의 Vim 에뮬레이션과 비교했을 때 Vim의 빠르고 반응이 빠른 타이핑을 높이 평가합니다.

하지만 대규모 프로젝트에서 TypeScript 언어 서버의 지연이 발생하여 좌절감을 느끼고 Vim 설정의 효과에 의문을 품게 됩니다.