정보실

웹학교

정보실

javascript 2019 년 JavaScript 및 React의 Vim

본문

Here's 


이 기사에서는 Vim을 JavaScript 및 React (VS Code!)를 위한 완벽한 IDE로 변환하는 설정 및 Vim 플러그인을 공유하고 싶습니다.


원본 : https://www.vimfromscratch.com/articles/vim-for-javascript-and-react-in-2019


분명히 모든 것을 사용할 필요는 없습니다. 설치 및 작업 스타일에 맞는 것을 자유롭게 복사하십시오.


Essentials 


여기에 몇 가지 중요한 것들이 있습니다 (모두 범용입니다).

  • Plug 이 기사에서 사용되는 플러그인 관리자
  • 파일 트리를 탐색하는 NERDTree
  • FZF를 사용하면 프로젝트의 파일을 통해 퍼지 검색을 할 수 있습니다.
  • jiangmiao / auto-pairs는 입력 할 때 따옴표와 괄호를 쌍으로 삽입합니다
  • tpope / vim-commentary gcc를 눌러 선을 주석으로 표시하거나 gc를 눌러 선택 모드를 시각적 모드로 주석으로 표시


필수 플러그인에 대한 자세한 내용은 여기를 참조하십시오.


Syntax highlighting 


Vim은 구문 JavaScript 강조 표시와 함께 잘 작동합니다. 그러나 이상적이지 않습니다.


JavaScript를 위한 오래된 구식 플러그인은 화살표 함수이나 async/await 같은 일부 최신 기능에 문제가 있습니다.


다음은 이를 해결하는 데 도움이 되는 플러그인입니다.

또한 OceanicNext라는 이 색 구성표가 정말 좋습니다. Sublime과 약간 비슷합니다. 이 기사의 첫 번째 스크린 샷에서 볼 수 있습니다.


Formatting 


Vim에는 코드를 형식화 하는 특수 gq (: help 형식) 명령이 있습니다. 기본적으로 유용하지는 않지만 외부 프로그램을 사용하여 코드를 형식화 하도록 설정할 수 있습니다.


나는 거의 모든 것을 prettier 사용합니다.


먼저 설치하거나 최신 버전인지 확인하십시오.


npm install -g prettier 


그런 다음 이것을 Vim의 설정에 넣으십시오.

" FORMATTERS au FileType javascript setlocal formatprg=prettier au FileType javascript.jsx setlocal formatprg=prettier au FileType typescript setlocal formatprg=prettier\ --parser\ typescript au FileType html setlocal formatprg=js-beautify\ --type\ html au FileType scss setlocal formatprg=prettier\ --parser\ css au FileType css setlocal formatprg=prettier\ --parser\ css 


gq는 텍스트 객체와 결합 될 수 있으므로 매우 편리합니다.

  • gqgq 형식 현재 줄
  • gqip 형식 단락
  • gggqG 전체 파일 형식

마지막 하나는 내가 자주 사용하는 것이므로 이에 대한 매핑이 있습니다.


nnoremap <F5> mzgggqG`z 


Linting 


linter는 코드를 분석하고 가능한 오류나 서식 문제에 대해 알려줄 수 있는 바이너리입니다. Vim은 linter를 사용하고 플러그인의 도움으로 경고를 표시 할 수 있습니다 (실제로 여러 변형이 있음).


Vim 8이 출시 된 이래로 많은 사람들이 구 Syntastic 플러그인을 새로운 ALE 플러그인으로 빠르고 쉽게 사용자 정의하고 비동기식으로 교체했습니다. 마지막으로 linting이 발생해도 편집자가 더 이상 얼지 않게 됩니다. 또한 더 이상 생각할 필요가 없는 매우 다양한 언어, 린터 및 픽서를 지원합니다.

기본적으로 시스템에서 찾을 수 있는 만큼 많은 린터를 사용하려고 합니다. 나는 그것에 대해 조금 더 엄격하고 싶습니다. 특정 린터를 파일 형식과 연결하도록 사용자 지정하는 방법은 다음과 같습니다.


let g:ale_linters = { \ 'python': ['flake8', 'pylint'], \ 'javascript': ['eslint'], \ 'vue': ['eslint'] \} 


eslint와 같은 많은 린터도 코드를 수정할 수 있으므로 매우 편리합니다.


let g:ale_fixers = { \ 'javascript': ['eslint'], \ 'typescript': ['prettier', 'tslint'], \ 'vue': ['eslint'], \ 'scss': ['prettier'], \ 'html': ['prettier'], \ 'reason': ['refmt'] \} let g:ale_fix_on_save = 1 


마지막 옵션은 파일을 저장할 때마다 ALE가 파일을 자동 수정하도록 합니다. 그리고 이것은 정말 깔끔합니다.


또 다른 유용한 기능은] r / [r을 사용하여 다음 / 이전 오류로 이동하는 것입니다.


nnoremap ]r :ALENextWrap<CR> " move to the next ALE warning / error nnoremap [r :ALEPreviousWrap<CR> " move to the previous ALE warning / error 


Autocompletion 


Vim의 자동 완성에는 여러 옵션이 있습니다. Deoplete을 사용합니다. 주로 현재 설정에서 작동하기 때문입니다 (보통 Neovim을 사용합니다).


Deoplete는 엔진이므로 자동 완성 기능을 제공하지 않으며 가능한 모든 자동 완성 기능을 친숙한 인터페이스로 통합합니다.


Language Server 


저는 Microsoft에서 TypeScript로 대중화 한 비교적 새로운 언어 인 Language Server Protocol의 열렬한 팬입니다. 기본적으로 백그라운드에서 실행되고 코드베이스를 분석하는 별도의 서버 프로세스입니다. 그런 다음 Vim을 포함한 모든 편집기는 중요한 정보를 얻거나 명령을 보내는 클라이언트 역할을 할 수 있습니다.


언어 서버와 통합하면 편집기에서 자동 완성, 정의 이동 등과 같은 기능을 지원할 수 있습니다. 다른 언어를 위한 여러 언어 서버가 있으며, JavaScript를 위한 좋은 언어 서버가 있습니다.


npm으로 설치할 수 있습니다.


npm install -g javascript-typescript-langserver 


이전 섹션에서 설명한 ALE는 언어 클라이언트로 작동하는 몇 가지 기능이 있지만 순수한 JavaScript에 대해 올바르게 설정할 수 없습니다. 대신 별도의 플러그인을 사용합니다.


Plug 'autozimu/LanguageClient-neovim', { \ 'branch': 'next', \ 'do': 'bash install.sh', \ } 


언어 클라이언트는 백그라운드에서 서버를 시작할 수 있지만 특정 파일 유형에 사용할 서버 (이진)를 지정해야 합니다.


let g:LanguageClient_serverCommands = { \ 'javascript': ['javascript-typescript-stdio'] \ 'ruby': ['~/.rbenv/shims/solargraph', 'stdio'], \ } 


자, 이제 모두 설정되었으므로 Vim을 다시 시작할 수 있으며 멋진 명령을 모두 실행할 수 있습니다. 다음과 같은 매핑을 제안합니다.


nnoremap <leader>l :call LanguageClient_contextMenu()<CR> nnoremap K :call LanguageClient#textDocument_hover()<CR> nnoremap gd :call LanguageClient#textDocument_definition()<CR> nnoremap <leader>r :call LanguageClient#textDocument_rename()<CR> 


이제 <leader> l은 언어 서버로 할 수 있는 모든 일을 보여주는 메뉴를 엽니다.


다른 하나는 내가 가장 많이 사용하는 명령입니다.

  • K는 가능한 경우 사용 가능한 문서를 보여줍니다
  • gd는 커서 아래의 기호가 처음 정의 된 위치로 이동합니다.
  • <leader> r 커서 아래의 심볼 이름 변경

Laguage 서버는 정말 깔끔하며 더 흥미로운 일을 할 수 있습니다. 참조 및 지원되는 언어 표는 공식 웹 사이트를 참조하십시오.



  • 트위터로 보내기
  • 페이스북으로 보내기
  • 구글플러스로 보내기
  • 카카오톡으로 보내기

페이지 정보

조회 6회 ]  작성일19-10-10 10:37
Vim

웹학교