웹 개발의 주 편집기로 Vim 사용

5937 단어 vimwebdevjavascript
XKCD의'진짜 프로그래머'
당신에게 가장 적합한 코드 편집기나 IDE를 찾는 것은 개발자들이 코드를 어떻게 만드는지 배우는 과정에서 겪게 될 예상치 못한 과정 중 하나입니다.제 예에서 약 9년 전에 저는python 프로그래밍을 배우기 시작했습니다. 저는 매주 한 편집기에서 다른 편집기로 이동하는 것을 기억합니다. 첫 번째 편집기는 비어 있었습니다. 제 머릿속에서 보아 구조 함수, Komodo와Notepad++ 등을 시도한 것을 기억합니다.
go to editor를 찾는 동안 editor war를 이해하고 Vim과 Emacs에 대한 몇 가지 내부 농담을 이해하기 시작할 것입니다.

바로 이 점에서 당신은 Vim이나 Emacs를 배우기로 결정했고 토끼굴 여행이 시작되었습니다.
이 글의 제목을 통해 내가 가장 좋아하는 편집기가 Vim이라는 것을 알 수 있지만, 나는 네가 그것을 사용하도록 설득하거나, 현재의 개발 환경을 수정하여 Vim의 사용에 적응하도록 무수한 시간을 들이도록 설득하지 않을 것이다.
이 글의 목표는 Vim을 나의 웹 개발 프로젝트의 메인 편집기로 효과적으로 사용할 수 있도록 내가 실현한 맞춤형 제작을 공유하는 것이다.

웹 개발을 위한 Vim 플러그인
웹 개발자로서 대부분의 시간을 HTML, CSS, 자바스크립트 파일을 처리하고 있습니다. 취향이나 프로젝트의 요구에 따라 프레임워크 (React, Vue, Angular) 와 여러 가지 도구를 사용할 수 있습니다. 예를 들어 바벨, 웹 패키지, grunt 등입니다.
개인적으로 저는 플러그인을 최대한 적게 사용합니다. 플러그인이 가져다 주는 장점이 확실하게 존재할 때만 플러그인을 설치하는 것이 제 업무 흐름을 개선시켰습니다.
현재 설치된 플러그인은 다음과 같습니다.
  • 에이미트.vim
  • indentline&vim jsx pretty
  • vim평론
  • 싱거운 맥주(에스린트와 프리티르)

    • 에이미트.윌
    Emmet은 복잡한 HTML 구조를 한 줄 코드로 만들 수 있는 고속 인코딩과 편집을 위한 신기한 도구입니다.


    indentline&vim jsx pretty
    Vim 비주얼 스타일을 개선하기 위한 두 개의 플러그인입니다.indentline 들여쓰기 단계를 표시하기 위해 수직선을 추가하고 vim-jsx-pretty JSX 코드를 강조합니다. 예를 들어ReactJS를 사용할 때입니다.


    비평
    이 플러그인은 주석 코드를 쉽게 주석/취소할 수 있습니다. 원하는 코드를 선택한 다음 를 누르십시오.


    엷은 맥주 (에스린트와 빌리티르)
    ALE (비동기 헤드 엔진) 는 헤드와 정착기를 사용할 수 있도록 해 줍니다. 당신의 삶을 더욱 가볍게 해 줍니다. 당신이 필요로 하지 않는다고 생각하는 것 중 하나입니다. 당신이 시도할 때까지.내 예에서, 나는 주로 ALE를 사용하여 사용하기 prettier 를 하고, 동시에 Vim을 사용한다.


    실시간 미리 보기 구현(핫 리로드)
    실시간으로 사용자가 수정한 효과를 관찰하면 적극적인 방식으로 작업 절차에 큰 영향을 미칠 수 있습니다. 대부분의 경우, 이것은 개발 환경에서 구축된 것입니다. 예를 들어 React이나Gatsby 프로젝트에서, 간단한 웹 페이지 (HTML, CSS, 자바스크립트) 편집기 (예: Atom) 를 만드는 경우입니다.괄호나 VScode는 옆 패널에 라이브를 표시할 수 있습니다. 즉, 작업 중인 페이지를 표시할 수 있습니다.

    나는 고집이 세지만 Vim을 사용할 때 이 기능을 원했다. 비록 몇 개의 플러그인이 이 기능을 실현할 수 있지만, 나는 다른 길로 가기로 결정했다.
    이 예에서, 나는 편집기와 무관한 해결 방안을 실현하기로 결정했다. 이 예에서 기본적으로 우리는 로컬 서버를 실행하고, 파일의 수정 사항을 감시하며, 파일이 업데이트될 때마다 서버의 페이지를 업데이트해야 한다.
    이것은 실제 상황보다 더 복잡하게 들립니다. 프로젝트 폴더에 설치하고 실행하기만 하면 됩니다. browser-sync
    나는 당신의 시스템에 이미 설치되어 있다고 가정한다nodejs. 그러면 우리는 계속 전 세계에서 설치할 것이다browser-sync.
    npm install -g browser-sync
    설치browser-sync를 하면 시스템의 모든 폴더에서 실행할 수 있습니다. 로컬 서버(폴더의 기본 index.html 파일을 자동으로 표시)를 만들 수 있습니다.
    browser-sync start --server --files .
    Linux 내부에서 작업하고 있다면, 서버의 운행 과정을 간소화할 별명을 만들 수 있습니다.주 폴더의 .bashrc 파일을 열고 다음 내용을 추가합니다.
    # Command line alias to start the browser-sync server
alias serve="browser-sync start --server --files ."
    내 예에서, 나는 내 전용 네트워크의 서버를 방문하고, 몇 개의 장치에서 웹 페이지를 테스트할 수 있도록 더욱 진일보했다.
    # browser-sync config
# Get the current local IP address
export SERVER_IP=`hostname -I`

# The command alias to start the browser-sync server
alias serve="browser-sync start --server --files . --no-notify --host $SERVER_IP --port 9000"
    읽어줘서 고마워요!
    SpringData Jpa 의 @ Query 와 select 에 대한 이해
    Django에서 인증 코드 구현

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage