VS 코드에서 변경 내용 커밋

소개하다.

비록 나는 어떻게 터미널을 사용하여 제출을 추진하는지 개술했지만 그 글을 쓴 후에 나는 기본적으로 터미널을 사용하여 제출을 추진하지 않고 VS 코드의git 패널에서 직접 이렇게 했다!나는 VS 코드에서 변경을 추진하는 것이 더욱 쉽다는 것을 발견했기 때문에, 나는 어떻게 VS 코드에서 제출을 처리하는지 개술하는 글을 쓰기로 결정했다.

A handful of steps from this article will be very similar to part 2 of the series, but this time around we will be doing as much as possible via VS Code!

선결 조건

Install git

VS Code installed

A GitHub account

설치 프로그램

브라우저를 https://github.com/12vanblart/color-themes

로 탐색

오른쪽 상단의 포크 버튼 클릭

Github에서 메모리 라이브러리에 대한 갈라짐을 완성한 후 "복제 또는 다운로드"단추를 누르고 대화상자에서 URL을 복사합니다.

새 VS 코드 창 열기

'입문'페이지에서'클론 Git 저장소'라는 기본 옵션을 보실 수 있습니다. 이것을 클릭하세요!

화면 상단의 프롬프트에 3단계 복사된 URL을 입력하고 Enter 키를 누릅니다.

파일 리소스 매니저 창이 열립니다. - 프로젝트를 저장할 폴더로 이동합니다.선택한 폴더의 저장소에 있는 파일을 포함하는 색상 주제라는 폴더가 만들어집니다.

폴더를 선택하면 VS 코드의 알림이 저장소를 열지 여부를 알려 줍니다. 열기 또는 새 창에서 열기를 클릭하여 저장소로 이동할 수 있습니다.

현재 우리는 VS 코드의 왼쪽 아래에 있는'main'을 클릭하여 지점을 만들 것이다. 화면 맨 위에 알림이 나타날 것이다.원하는 지점 이름을 입력하고 "새 지점 만들기"를 클릭합니다.

리본 > 터미널 > 새 터미널 아래의 VS 코드에서 통합 터미널을 열고 명령을 실행하여 테스트 실행 서비스에 필요한 소프트웨어 패키지를 설치합니다.

In the past I've had issues with the VS Code Terminal not opening while Hyper was installed - if you have Hyper installed you may need to navigate to the directory and run these commands via Hyper.

완료npm install 후 npm install 애플리케이션의 로컬 복제본을 실행합니다.Ctrl+C를 사용하여 언제든지 로컬 서버를 중지하고 npm run serve "일괄 처리 작업을 종료하시겠습니까?"

선택한 웹 브라우저를 열고 y!

이때 themes.tvanblargan.com와 같은 내용을 보셔야 합니다.

주제 추가

새 테마를 추가하려면 두 개의 파일이 업데이트되어야 합니다. (localhost:8080 와 src/assets/themes.css.이 파일들은 상기 src/components/ThemePicker.vue 명령을 사용할 때 만들어진 것이다.만약 어떤 Vue도 모르신다면 걱정하지 마십시오. 이 파일에 대한 변경이 너무 격렬하지 않을 것입니다.

ThemePicker 편집vue

이 파일에서 28줄에서 시작하는 git clone 구성 요소 목록을 볼 수 있습니다.다음과 같이 기존 행<Theme> 뒤에 새 행을 추가합니다.

<Theme theme-name="your-theme-name" display-name="Your Theme Name" contributor="githubUsername"/>

<Theme> 를 클래스 이름으로 바꾸기 (아래 편집 themes.css 참조), your-theme-name 옵션 목록에 표시된 테마 이름으로 바꾸기 Your Theme Name, Github 사용자 이름으로 바꾸기.

주제를 편집합니다.css

15 행에서는 다음 항목을 복사해야 합니다(메모가 끝난 후 파일의 맨 위에 주제가 있는지 확인).

.your-theme-name {
  --primary: #fff;
  --secondary: #fff;
  --accent: #fff;
  --link: #fff;
  --text: #fff;
}

호출하고자 하는 테마 클래스의 대상이 되도록 githubUsername 업데이트할 것입니다. (선택한 이름의 테마가 있는지 확인하십시오.)
다음에 your-theme-name의 색상을 선택한 색상으로 업데이트합니다.만약 어디서부터 색깔을 선택해야 할지 확실하지 않다면, 나는 네가 한번 해 보는 것을 건의한다. Pallettte
주제를 선택한 후 주제를 저장합니다.css는 새 테마를 다시 선택할 필요가 없는localhost를 즉시 업데이트합니다!

PR 요청 수락

테마를 선택할 때마다 #fff 카드의 값이 다시 계산되고 업데이트되어 테마 색상 간의 대비도를 반영합니다.주제가 승인되기 위해서는 각 숫자가 4.5보다 크거나 같아야 합니다(WCAG AA에 부합).

변경 내용 커밋

일단 당신의 주제에 만족하고 대비도 요구를 통과하면 변경 사항을 저장하고 싶을 것입니다. 그러면 그들은 현장에 추가되고 모든 사람들이 당신의 멋진 주제를 볼 수 있습니다!
이렇게 하려면 VS 코드에서 git 패널을 엽니다.

제목 "변경"아래에 A11y 과 themes.css 이 표시될 것입니다.마지막으로 파일을 제출한 이후 수정된 모든 파일이 표시됩니다.각 항목에 마우스를 올려 놓으면 "+"아이콘과 "실행 취소 화살표"가 각각 변경됩니다.두 항목의 + 아이콘을 클릭하여 단계 변경 제목으로 이동합니다.

두 파일이 모두 임시 저장되면 '임시 저장 변경' 제목 위의 입력 상자에 제출 메시지를 추가합니다.입력한 후 Ctrl+Enter 또는 입력 상자 위에 있는 확인 표시를 눌러 변경 사항을 커밋합니다.

잠시 처리하면 파일이 목록에서 사라지는 것을 볼 수 있습니다. 이것은 변경 사항이 제출되었다는 것을 의미합니다.왼쪽 아래에 지점 이름 옆에 있는 클라우드 퍼블리시 아이콘을 클릭하여 구름으로 보낼 때가 되었습니다!

클릭하면 동기화 화살표 두 개가 일정 시간 회전하고 GitHub로 이동하여 변경 사항을 실시간으로 볼 수 있습니다.
주의: 첫 번째 발표 후 VS 코드는 발표 구름 아이콘을 표시하지 않고 아래 화살표 옆에 숫자를 표시합니다. 위 화살표 옆에 숫자를 표시합니다. 이것은 GitHub에서 GitHub로 추출/전송할 제출 수량을 표시합니다. 그 중 하나를 누르면 로컬 저장소와 온라인 저장소가 동기화됩니다.

The rest of this article will be the same as of this series

잡아당기기 요청!

이제 github.com로 이동하여 갈라진 저장소(github.com/yourUserName/color-themes)로 이동하고 '끌어오기 요청' 옵션을 선택한 다음 '새 끌어오기 요청' 단추를 누르십시오.

페이지가 로드되면 왼쪽 드롭다운 목록ThemePicker.vue과 base repository: 12vanblart/color-themes, 오른쪽 선택 항목base: main 및 head repository: yourUserName/color-themes을 확인해야 합니다.

"Pull Request 작성"을 클릭하고 상세 정보 작성

"추출요청 만들기"를 클릭하여 주제를 제출하여 심사하세요!