2022년에 새로운 Windows 개발 환경을 구축하는 방법

트위터에서 저를 팔로우해 주세요. 구독Newsletter | 최초로 timdeschryver.dev에 발표되었습니다.
2022년 첫째 주에 나는 나의 새 고용주dotNET lab로부터 새 기계 한 대를 받아서 매우 기쁘다.짧은 몇 시간 안에 나는 나의 설정을 완전한 창고로 간주하기 위해 운행을 시작했다.NET 및 Angular 개발자.
새로운 '장난감' 을 얻는 것은 항상 사람을 흥분하게 하지만, 이것은 이중적인 느낌이다. 왜냐하면 새로운 개발 환경은 수동으로 조작해야 하기 때문이다. (어떤 소프트웨어를 다운로드해야 하는지 기억하고, 다운로드 페이지를 훑어보고, 설치 마법사를 점차적으로 완성해야 하기 때문에) 이것은 시간이 많이 걸린다.내가 마지막으로 나의 기계를 배치한 것은 몇 년 전이었다. 나는 많은 감탄을 했던 것을 기억한다.
이번에는 Windows 생태계에 많은 변화가 생겼다.이전과 비교하면 이것은 가볍고 유쾌한 체험이다!

winget으로 소프트웨어 설치

초기 설치(및 업데이트) 후 첫 번째 단계는 설치된 상태winget를 확인하고 최신 버전으로 업데이트하는 것입니다.마이크로소프트 상점에서 검색할 수 있습니다 winget. (상점에서 프로그램 설치 프로그램으로 표시됩니다.)
winget에는 검색 소프트웨어에 대한 두 가지 중요 명령winget search과 설치 소프트웨어에 대한 winget install이 있습니다.install 명령을 사용할 때 기본값을 변경하여 interactive 로고를 전달하여 설치 세부 사항에 관여할 수 있음을 주의하십시오.winget를 설치한 후 새 명령 프롬프트를 열고 다음 스크립트를 복사하여 붙여넣습니다.
이 스크립트는 내가 지난달에 사용한 모든 소프트웨어를 명령에 설치했다.

# Browser
winget install Microsoft.Edge.Beta
winget install Google.Chrome.Beta
winget install Mozilla.Firefox.DeveloperEdition

# Chat
winget install Microsoft.Teams
winget install Discord.Discord.Canary

# Windows and CLI
winget install Microsoft.PowerToys # https://github.com/microsoft/PowerToys
winget install Microsoft.WindowsTerminal.Preview
winget install Microsoft.PowerShell.Preview
winget install JanDeDobbeleer.OhMyPosh

# Git
winget install Git.Git
winget install GitHub.cli

# Development Enviroment
winget install Microsoft.dotnet
winget install OpenJS.NodeJS
winget install Yarn.Yarn

# IDE
winget install Microsoft.VisualStudio.2022.Enterprise-Preview
winget install Microsoft.VisualStudioCode.Insiders
winget install Microsoft.SQLServer.2019.Developer
winget install Microsoft.SQLServerManagementStudio
winget install Microsoft.AzureDataStudio.Insiders

winget install JetBrains.ReSharper
winget install JetBrains.Rider
winget install JetBrains.WebStorm
winget install JetBrains.DataGrip

# Miscellaneous
winget install 7zip.7zip

위의 스크립트는 대부분의 프로그램을 설치했지만, 일부 프로그램은 winget 에서 사용할 수 없기 때문에 수동으로 설치해야 한다.

NVM for Windows 여러 노드 간에 쉽게 전환할 수 있습니다.단일 명령의 JS 버전

Gpg4win,git공약 체결

다중 노드.NVM의 JS 버전 사용

나는 nvm를 사용한다. 왜냐하면 나는 여러 노드에서 일해야 하기 때문이다.JS 버전
CLI 를 사용하면 필요한 버전을 설치하고 원하는 버전으로 손쉽게 전환할 수 있습니다 nvm install.

nvm install 14
nvm use 14.18.2

nvm use 또는 install 명령을 실행하는 동안 오류가 발생하면 관리자 권한이 활성화된 상태에서 명령 프롬프트를 시작해야 합니다.

네트워크 도구

Tye는 지난 1년간 내 키트 중 빠질 수 없는 부분이다.
내가 이 공구를 처음 들었을 때, 나는 즉시 그것에 끌렸다.
Tye는 여러 어플리케이션을 동시에 실행해야 할 때 개발 환경을 더욱 원활하게 합니다.
하나의 명령만 있으면 모든 개발 실례(서비스, 응용 프로그램)가 로컬에서 생성되고 디버깅을 할 수 있으며 개발 환경을 쉽게 실행할 수 있다.예를 들어, a.NET 웹 API 및 각도가 있는 프런트엔드
Tye를 설치하려면 use 명령을 사용하고 Tye를 전체적으로 설치합니다.

dotnet tool install --global Microsoft.Tye --version 0.10.0-alpha.21420.1

Tye를 실행하려면 구성 파일이 필요하므로 를 만듭니다.
아래의 예는 두 개의 를 갖추고 있다.NET 백엔드 및 각도가 있는 프런트엔드
맞다NET 인스턴스에서는 API를 실행하기 위해 간단히 dotnet tool install를 가리킬 수 있습니다.
Angular 디렉토리로 이동하고 서버 명령을 실행하여 Angular 프런트엔드에 서비스를 제공합니다.

name: MyAwesomeProject
services:
  - name: project1-backend
    project: C:/Users/timde/dev/Project1/src/Project1.Api/Project1.Api.csproj
    tags:
      - project1
    bindings:
      - protocol: https
        port: 4061

  - name: project1-frontend
    executable: cmd
    tags:
      - project1
    args: '/c cd C:/Users/timde/dev/Project1-Frontend && npm run start'
    bindings:
      - protocol: https
        port: 4200

  - name: project2-backend
    project: C:/Users/timde/dev/Project2/src/Project2.Api/Project2.Api.csproj
    tags:
      - project2
    bindings:
      - protocol: https
        port: 4062

  - name: project2-frontend
    executable: cmd
    tags:
      - project2
    args: '/c cd C:/Users/timde/dev/Project2-Frontend && npm run start'
    bindings:
      - protocol: https
        port: 4300

현재, 나는 csproj 명령을 사용하여 특정 항목이나 모든 항목을 실행할 수 있다.tye run 로고를 사용하면 파일을 변경할 때 프로그램도 다시 불러옵니다.

# run all
tye run --watch
# run a specific project
tye run --tags project1 --watch

모든 디렉토리에서 Tye를 실행하려면 Tye 구성 경로를 지정합니다.
이것은 tye config가 있는 디렉터리를 탐색하지 않고 어디서든 개발 환경을 시작할 수 있도록 합니다.

# run all
tye run "C:\Users\timde\dev\work\tye.yaml" --watch
# run a specific project
tye run "C:\Users\timde\dev\work\tye.yaml" --tags project1 --watch

Tye는 실행 중인 모든 인스턴스를 볼 수 있는 대시보드도 제공합니다.

증강 단말기

단말기를 더욱 좋게 하기 위해서 저는 Windows Terminal과Oh My Posh를 결합하여 사용하겠습니다.
내장된 탭의 스테로이드에 대한 기본 명령 프롬프트인 Windows 터미널을 비교해 보았는데, 이것은 내 취향에 따라 조정할 수 있습니다.이것은 나로 하여금 기쁘게 하여 업무 효율을 높였다.
Windows 터미널 설정을 통해 기본 글꼴과 Powershell Core를 사용하는 기본 프로필을 설정했습니다.
나는 (ctrl + t) 옵션을 열고 닫는 단축키도 추가했다.
나는 글꼴을 Nerd Fonts의 글꼴 패밀리로 설정하여 Oh My Posh와 함께 사용하는 예쁜 아이콘을 표시합니다.이 글꼴이나 다른 글꼴은 Nerd Fontsdownload page에서 다운로드할 수 있습니다.

{
    "$schema": "https://aka.ms/terminal-profiles-schema",
    "actions": [
        {
            "command": {
                "action": "copy",
                "singleLine": false
            },
            "keys": "ctrl+c"
        },
        {
            "command": "paste",
            "keys": "ctrl+v"
        },
        {
            "command": {
                "action": "newTab"
            },
            "keys": "ctrl+t"
        },
        {
            "command": "find",
            "keys": "ctrl+shift+f"
        },
        {
            "command": {
                "action": "splitPane",
                "split": "auto",
                "splitMode": "duplicate"
            },
            "keys": "alt+shift+d"
        },
        {
            "command": {
                "action": "closeTab"
            },
            "keys": "ctrl+w"
        }
    ],
    "copyFormatting": "none",
    "copyOnSelect": false,
    "defaultProfile": "{574e775e-4f2a-5b96-ac1e-a2962a402336}",
    "profiles": {
        "defaults": {
            "font": {
                "face": "CaskaydiaCove Nerd Font Mono"
            }
        },
        "list": [
            {
                "guid": "{574e775e-4f2a-5b96-ac1e-a2962a402336}",
                "hidden": false,
                "name": "PowerShell",
                "source": "Windows.Terminal.PowershellCore"
            },
            {
                "commandline": "powershell.exe",
                "guid": "{61c54bbd-c2c6-5271-96e7-009a87ff44bf}",
                "hidden": true,
                "name": "Windows PowerShell"
            },
            {
                "commandline": "cmd.exe",
                "guid": "{0caa0dad-35be-5f56-a8ff-afceeeaa6101}",
                "hidden": true,
                "name": "Command Prompt"
            },
            {
                "guid": "{b453ae62-4e3d-5e58-b989-0a998ec441b8}",
                "hidden": true,
                "name": "Azure Cloud Shell",
                "source": "Windows.Terminal.Azure"
            },
            {
                "guid": "{2ece5bfe-50ed-5f3a-ab87-5cd4baafed2b}",
                "hidden": false,
                "name": "Git Bash",
                "source": "Git"
            }
        ]
    },
    "schemes": []
}

터미널을 편안하고 아름답게 하기 위해 Oh My Posh를 사용했습니다.
오, Posh에서는 일반 프롬프트보다 중요한 정보를 추가할 수 있습니다.예를 들어, 내가 수정한 Oh my Posh 주제(일반 주제 기반)는 git 상태를 표시합니다.NET 및 각도 버전스포일러, 오, 내 패션은 더 많이 할 수 있어!영감을 얻고 싶으면 default themes보세요.

{
    "$schema": "https://raw.githubusercontent.com/JanDeDobbeleer/oh-my-posh/main/themes/schema.json",
    "console_title": true,
    "console_title_style": "template",
    "console_title_template": "{{if .Root}}(Admin){{end}} {{.Path}}",
    "blocks": [
        {
            "type": "prompt",
            "alignment": "left",
            "newline": false,
            "segments": [
                {
                    "type": "path",
                    "style": "plain",
                    "foreground": "#f8c400",
                    "properties": {
                        "prefix": "",
                        "style": "full"
                    }
                }
            ]
        },
        {
            "type": "prompt",
            "alignment": "left",
            "segments": [
                {
                    "type": "git",
                    "style": "plain",
                    "foreground": "#ffe893",
                    "properties": {
                        "prefix": "",
                        "fetch_stash_count": true,
                        "fetch_status": true,
                        "fetch_upstream_icon": true,
                        "branch_icon": "",
                        "github_icon": "",
                        "branch_ahead_icon": "<#88C0D0>\u21e1 </>",
                        "branch_behind_icon": "<#88C0D0>\u21e3 </>",
                        "local_working_icon": "<#FFAFD7>\u002a</>",
                        "template": "{{ .UpstreamIcon }}{{ .HEAD }}{{ .BranchStatus }}{{ if .Working.Changed }} \uF044 {{ .Working.String }}{{ end }}{{ if and (.Working.Changed) (.Staging.Changed) }} |{{ end }}{{ if .Staging.Changed }} \uF046 {{ .Staging.String }}{{ end }}{{ if gt .StashCount 0 }} \uF692 {{ .StashCount }}{{ end }}"
                    }
                }
            ]
        },
        {
            "type": "prompt",
            "alignment": "left",
            "segments": [
                {
                    "type": "dotnet",
                    "style": "plain",
                    "foreground": "#512bd4",
                    "leading_diamond": "",
                    "trailing_diamond": "",
                    "properties": {
                        "display_version": true,
                        "prefix": "  "
                    }
                },
                {
                    "type": "angular",
                    "style": "plain",
                    "foreground": "#dd0031",
                    "properties": {
                        "display_version": true,
                        "prefix": " \uE753 "
                    }
                },
                {
                    "type": "exit",
                    "style": "diamond",
                    "foreground": "red",
                    "properties": {
                        "always_enabled": false
                    }
                }
            ]
        }
    ]
}

Visual Studio 코드 아이콘을 동시에 표시하려면 터미널의 Visual Studio 코드 글꼴watch을 Windows 터미널 구성에서 동일한 글꼴로 설정합니다.이렇게 하면 네가 어디에 있든지 똑같은 경험을 하게 될 것이다.
예를 들어, Angular 저장소의 경험은 다음과 같습니다.

터미널에 대한 더 많은 세부 사항과 옵션에 관해서는 My Ultimate PowerShell prompt with Oh My Posh and the Windows Terminal나 녹음된 버전을 강력히 추천합니다.

Powershell 구성 파일

이것이 바로 일이 흥미로워진 부분이다. 내가 프로그래밍을 할 때 이 부분은 항상 사람을 놀라게 한다.
기본 터미널은 Powershell을 사용하기 때문에 많은 작업의 스크립트를 작성할 수 있습니다.나의 키 횟수를 줄이기 위해서 나는 내가 하고 싶은 일을 빨리 완성하기 위해 별명과 단축키를 만드는 것을 좋아한다.가장 좋은 것은 내가 터미널에 있을 때, 이 임무들은 내가 처리한다는 것이다.
Powershell 스크립트는 Powershell profile에서 생성되며 terminal.integrated.fontFamily 변수를 통해 접근할 수 있습니다.
구성 파일을 만들려면 $PROFILE에서 파일을 수동으로 만들거나 명령을 사용하여 "C:\Users\USER\Documents\PowerShell\Microsoft.PowerShell_profile.ps1"(예: 일반 Visual Studio 코드를 사용하는 경우 code-insiders $PROFILE를 생성하고 엽니다.
내 프로필은 다음과 같은 몇 가지 함수와 별칭을 만들었습니다.

일반 폴더로 이동

가장 흔한git 명령

에 포장기와 템플릿 추가

사용된 명령의 기록 저장

바로 가기를 등록하면 전체 명령을 입력할 필요가 없습니다.

# For the first time install Terminal-Icons with
# Install-Module -Name Terminal-Icons -Repository PSGallery
Import-Module Terminal-Icons

oh-my-posh --init --shell pwsh --config ~/ohmyposh-theme.omp.json | Invoke-Expression

# History

Set-PSReadLineOption -PredictionSource History
Set-PSReadLineOption -PredictionViewStyle ListView
Set-PSReadLineOption -EditMode Windows

# Alias

Set-Alias -Name code -Value code-insiders

# Directory Alias

function oss {
    cd "~/dev/oss/$args"
}

function work {
    cd "~/dev/work/$args"
}

# Git

function gb {
    git checkout -b $args
}

function gbt ([string] $taskid) {
    git checkout -b "task/$taskid"
}

function gs {
    git checkout $args
    git pull
}

function gmaster {
    gs 'master'
}

function gmain {
    gs 'main'
}

function gdev {
    gs 'develop'
}

function gco {
    git add .
    git commit -m $args
}

function gfeat {
    if($null -eq $args[1]) {
        gco "feat: $($args[0])"
    }else {
        gco "feat($($args[0])): $($args[1])"
    }
}

function gfix {
    if($null -eq $args[1]) {
        gco "fix: $($args[0])"
    }else {
        gco "fix($($args[0])): $($args[1])"
    }
}

function gdocs {
    if($null -eq $args[1]) {
        gco "docs: $($args[0])"
    }else {
        gco "docs($($args[0])): $($args[1])"
    }
}

function gstyle {
    if($null -eq $args[1]) {
        gco "style: $($args[0])"
    }else {
        gco "style($($args[0])): $($args[1])"
    }
}


function grefactor {
    if($null -eq $args[1]) {
        gco "refactor: $($args[0])"
    }else {
        gco "refactor($($args[0])): $($args[1])"
    }
}


function gperf {
    if($null -eq $args[1]) {
        gco "perf: $($args[0])"
    }else {
        gco "perf($($args[0])): $($args[1])"
    }
}

function gchore {
    if($null -eq $args[1]) {
        gco "chore: $($args[0])"
    }else {
        gco "chore($($args[0])): $($args[1])"
    }
}

function gpu {
    git pull
}

function goops {
    git add .
    git commit --amend --no-edit
}

function gfp {
    git push --force-with-lease
}

function gr {
    git reset --hard
    git clean -f -d
}

# Macros

# Inspired by Scott's profile https://gist.github.com/shanselman/25f5550ad186189e0e68916c6d7f44c3
Set-PSReadLineKeyHandler -Key Ctrl+Shift+b `
    -BriefDescription BuildCurrentDirectory `
    -LongDescription "Build the current directory" `
    -ScriptBlock {
        [Microsoft.PowerShell.PSConsoleReadLine]::RevertLine()
        if(Test-Path -Path ".\package.json") {
            [Microsoft.PowerShell.PSConsoleReadLine]::Insert("npm run build")
        }else {
            [Microsoft.PowerShell.PSConsoleReadLine]::Insert("dotnet build")
        }
        [Microsoft.PowerShell.PSConsoleReadLine]::AcceptLine()
    }

Set-PSReadLineKeyHandler -Key Ctrl+Shift+t `
    -BriefDescription BuildCurrentDirectory `
    -LongDescription "Build the current directory" `
    -ScriptBlock {
        [Microsoft.PowerShell.PSConsoleReadLine]::RevertLine()
        if(Test-Path -Path ".\package.json") {
            [Microsoft.PowerShell.PSConsoleReadLine]::Insert("npm run test")
        }else {
            [Microsoft.PowerShell.PSConsoleReadLine]::Insert("dotnet test")
        }
        [Microsoft.PowerShell.PSConsoleReadLine]::AcceptLine()
    }

Set-PSReadLineKeyHandler -Key Ctrl+Shift+s `
    -BriefDescription StartCurrentDirectory `
    -LongDescription "Start the current directory" `
    -ScriptBlock {
        [Microsoft.PowerShell.PSConsoleReadLine]::RevertLine()
        if(Test-Path -Path ".\package.json") {
            [Microsoft.PowerShell.PSConsoleReadLine]::Insert("npm start")
        }else {
            [Microsoft.PowerShell.PSConsoleReadLine]::Insert("dotnet run")
        }
        [Microsoft.PowerShell.PSConsoleReadLine]::AcceptLine()
    }

Git 기본값

다음 스크립트는git 표식을 설정하고git를 내가 원하는 행동방식으로 설정합니다.

git config --global user.name "first last"
git config --global user.email "[email protected]"
git config --global push.default current
git config --global pull.rebase true
git config --global core.editor code-insiders
git config --global init.defaultBranch main
# sign commits
git config --global gpg.program "C:/Program Files (x86)/GnuPG/bin/gpg.exe"
git config --global commit.gpgsign true

나는 약속에 서명하기 위해 블로그 게시물A guide to securing git commits from tricking you on Windows을 따랐다.

Visual Studio 코드 플러그인 및 설정

만약 당신이 나를 안다면, 당신은 내가 나의 VisualStudio 코드 설정을 사용자 정의하는 것을 좋아한다는 것을 이미 알고 있습니다.
다음 스크립트는 테마를 포함하지 않습니다. 왜냐하면 저는 기분에 따라 테마를 자주 전환하는 것을 좋아하기 때문입니다.
그러나 다음 스크립트는 효율을 높이기 위해 필요한 모든 확장자를 설치합니다.
나는 Visual Studio 코드의 내부 버전을 사용하기 때문에 code $PROFILE이 아니라 code-insiders를 사용한다.

# Formatting and Rules
code-insiders --install-extension dbaeumer.vscode-eslint --force
code-insiders --install-extension esbenp.prettier-vscode --force
code-insiders --install-extension formulahendry.auto-rename-tag --force

# Git
code-insiders --install-extension github.vscode-pull-request-github --force
code-insiders --install-extension eamodio.gitlens-insiders --force

# Angular
code-insiders --install-extension angular.ng-template --force

# .NET
code-insiders --install-extension ms-dotnettools.csharp --force
code-insiders --install-extension visualstudioexptteam.vscodeintellicode --force

# Markdown
code-insiders --install-extension yzhang.markdown-all-in-one --force
code-insiders --install-extension davidanson.vscode-markdownlint --force

# Rest Client
code-insiders --install-extension rangav.vscode-thunder-client --force

# Miscellaneous
code-insiders --install-extension github.copilot --force

완성하기 위해서, 여기는 나의 전부code 서류입니다.

{
    "editor.fontFamily": "Cascadia Code",
    "editor.fontSize": 18,
    "editor.lineHeight": 2,
    "editor.fontLigatures": true,
    "editor.dragAndDrop": false,
    "editor.cursorSmoothCaretAnimation": true,
    "editor.smoothScrolling": true,
    "editor.wordWrap": "on",
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "files.defaultLanguage": "markdown",
    "terminal.integrated.fontFamily": "CaskaydiaCove NF",
    "workbench.list.smoothScrolling": true
}

Visual Studio 예외 설정

'공용 언어 실행 시 이상' 설정은 나로 하여금 많은 시간을 절약하게 했다.
기본적으로 이 설정 부분은 사용되지만, 나는 항상 그것을 사용합니다. 왜냐하면 이것은 내가 모든 창고를 디버깅해야만 이상을 찾을 수 있는 것이 아니라, 즉시 이상 원본을 가리키기 때문입니다.이 설정을 사용하면 디버거가 모든 이상을 중단하고 원본으로 이동합니다.이것은 버그를 찾거나 복구하는 것을 간단하게 한다.
이 설정을 사용하려면 settings.json 바로 가기를 사용하고 공용어 런타임 예외 확인란을 선택합니다.

파일 탐색기 옵션

소프트웨어 개발자로서 숨겨진 파일을 보면 더 중요한 것은 파일 확장명이 필수적이다.이 두 옵션은 파일 탐색기 옵션 창에서 사용할 수 있습니다.

안전하지 않은 로컬 호스트 허용

HTTPS에서 Angular 프로그램을 로컬로 실행하려면 create a self-signed certificate 할 수 있지만, localhost에서 잘못된 인증서를 허용하는 것이 더 쉽다는 것을 알았습니다.브라우저에서 사용할 수 있는 플래그입니다.

에지:

크롬:

결론

나의 최근 경험을 보면, 새로운 Windows 기계인 anno를 설치하는 것은 2022가 가볍고 빠르다.
우리의 일상적인 업무를 더욱 즐겁게 하기 위해 터미널과 IDE는 우리의 수요와 취향에 따라 배치되었다.
자주 수행되는 작업에 대한 스크립트를 작성하여 쉽게 실행할 수 있도록 PowerShell 구성 파일을 만들었습니다. 보통 몇 번의 버튼만 누르면 됩니다.비록 이것들은 보기에는 매우 작지만 틀림없이 생산력의 향상일 것이다.
마지막 단계는 Git 저장소를 복제하고 작업을 시작하는 것입니다.
당신의 새로운 설비를 즐겨라!
트위터에서 저를 팔로우해 주세요. 구독Newsletter | 최초로 timdeschryver.dev에 발표되었습니다.