Windows에서 Bash로 JavaScript 개발 이동

게시 됨: 2022-03-10
빠른 요약 ↬ Bash 터미널도 좋지만 PC도 좋아하시나요? 새로운 Surface 하드웨어 중 일부를 눈여겨 보았지만 터미널 없이는 전환할 수 없습니다. 이제 Windows와 Bash를 사용할 수 있습니다. 이 기사에서는 JavaScript 개발을 위해 Windows/Linux 개발 상자를 설정하는 방법을 자세히 살펴보겠습니다.

저는 Bash 터미널 없이는 살 수 없는 사람 중 하나입니다. 이 유일한 사실 때문에 Windows에서 프론트엔드 작업을 하는 것이 어려웠습니다. 저는 Microsoft에서 일하고 Mac을 사용합니다. 몇 년 전 새로운 Surface 하드웨어 라인이 나올 때까지 저는 깨달았습니다.

그래서 하나 얻었습니다. 정확히는 Windows 10을 실행하는 Surface Book 2. 나는 지금 그것에 대해 이 글의 초안을 작성하고 있다. 그리고 내 달콤하고 달콤한 Bash 프롬프트는 어떻습니까? 아, 물론 저도 가지고 왔습니다.

이 기사에서는 Windows 10의 새로운 기술을 통해 Windows에서 전체 Linux 터미널을 실행할 수 있는 방법을 자세히 살펴보겠습니다. 또한 내 놀라운 터미널 설정("사상 최고"로 "나")과 Windows/Linux 개발 시스템을 직접 설정할 수 있는 방법도 보여 드리겠습니다.

Surface 하드웨어 중 일부를 갈망했지만 Linux 터미널 없이는 살 수 없다면 올바른 위치에 왔습니다.

참고 : 이 글을 쓰는 시점에서 이 기사의 많은 항목은 Windows를 포함한 다양한 항목의 "미리 보기" 또는 "내부자" 빌드를 사용하거나 전환해야 합니다. 이러한 것들의 대부분은 미래의 어느 시점에서 메인 Windows 빌드에 포함될 것입니다.

점프 후 더! 아래에서 계속 읽기 ↓

Linux용 Windows 하위 시스템(WSL)

Linux용 Windows 하위 시스템 또는 "WSL"은 Windows에서 Linux를 실행할 수 있게 해주는 것입니다. 그러나 이 미친 과학 정확히 무엇입니까?

현재 구현된 WSL은 Linux 시스템 호출을 Windows 시스템 호출로 변환하는 변환 계층입니다. Linux는 WSL 위에서 실행됩니다. 즉, Windows에서 Linux를 사용하려면 다음 세 가지 작업을 수행해야 합니다.

  1. WSL을 활성화합니다.
  2. 리눅스를 설치하고,
  3. 항상 목록에 세 가지 항목을 포함합니다.

결과적으로, 그 번역 레이어는 약간 느린 면에 있습니다. 마치 내가 splice 또는 slice 가 필요한지 기억하려고 노력하는 것과 같습니다. WSL이 파일 시스템을 읽고 쓸 때 특히 그렇습니다. 적절한 npm install 가 수천 개의 파일을 컴퓨터에 복사하기 때문에 웹 개발자에게는 큰 문제입니다. 내 말은, 나는 당신에 대해 모르지만 내 자신의 문자열을 왼쪽으로 채우지 않을 것입니다.

WSL 버전 2는 다른 이야기입니다. 번역 계층을 사용하는 대신 Windows의 가상화 코어를 활용하기 때문에 현재 버전보다 훨씬 빠릅니다. 내가 "상당히 더 빠르다"고 말할 때, 나는 훨씬 더 빠르다는 것을 의미합니다. 나만큼 빠른 인터넷 검색 "splice vs slice".

그런 이유로 WSL 2를 설치하는 방법을 보여 드리겠습니다. 이 글을 쓰는 시점에서 Windows의 "내부자" 빌드에 있어야 합니다.

가장 먼저 할 일: 이 짧은 가이드에 따라 Windows 10에서 WSL을 활성화하고 Windows 버전 번호를 확인하십시오.

설치가 완료되면 Windows 키를 누르고 "windows insider"를 입력합니다. 그런 다음 "Windows 참가자 프로그램 설정"을 선택하십시오.

Windows 참가자 프로그램 설정 메뉴 옵션
(큰 미리보기)

어떤 "반지"에 있고 싶은지에 대해 몇 가지 다른 옵션이 있습니다. 내가 아는 많은 사람들이 패스트 링에 있습니다. 그래도 나는 조심스러운 사람이다. 내가 어렸을 때 나는 옆구리를 잡고 배를 타고 놀이터에서 미끄럼틀을 타고 내려갔다. 이것이 내가 느린 링에 머무르는 이유입니다. 나는 몇 달 동안 그것을 사용했으며 일반 Windows보다 더 방해가되거나 불안정하지 않다는 것을 알았습니다.

WSL 2를 원하지만 슬라이드에서 죽고 싶지 않다면 좋은 선택입니다.

"느림" 링이 표시된 Windows 참가자 설정 화면
(큰 미리보기)

참고 : 이 기사를 게시한 후 WSL 2가 실제로 느린 링에 있지 않다는 것을 알게 되었습니다. 그것을 얻으려면 패스트 링에 있어야합니다. 나는 이 기사를 작성하는 과정의 어느 시점에서 빠른 링 위에 있어야 합니다. 너무 빠른 반지입니다. 슬라이드에서 행운을 빕니다!

다음으로 WSL 버전 2에 필요한 Windows의 "가상 머신 플랫폼" 기능을 활성화해야 합니다. 이 화면으로 이동하려면 Windows 키를 누르고 "Windows 기능"을 입력합니다. 그런 다음 "Windows 기능 켜기 또는 끄기"를 선택하십시오. "가상 머신 플랫폼"을 선택하십시오. "Linux용 Windows 하위 시스템" 옵션이 이미 활성화되어 있어야 합니다.

"가상 머신 플랫폼" 및 "Linux용 Windows 하위 시스템"이 강조 표시된 "Windows 기능" 화면
(큰 미리보기)

이제 WSL이 활성화되었으므로 Linux를 설치할 수 있습니다. 아이러니하게도 Windows Store에서 직접 이 작업을 수행합니다. 2019년에만 "Windows 스토어에서 Linux를 설치"할 것을 제안합니다.

선택할 수 있는 다양한 배포가 있지만 Ubuntu는 VS Code를 포함하여 나중에 구성할 모든 도구에서 가장 많이 지원될 것입니다. 여기에서 나오는 모든 지침은 Ubuntu 설치를 가정합니다. 다른 배포판을 설치하면 모든 내기가 꺼집니다.

Windows 스토어에서 "Ubuntu"를 검색합니다. Ubuntu, Ubuntu 18.04 및 Ubuntu 16.04의 세 가지 중에서 선택할 수 있습니다. Ubuntu는 04 마이너 버전 번호를 정말 좋아합니다. 그렇죠?

Windows 스토어의 "Ubuntu" 항목
(큰 미리보기)

"Ubuntu" 배포판(이 스크린샷의 첫 번째 배포판)은 "메타 버전"이거나 최신 버전을 가리키는 자리 표시자입니다. 현재로서는 18.04입니다.

나중에 Windows 탐색기를 사용하여 Linux 파일 시스템을 탐색하는 방법을 보여드릴 것이고 드라이브 이름으로 "Ubuntu 18.04"를 사용하고 "Ubuntu"만 사용하는 것은 다소 지저분하기 때문에 메타 버전을 사용했습니다.

이 설치는 인터넷 연결에 따라 매우 빠릅니다. 약 215MB에 불과하지만 저는 여기에서 기가비트 연결을 사용 중입니다. 누군가가 기가비트 연결을 사용 중인지 어떻게 알 수 있습니까? 걱정하지 마세요. 그들이 알려줄 것입니다.

설치가 완료되면 시작 메뉴에 "Ubuntu" 앱이 표시됩니다.

Ubuntu가 설치되어 Windows 시작 메뉴에 표시됨
(큰 미리보기)

클릭하면 Bash 터미널이 나옵니다!

Windows에서 실행되는 Ubuntu 터미널
(큰 미리보기)

잠시 시간을 내어 기술의 기적을 만끽하십시오.

기본적으로 WSL 버전 1에서 실행됩니다. 버전 2로 업그레이드하려면 PowerShell 터미널을 열고 명령을 실행해야 합니다.

"Windows" 키를 누르고 "Powershell"을 입력합니다.

시작 메뉴의 "Powershell" 항목
(큰 미리보기)

PowerShell 터미널에서 wsl --list --verbose 를 실행하여 보유하고 있는 WSL 버전을 확인할 수 있습니다.

Powershell 내에서 실행되는 모든 WSL 인스턴스의 자세한 목록 수행
(큰 미리보기)

버전 1을 표시하는 경우 --set-version 명령을 실행하고 인스턴스 이름(Ubuntu)과 원하는 버전(2)을 지정해야 합니다.

 wsl --set-version Ubuntu 2 
Powershell을 사용하여 WSL 버전을 버전 2로 설정
(큰 미리보기)

기계의 고기 양에 따라 시간이 조금 걸립니다. 광산은 "몇 분"의 기브 또는 테이크가 필요했습니다. 완료되면 최신 버전의 WSL을 사용하게 됩니다.

Linux에서 당신의 두뇌는... Windows에서.

리눅스는 윈도우가 아니다. WSL은 Windows 운영 체제 위에 있는 bash 프롬프트가 아닙니다. 자체 폴더 구조와 설치된 응용 프로그램이 있는 완전한 운영 체제입니다. Windows 설치 프로그램으로 Node를 설치하는 경우 Linux에 Node가 설치되어 있지 않기 때문에 Linux에서 node 를 입력하면 실패합니다. Windows에 설치되어 있습니다.

WSL의 진정한 매력은 Windows와 Linux를 원활하게 연결하여 시스템에서 하나의 파일 시스템으로 표시하는 방식에 있습니다.

파일 및 폴더 탐색

기본적으로 Ubuntu 터미널은 Linux 홈 디렉토리(또는 /home/your-user-name )로 이동합니다. /mnt/c 로 이동하여 Windows 측으로 이동할 수 있습니다.

C 드라이브의 내용이 나열된 Ubuntu 터미널
(큰 미리보기)

여기에서 일부 권한이 거부되었습니다. 이 파일에 액세스하려면 Ubuntu 아이콘을 마우스 오른쪽 버튼으로 클릭하고 "관리자 권한으로 실행"을 클릭해야 합니다. 이것이 Windows가 상승된 권한을 수행하는 방법입니다. Windows에는 sudo가 없습니다.

애플리케이션 실행

Ubuntu 터미널에서 모든 Windows 응용 프로그램을 시작할 수 있습니다. 예를 들어, Unbuntu 터미널에서 Windows 탐색기를 열 수 있습니다.

Windows 탐색기와 Ubuntu 터미널
(큰 미리보기)

이것은 역으로도 작동합니다. Linux 측에 설치된 모든 애플리케이션을 실행할 수 있습니다. 여기서는 Windows 명령줄에서 Linux에 설치된 "fortune"을 실행하고 있습니다. (무의미한 무작위 운이 없으면 적절한 Linux 설치가 아니기 때문입니다.)

Linux "fortune" 프로그램을 실행하는 Windows 명령줄
(큰 미리보기)

두 개의 서로 다른 운영 체제. 두 개의 서로 다른 파일 시스템. 설치된 응용 프로그램의 두 가지 다른 집합입니다. 이것이 어떻게 혼란스러울 수 있는지 보시겠습니까?

모든 것을 올바르게 유지하려면 모든 JavaScript 개발 파일과 도구를 Linux 측에 설치하는 것이 좋습니다. 즉, Windows와 Linux 사이를 이동하고 두 시스템의 파일에 액세스하는 기능은 WSL의 핵심 마술입니다. 이 전체 설정을 표준 Linux 상자보다 더 낫게 만드는 이유가 무엇인지 잊지 마십시오.

개발 환경 설정

지금부터 Windows 설정에서 킬러 Linux를 만드는 데 도움이 된다고 생각하는 항목 목록을 제공하겠습니다. 기억하십시오. 제 의견은 그저 그렇습니다. 의견 . 내 모든 의견과 마찬가지로 100% 옳습니다.

더 나은 터미널 얻기

예, Ubuntu를 설치할 때 터미널이 있습니다. 실제로 Linux 배포판에 연결된 Windows 콘솔입니다. 나쁘지 않은 콘솔입니다. 크기를 조정하고 복사/붙여넣기를 켤 수 있습니다(설정에서). 그러나 탭이나 새 창 열기와 같은 작업은 할 수 없습니다. 많은 사람들이 Mac에서 대체 터미널 프로그램을 사용하는 것처럼(저는 Hyper를 사용합니다) Windows에도 다른 옵션이 있습니다. Github의 Awesome WSL 목록에는 매우 포괄적인 목록이 포함되어 있습니다.

모두 훌륭한 에뮬레이터이지만 Windows를 잘 아는 사람들이 만든 새로운 옵션이 있습니다.

Microsoft는 "Windows Terminal"이라는 새로운 응용 프로그램을 개발하고 있습니다.

Windows 스토어의 Windows 터미널 항목
(큰 미리보기)

Windows 터미널은 Windows 스토어에서 설치할 수 있으며 현재 미리 보기 모드입니다. 나는 꽤 오랫동안 그것을 사용해 왔으며 충분한 기능을 가지고 있고 내가 그것을 전적으로 지지할 만큼 충분히 안정적입니다.

새로운 Windows 터미널은 전체 탭 인터페이스, 복사/붙여넣기, 다중 프로필, 투명한 배경, 배경 이미지, 심지어 투명한 배경 이미지를 제공합니다. 터미널을 커스터마이징하고 싶다면 필드 데이입니다. 저는 이 약탈 경주에서 이기려고 왔습니다.

여기 내 현재 터미널이 있습니다. 여기에서 몇 가지 중요한 조정을 살펴보겠습니다.

작성자의 현재 터미널: 오른쪽 하단 모서리에 만화 행성이 있는 진한 파란색 배경. 녹색과 흰색 텍스트입니다.
(큰 미리보기)

Windows 터미널은 사용자 정의가 가능합니다. 왼쪽 상단(" + " 기호 옆)에 있는 " " 화살표를 클릭하면 "설정"에 액세스할 수 있습니다. 그러면 JSON 파일이 열립니다.

바인딩 복사/붙여넣기

파일의 맨 위에는 모든 키 바인딩이 있습니다. 내가 한 첫 번째 일은 "복사"를 Ctrl + C 에 매핑하고 Ctrl + V 에 붙여넣는 것입니다. 이해하지 못하는 스택 오버플로의 명령을 복사하여 붙여넣으려면 어떻게 해야 합니까?

 { "command": "copy", "keys": ["ctrl+c"] }, { "command": "paste", "keys": ["ctrl+v"] },

문제는 Ctrl + C 가 이미 SIGINT에 매핑되었거나 Linux의 Interrupt/kill 명령에 매핑되어 있다는 것입니다. 복사/붙여넣기를 각각 Ctrl + Shift + CCtrl + Shift + V 에 매핑하여 이를 처리하는 Windows용 터미널이 많이 있습니다. 문제는 복사/붙여넣기가 Windows의 다른 모든 위치에 Ctrl + C / Ctrl + V 라는 것입니다. 터미널에서 Ctrl + C 를 계속해서 계속해서 복사하려고 했습니다. 나는 그것을 하는 것을 멈출 수 없었다.

Windows 터미널은 이것을 다르게 처리합니다. 텍스트가 강조 표시된 상태에서 Ctrl + C 를 누르면 텍스트가 복사됩니다. 실행 중인 프로세스가 있으면 여전히 SIGINT 명령을 전송하고 중단합니다. 즉, Ctrl + C / Ctrl + V 를 Windows 터미널에서 복사/붙여넣기에 안전하게 매핑할 수 있으며 프로세스를 중단하는 기능을 방해하지 않습니다.

복사/붙여넣기가 그렇게 많은 마음의 상처를 줄 수 있다고 누가 생각했습니까?

기본 프로필 변경

기본 프로필은 새 탭을 열 때 표시되는 프로필입니다. 기본적으로 Powershell입니다. 아래로 스크롤하여 Linux 프로필을 찾고 싶을 것입니다. 이것은 wsl.exe -d Ubuntu 를 여는 것입니다. GUID를 복사하여 defaultProfile 설정에 붙여넣습니다.

보기 쉽도록 이 두 설정을 바로 옆에 두도록 이동했습니다.

settings.json 파일에서 강조 표시된 기본 터미널 프로필
(큰 미리보기)

배경 설정

나는 내 배경이 오른쪽 모서리에 평평한 로고가 있는 어두운 단색인 것을 좋아합니다. 나는 로고가 밝고 눈에 띄기를 원하지만 텍스트를 방해하지 않기를 원하기 때문에 이 작업을 수행합니다. 이것은 내가 직접 만들었지만 Simple Desktops에서 선택할 수 있는 평면 이미지의 훌륭한 컬렉션이 있습니다.

배경은 backgroundImage 속성으로 설정됩니다.

 "backgroundImage": "c:/Users/YourUserName/Pictures/earth.png" 
오른쪽 하단에 만화 행성이 있는 파란색 정사각형 이미지
(큰 미리보기)

"아크릴"이라는 설정도 볼 수 있습니다. 이것은 배경의 불투명도를 조정할 수 있게 해줍니다. 단색 배경색이 있는 경우 이는 매우 간단합니다.

 "background": "#336699", "useAcrylic": true, "acrylicOpacity": 0.5 
배경이 약간 투명한 터미널
(큰 미리보기)

arcylicOpacity 설정을 backgroundImageOpacity 와 결합하여 배경 이미지로도 이것을 해제할 수 있습니다.

 "backgroundImage": "c:/Users/username/Pictures/earth-and-stars.png", "useAcrylic": true, "acrylicOpacity": 0.5 
투명한 이미지와 투명한 배경이 모두 있는 터미널
(큰 미리보기)

내 테마의 경우 투명도는 모든 것을 음소거로 보이게 하므로 useAcrylicfalse 로 설정한 상태로 유지합니다.

글꼴 변경

Windows Terminal을 구축하는 팀은 "Cascadia Code"라는 새로운 글꼴도 개발 중입니다. 이 글을 쓰는 시점에서는 사용할 수 없으므로 대신 기본 Windows 글꼴을 사용하게 됩니다.

Windows 터미널의 기본 글꼴은 "Consolas"입니다. 이것은 Windows 명령줄에서 사용하는 것과 동일한 글꼴입니다. 진정한 Ubuntu 느낌을 원한다면 Chris Hoffman이 공식 Ubuntu Mono 글꼴을 설치하는 방법을 지적합니다.

차이점을 볼 수 있도록 전후를 보면 다음과 같습니다.

 "fontFace": "Ubuntu Mono" 
터미널에서 Consolas와 Unbuntu Mono 글꼴을 나란히 비교
(큰 미리보기)

그들은 꽤 비슷해 보입니다. 주요 차이점은 터미널을 좀 더 단단하고 깔끔하게 만드는 Ubuntu Mono의 간격입니다.

색 구성표

색 구성표는 모두 설정 파일의 맨 아래에 있습니다. "Campbell"색 구성표를 기준선으로 복사했습니다. 나는 그들의 이름과 색상을 일치시키려고 노력하지만, 나는 또한 도적질하는 것을 두려워하지 않습니다. "#ffffff"를 "파란색"으로 매핑하겠습니다. — 저는 상관하지 않습니다.

settings.json 파일의 색 구성표 설정
(큰 미리보기)

내가 "지구"라고 명명한 이 특정 구성표가 마음에 든다면 이 요점을 정리하여 스크린샷에서 이 엉망진창을 모두 수동으로 복사할 필요가 없습니다.

참고 : 색상 미리보기는 VS Code의 "색상 강조 표시" 확장 기능을 통해 제공됩니다.

기본 시작 디렉토리 변경

기본적으로 WSL 프로필은 Windows 측의 홈 디렉터리로 이동합니다. 이 기사에서 권장하는 설정을 기반으로 하는 대신 Linux home 폴더에 넣는 것이 좋습니다. 그렇게 하려면 "Ubuntu" 프로필에서 startingDirectory 설정을 변경하십시오.

 "startingDirectory": "\\\\wsl$\\Ubuntu\\home\\burkeholland"

거기에 경로를 기록해 둡니다. 이 경로(추가 이스케이프 슬래시 제외)를 사용하여 Windows 명령줄에서 WSL에 액세스할 수 있습니다.

Windows 명령줄에서 Linux 홈 디렉터리에 대해 실행되는 "dir" 명령
(큰 미리보기)

Zsh/Oh-My-Zsh 설치

이전에 Zsh 및 Oh-My-Zsh를 사용한 적이 없다면 정말 좋은 경험이 될 것입니다. Zsh(또는 "Z Shell")는 Linux용 대체 셸입니다. 암시적 디렉토리 전환( cd 를 입력할 필요 없음), 더 나은 테마 지원, 더 나은 프롬프트 등을 포함하여 Bash의 기본 기능을 확장합니다.

Zsh를 설치하려면 Linux 설치와 함께 기본적으로 제공되는 apt 패키지 관리자로 가져옵니다.

 sudo apt install zsh

curl을 사용하여 oh-my-zsh를 설치합니다. Oh-my-zsh는 플러그인, 테마 및 수많은 키보드 단축키를 사용하여 쉘 경험을 더욱 향상시키는 zsh용 구성 세트입니다.

 sh -c "$(curl -fsSL https://raw.githubusercontent.com/robbyrussell/oh-my-zsh/master/tools/install.sh)"

그런 다음 기본 셸을 Zsh로 변경할 것인지 묻습니다. 그렇게 하면 긍정적으로 대답하면 이제 Zsh 및 Oh-My-Zsh를 사용할 수 있습니다.

기본 쉘을 변경할 것인지 묻는 터미널
(큰 미리보기)

이제 프롬프트가 훨씬 깔끔해진 것을 알 수 있습니다. ~/.zshrc 파일에서 테마를 변경하여 해당 프롬프트의 모양을 변경할 수 있습니다.

VIM과 비슷한 nano 로 열지만 필요할 때 편집하고 종료할 수 있습니다.

 nano ~/.zshrc

테마를 설정하는 줄을 변경합니다. 그 위에 전체 테마 목록이 있는 URL이 있습니다. 나는 "클라우드"가 좋다고 생각합니다. 그리고 귀여운.

zshrc 파일에서 설정되는 "클라우드" 테마
(큰 미리보기)

.zshrc 에 대한 변경 사항을 선택하려면 소스를 가져와야 합니다.

 source ~/.zshrc 
"클라우드" 테마 프롬프트
(큰 미리보기)

참고 : 글리프가 필요한 "agnoster"와 같은 테마를 선택하는 경우 글리프가 있는 전력선 주입 버전의 Ubuntu Mono가 필요합니다. 그렇지 않으면 키보드에서 얼굴을 으깬 것처럼 터미널이 이상한 문자로 가득 차게 됩니다. Nerd Fonts는 꽤 잘 작동하는 것 같은 글꼴을 제공합니다.

이제 디렉토리 이름을 입력하는 것만으로 디렉토리 변경과 같은 작업을 수행할 수 있습니다. cd 가 필요하지 않습니다. 디렉토리를 백업하시겠습니까? 그냥 하세요 .. 전체 디렉토리 이름을 입력할 필요도 없습니다. 처음 몇 글자만 입력하고 탭을 누르기만 하면 됩니다. Zsh는 검색과 일치하는 모든 파일/디렉토리 목록을 제공하며 탭으로 이동할 수 있습니다.

여러 경로 중 하나가 강조 표시된 터미널
(큰 미리보기)

노드 설치

웹 개발자로서 아마도 Node.js를 설치하고 싶을 것입니다. 웹 개발을 하기 위해 Node를 설치하지 않아도 된다고 생각하지만 2019년에는 확실히 느껴집니다!

첫 번째 본능은 apt 를 사용하여 노드를 설치하는 것일 수 있습니다. 그렇게 할 수 있지만 두 가지 이유로 후회할 것입니다.

  1. apt의 Node 버전은 너무 오래되었습니다.
  2. 권한 문제가 발생하지 않도록 버전 관리자와 함께 Node를 설치해야 합니다.

이 두 가지 문제를 모두 해결하는 가장 좋은 방법은 nvm(Node Version Manager)을 설치하는 것입니다. zsh 를 설치했으므로 zshrc 파일에 nvm 플러그인을 추가하면 zsh가 나머지를 처리합니다.

먼저 zsh-nvm 저장소에서 복제하여 플러그인을 설치합니다. (걱정하지 마세요. Git은 Ubuntu 설치에 표준으로 제공됩니다.)

 git clone https://github.com/lukechilds/zsh-nvm ~/.oh-my-zsh/custom/plugins/zsh-nvm

그런 다음 ~/.zshrc 파일에 플러그인으로 추가합니다.

 `nano ~/.zshrc` plugins (zsh-nvm git) 
zsh-vnm-plugin이 추가된 zshrc 파일
(큰 미리보기)

source ~/.zshrc 로 zshrc 파일을 다시 소싱하는 것을 기억하십시오. 그러면 nvm이 설치되는 것을 볼 수 있습니다.

nvm의 설치 진행 상황을 보여주는 터미널
(큰 미리보기)

이제 nvm으로 노드를 설치할 수 있습니다. 여러 병렬 버전의 노드를 쉽게 설치하고 쉽게 전환할 수 있습니다. 또한 전역 npm 설치를 수행할 때 권한 오류가 없습니다!

 nvm install --lts

플러그인을 사용하면 nvm을 쉽게 업그레이드할 수 있기 때문에 표준 nvm 설치보다 이것을 권장합니다. 이것은 표준 "curl" 설치에서 일종의 고통입니다. 플러그인이 있는 하나의 명령입니다.

 nvm upgrade

자동 제안 활용

zsh용으로 제가 가장 좋아하는 플러그인 중 하나는 zsh-autosuggestions입니다. 이전에 터미널에 입력한 내용을 기억한 다음 다시 입력하기 시작할 때 이를 인식하고 필요한 줄을 "자동 제안"합니다. 이 플러그인은 내가 기억할 수 있는 것보다 더 많은 시간 동안 편리하게 사용되었습니다. 특히 과거에 사용했지만 기억할 수 없는 긴 CLI 명령의 경우에 유용합니다.

저장소를 zsh 확장 폴더에 복제합니다.

 git clone https://github.com/zsh-users/zsh-autosuggestions ~/.oh-my-zsh/custom/plugins/zsh-autosuggestions

그런 다음 zsh 플러그인에 추가하고 zshrc 파일을 가져옵니다.

 nano ~/.zshrc # In the .zshrc file plugins(zsh-nvm zsh-autosuggestions git) source ~/.zshrc

플러그인은 zsh 기록을 읽으므로 이전에 입력한 일부 명령을 입력하고 마법을 지켜보십시오. 위의 긴 복제 명령의 첫 번째 부분을 입력해 보십시오.

git clone 명령을 자동 완성하는 zsh autosuggestions를 보여주는 터미널
(큰 미리보기)

↹ 키 를 누르면 명령이 자동 완성됩니다. 계속 ↹ 키 를 누르면 기록에서 일치할 수 있는 모든 명령이 순환됩니다.

중요한 키보드 단축키

내가 항상 사용하는 몇 가지 터미널 바로 가기가 있습니다. VS Code를 포함한 모든 도구에서 이것을 찾았습니다. 모든 단축키를 배우려고 하면 기억할 만큼 충분히 사용하지 않기 때문에 시간 낭비입니다.

다음은 내가 정기적으로 사용하는 몇 가지입니다.

터미널 바로 가기 그것은 무엇을합니까?
Ctrl + L 이렇게 하면 터미널이 지워지고 맨 위로 돌아갑니다. "clear"를 입력하는 것과 같습니다.
Ctrl + U 현재 줄만 지워집니다.
Ctrl + A 커서를 명령줄의 시작 부분으로 보냅니다.
Ctrl + E 줄의 끝으로 이동합니다.
Ctrl + K 커서 뒤의 모든 문자를 삭제합니다.

그게 다야! 내가 배운 다른 모든 것은 아무 소용이 없기 때문에 잊어버렸을 것입니다.

Git 구성(Hub/Lab/Whatevs)

Git은 Ubuntu에서 제공되므로 설치할 필요가 없습니다. 선택한 소스 제어 호스트의 지침에 따라 ssh 키를 만들고 작동할 수 있습니다.

Github 지침에서 "복사" 유틸리티를 사용하여 ssh 키를 복사하도록 지시합니다. Ubuntu에는 "xcopy" 명령이 있지만 클립보드 측면에서 Linux와 Windows 간에 상호 운용성이 없기 때문에 여기에서는 작동하지 않습니다.

대신 Windows 클립보드 실행 파일을 사용하고 터미널에서 직접 호출할 수 있습니다. cat 을 사용하여 먼저 텍스트를 가져온 다음 Windows 클립보드로 파이프해야 합니다.

 cat ~/.ssh/id_rsa.pub | clip.exe

Github 문서는 ssh-agent 가 실행 중인지 확인하라고 알려줍니다. 그렇지 않다. 에이전트에 키를 추가하려고 하면 다음과 같이 표시됩니다.

SSH 에이전트가 실행되고 있지 않음을 보여주는 터미널
(큰 미리보기)

에이전트를 시작할 수 있지만 다음에 Windows를 재부팅하거나 WSL이 중지되면 다시 시작해야 합니다. WSL에는 초기화 시스템이 없기 때문입니다. WSL이 시작될 때 모든 서비스를 시작하는 systemd 또는 다른 프로세스가 없습니다. WSL은 아직 미리 보기 상태이며 팀에서 이에 대한 솔루션을 작업 중입니다.

그 동안 믿거나 말거나 이를 위한 zsh 플러그인도 있습니다. ssh-agent 라고 하며 oh-my-zsh 와 함께 설치되므로 .zshrc 파일에서 참조하기만 하면 됩니다.

 zsh-nvm zsh-autosuggestions ssh-agent git

WSL을 처음 실행할 때 ssh-agent가 실행되고 있지 않으면 자동으로 ssh-agent를 시작합니다. 단점은 WSL이 새로 시작될 때마다 암호를 묻는 메시지가 표시된다는 것입니다. 이는 본질적으로 컴퓨터를 재부팅할 때마다 의미합니다.

rsa 키에 대한 암호를 묻는 터미널
(큰 미리보기)

VS 코드와 WSL

WSL에는 GUI가 없으므로 VS Code와 같은 시각적 도구를 설치할 수 없습니다. Windows 측에 설치해야 합니다. Windows 측에서 실행 중인 프로그램이 Linux 측에서 파일에 액세스하고 있기 때문에 문제가 발생하며 이로 인해 모든 문제와 "권한 거부" 문제가 발생할 수 있습니다. 일반적으로 Microsoft는 Windows 프로그램을 사용하여 WSL 측의 파일을 변경하지 않을 것을 권장합니다.

이를 해결하기 위해 "Remote WSL"이라는 VS Code 확장이 있습니다. 이 확장은 Microsoft에서 만들고 WSL 내에서 개발할 수 있지만 VS Code 내에서 개발할 수 있습니다.

확장이 설치되면 명령 팔레트( Ctrl + Shift + P ) "Remote-WSL: 새 창"을 선택합니다.

명령 팔레트에서 강조 표시된 "원격 WSL: 새 창" 명령이 있는 VS 코드
(큰 미리보기)

이렇게 하면 완전히 Linux 측에서 작업하는 것처럼 작업할 수 있는 VS Code의 새 인스턴스가 열립니다. "파일/열기"를 수행하면 Windows 대신 Ubuntu 파일 시스템을 탐색합니다.

VS 코드 "파일 열기" 보기
(큰 미리보기)

VS Code의 통합 터미널은 아름답게 사용자 정의된 zsh 설정을 엽니다. 원격 WSL 확장이 설치되어 있으면 모든 것이 "그냥 작동"합니다.

code 를 사용하여 터미널에서 코드를 여는 경우 code . , VS Code는 WSL에서 열렸음을 자동으로 감지하고 원격 WSL 확장을 자동으로 연결합니다.

원격 WSL을 사용한 VS 코드 확장

VS Code용 원격 WSL 확장은 Linux 측에 작은 서버를 설정한 다음 Windows 측에 VS Code에서 연결하여 작동합니다. 이 경우 VS Code에 설치한 확장은 WSL에서 프로젝트를 열 때 자동으로 표시되지 않습니다.

예를 들어 VS Code에 Vue 프로젝트가 열려 있습니다. 구문 강조, 형식 지정 등을 위해 올바른 Vue 확장을 모두 설치했지만 VS Code는 이전에 .vue 파일을 본 적이 없는 것처럼 작동합니다.

구문 강조 표시 없이 VS Code에서 열린 .vue 파일
(큰 미리보기)

설치한 모든 확장은 WSL에서 활성화할 수 있습니다. WSL에서 원하는 확장을 찾고 "WSL에 설치" 버튼을 클릭하기만 하면 됩니다.

VS Code의 Vetur VS Code 확장 방문 페이지
(큰 미리보기)

WSL에 설치된 모든 확장은 확장 탐색기 보기의 자체 섹션에 표시됩니다. 확장 프로그램이 많은 경우 각 확장 프로그램을 개별적으로 설치하는 것이 약간 성가실 수 있습니다. WSL에 있는 모든 확장을 설치하려면 '로컬 - 설치됨' 섹션 상단에 있는 작은 클라우드 다운로드 아이콘을 클릭하세요.

WSL에 모든 확장 설치 아이콘이 강조 표시된 VS Code의 확장 보기
(큰 미리보기)

개발자 디렉토리를 설정하는 방법

이것은 이미 독단적인 기사이므로 여기에 파일 시스템에서 프로젝트를 구조화하는 방법에 대해 묻지 않은 기사가 있습니다.

저는 모든 프로젝트를 Linux 측에서 유지합니다. 내 프로젝트를 "내 문서"에 넣은 다음 WSL에서 작업하려고 시도하지 않습니다. 내 두뇌는 그것을 처리할 수 없습니다.

Linux에서 내 /home 폴더의 루트에 넣은 /dev 라는 폴더를 만듭니다. 그 폴더 안에 내 Github 저장소와 같은 이름의 다른 폴더를 만듭니다: /burkeholland . 이 폴더는 Github에 푸시되지 않은 모든 프로젝트가 있는 곳입니다.

다른 Github 계정(예: "microsoft")에서 repo를 복제하는 경우 "dev"에 /microsoft 라는 새 폴더를 만듭니다. 그런 다음 repo를 그 안의 폴더에 복제합니다.

기본적으로 로컬 컴퓨터의 소스 제어와 동일한 구조를 모방하고 있습니다. 프로젝트의 위치와 위치만으로 프로젝트가 연결된 저장소에 대해 추론하는 것이 훨씬 쉽다는 것을 알았습니다. 간단하지만 모든 것을 정리하는 데 매우 효과적입니다. 그리고 내가 얻을 수 있는 모든 도움이 필요합니다.

터미널에 나열된 저자 의견 폴더 구조
(큰 미리보기)

Windows 탐색기에서 파일 찾아보기

Windows 측에서 Linux의 파일을 가져와야 하는 경우가 있습니다. WSL의 아름다운 점은 여전히 ​​그렇게 할 수 있다는 것입니다.

한 가지 방법은 매핑된 드라이브처럼 WSL에 액세스하는 것입니다. 탐색기 표시줄에서 직접 \\wsl$ 로 액세스합니다.

 \\wsl$ 
Windows 탐색기 탑재된 디렉터리로 Ubuntu 설치
(큰 미리보기)

여러 가지 이유로 이 작업을 수행할 수 있습니다. 예를 들어 오늘 웹 스토어에 없는 Chrome 확장 프로그램이 필요했습니다. 그래서 WSL에서 리포지토리를 복제한 다음 "Unpacked Extension"으로 이동하여 Edge에 로드했습니다.

Linux에서 내가 자주 사용하는 한 가지는 터미널에서 직접 파일이 포함된 디렉토리를 여는 것입니다. WSL에서도 explorer.exe 를 직접 호출하여 이 작업을 수행할 수 있습니다. 예를 들어, 이 명령은 Windows 탐색기에서 현재 디렉토리를 엽니다.

 $ explorer.exe . 
터미널의 현재 디렉토리에서 Windows 탐색기를 여는 것을 보여주는 GIF

이 명령은 다소 번거롭습니다. Linux에서는 그냥 open . . ~/.zshrc 에 별칭을 만들어 동일한 마법을 만들 수 있습니다.

 alias open="explorer.exe"

도커

내가 모든 도구가 Linux 측에 있어야 한다고 말했을 때 나는 그것을 의미했습니다. 여기에는 Docker가 포함됩니다.

이것은 고무가 실제로 길을 만나기 시작하는 곳입니다. 여기서 필요한 것은 Windows 내부에서 실행되는 Linux 내부에서 실행되는 Docker입니다. 블로그 포스트에 적으면 약간 러시아 중첩 인형입니다. 실제로는 매우 간단합니다.

Windows용 Docker의 올바른 버전이 필요합니다. 이 글을 쓰는 시점에서는 WSL 2 Tech Preview입니다.

설치 프로그램을 실행하면 Linux 컨테이너 대신 Windows 컨테이너를 사용할지 묻는 메시지가 표시됩니다. 당신은 확실히합니다. 그렇지 않으면 WSL에서 Docker를 실행할 수 있는 옵션이 표시되지 않습니다.

"Windows 컨테이너 사용" 옵션이 선택된 Docker 설치 화면
(큰 미리보기)

이제 시스템 트레이에서 항목을 클릭하고 "WSL 2 Tech Preview"를 선택하여 WSL에서 Docker를 활성화할 수 있습니다.

Docker Daemon 상황에 맞는 메뉴의 WSL2 기술 미리 보기 옵션
(큰 미리보기)

서비스를 시작한 후 예상대로 WSL 내에서 Docker를 사용할 수 있습니다. WSL에서 Docker를 실행하면 성능이 상당히 향상되고 컨테이너의 콜드 스타트 ​​시간이 향상됩니다.

VS Code용 Docker 확장을 설치하는 것이 좋습니다. Docker 설정에 시각적 인터페이스를 제공하고 일반적으로 모든 명령줄 플래그 및 옵션을 기억할 필요가 없기 때문에 Docker로 작업하기가 더 쉽습니다.

Windows에서 더 많은 Bash 얻기

이 시점에서 Bash를 Windows에 설치하는 방법과 Bash를 설치한 후 작동하는 방법에 대한 아이디어를 얻어야 합니다. 터미널을 끝없이 사용자 정의할 수 있으며 자동으로 PATH 변수를 설정하고, 별칭을 만들고, 터미널에 ASCII 소를 가져오는 등의 작업을 수행하기 위해 추가할 수 있는 모든 종류의 rad 프로그램이 있습니다.

Windows에서 Bash를 실행하는 것은 저에게 완전히 새로운 세계를 열어주었습니다. 생산성 측면에서 내가 좋아하는 Windows와 개발자로서 의존하는 Linux를 결합할 수 있습니다. 무엇보다도 이제 한 대의 컴퓨터로 두 플랫폼 모두를 위한 앱을 구축할 수 있습니다.

추가 읽기

여기에서 Windows의 Bash에 대한 자세한 내용을 읽을 수 있습니다.

  • "Windows 10용 Linux 설치 가이드용 Windows 하위 시스템", Microsoft Docs
  • "Windows 10에서 Bash 셸을 설치하고 사용하는 방법", Chris Hoffman, How-To Geek
  • "WSL과 SSH 공유", Drew Wilson
  • "Linux용 Window 하위 시스템에 열광하기", Brian Ketelsen
  • "Windows 10의 새로운 Bash Shell로 할 수 있는 모든 것", Chris Hoffman, How-To Geek

이 기사에 대한 인내, 도움 및 안내에 대해 Brian Ketelsen, Matt Hernandez, Rich Turner 및 Craig Loewen에게 특별히 감사드립니다.