웹 개발의 기교와 기교

Edit 21/10/20: Added command line helper

(저는 여기서 블로그를 쓰기 시작했습니다. 왜냐하면 저는 자신의 사이트를 위해 방안을 설계하기로 결심하지 않은 것 같습니다. 언젠가는 최종적으로 방안을 완성할 수 있지만 지금은 제3자 플랫폼을 사용할 것입니다.)
내 첫 번째 게시물은 내가 10년 동안 전단 개발 과정에서 수집한 작은 기교에 관한 것일 것 같다.나는 지금 정말 다시는 이런 사소한 일을 생각하지 않을 것이다. 그러나 사람들이 내가 코드를 작성하는 것을 볼 때 (최근에는 완전히 가상적) 나는 여전히 깜짝 놀랄 것이다.
우리 시작합시다. 나는 몇 분 후에 일어설 것입니다. 기한이 지난 영감들이 이미 나타났습니다.

Git 별칭

git 명령을 작성하는 것은 사람을 힘들게 할 수도 있고, 때로는 사람을 화나게 할 수도 있다."ffs"는 주어진 시간에 어떤 매개 변수 문자를 입력해야 하는 시간을 잊어버리거나 매일 같은 명령을 여러 번 입력해야 하는 시간을 잊어버린다.속도를 높이기 위해 Git 별칭을 추가하여 더 작은 키보드 공간에 같은 명령을 입력할 수 있도록 했습니다.현재 목록을 [GitHub의 요점]으로 저장하면 새 컴퓨터를 설치할 수 있습니다. (청부업자로서 놀랍습니다.)
이것들은 내가 거의 매일 쓸 수 있는 것이다.

git a = git add --all

git cm "[commit message]" = git commit -m "[commit message]"

git co [branch name] = git checkout [branch name]

git cob [new branch name] = git checkout -b [new branch name]

git ps = git push

git s = git status

나의 전체 목록에는 기본 주소를 다시 정하는 데 도움이 되는 내용도 포함되어 있다. 나는 보통 bog 표준 합병이 아니라 이렇게 한다.이 목록은 매우 간단해서 보기에는 그다지 가치가 없을 것 같지만, 나는 그것들이 매우 유용하다고 생각한다.
이러한 별칭을 사용하거나 자신의 별칭을 설정하려면 다음 절차를 따르십시오.

기계에서 열기~/.gitconfig.

파일이 존재하지 않으면 자동으로 파일을 만들기 때문에 Vim을 사용하는 것을 권장합니다.명령줄에 vi ~/.gitconfig 을 입력하여 사용합니다.만약 당신이 그것을 사용한 적이 없다면, 주의하세요 how to save and exit.

아래에 새 행을 추가하고 [alias] 를 입력합니다.

별도의 새 줄에 사용할 명령을 shortcut = command 형식으로 입력합니다.예를 들어, a = add --all.

파일을 저장하고 터미널을 다시 시작합니다.

에미트 사용하기

만약 네가 그것을 들어 본 적이 없다면, 상관없지만, 너는 이미 사용한 적이 있을 것이다.
Emmet은 VS code와 같은 코드 편집기에 미리 설치된 작은 도구로, 전체 길이의 HTML이나 JSX로 확장된 짧은 동적 CSS 세션을 작성할 수 있습니다.예:

div.a-class#an-id

HTML 파일이나 JSX에 위 내용을 쓴 후 shift 키를 누르면 다음과 같이 확장됩니다.

<div class="a-class" id="an-id"></div>

이것은 상대적으로 간단한 예이지만, 진정한 비결은 Emmet이 얼마나 강한지, 그리고 코드의 원형을 얼마나 빨리 작성할 수 있는지, 특히 중복에 있어서이다.CSS 속성을 작성하는 줄임말도 포함됩니다.
나는 작은 Emmet playground 네트워크 응용 프로그램을 만들었는데, 이것은 당신이 자신의 Emmet 속기를 시도할 수 있도록 가능한 예시를 제공했다.지난 몇 년 동안 나는 그것들을 자주 사용했다. 나는 미래의 시간을 절약하기 위해 실천에 투자할 가치가 있다고 생각한다.

터미널 테마 업그레이드

Mac의 bog 표준 단말기 (또는 Windows의 Powershell/cmd) 는 이 작업을 완성했지만, 테마와 플러그인 같은 것들에 대한 갈망을 남겼다.당신의 단말기를 업그레이드하는 것은 당신이 이 물건들을 얻었다는 것을 의미하지만, 약간의 즐거움을 얻었다는 것을 의미한다.
나는 지령 설정과 이 모든 것을 깊이 토론하지 않을 것이다. 왜냐하면 내가 쓴 어떤 지령도 발표 후 몇 초 안에 유행이 지날 수 있기 때문이다.반대로, 나는 나의 설정을 보여 주고, 내가 이 점을 실현하는 도구를 열거하며, 내가 최근에 발견한 설정에 도움이 되는 문장에 연결할 것이다.
우선, 나의 현재 설정은 다음과 같다.

어떤 것을 실행할 때마다 상태 표시줄이 업데이트되고 현재 Git 브랜치와 상태, 그리고 프로젝트의 버전package.json과 내가 사용하고 있는 노드 버전이 표시됩니다.내 항목이 포함될 경우Dockerfile 현재 사용 중인 Docker 버전도 표시됩니다.
현재 명령행 응용 프로그램으로 Hyper 을 사용하고 있지만, 나도 iTerm2 의 장기 사용자이다.그리고 플러그인을 더 화려하게 만들고, ohmyzsh 프레임워크를 사용해서 zsh 플러그인을 더 화려하게 만들고, Spaceship 라는 테마를 사용해서 일을 매우 화려하게 보이게 합니다. (위의 화면 캡처에서 이런 작은 상태를 얻습니다.)
내 설정을 복사하든지 다른 설정을 사용하든지 간에 this article by Owen Caulfield 을 보십시오. 이 물건들이 무엇인지, 그리고 어떻게 설치하는지 상세하게 소개해 드리겠습니다.

터미널 자동 수정

나는 이 thefuck 명령행 확장을 좋아한다.이것은 기본적으로 이전의 명령을 되돌아보고 오자를 입력했는지 가리키며 입력하고자 하는 내용을 찾아서 실행합니다.그것은 너로 하여금 이런 아름다운 체험과 유쾌한 웃음소리를 가지게 할 수 있다.

VS 코드 확장

많은 다른 개발자들처럼 몇 년 전에 나는 VS Code로 바뀌었다. 그 이후로 나는 다시는 다른 편집자에게 눈을 깜빡인 적이 없다.bloated cousin와 달리 VS 코드는 좋은 개발 체험을 제공했고 특히 전단 개발자, 그리고 멋진 디버깅 도구를 제공했다.그러나 나에게 있어서 주요한 매력은 지역 사회가 플러그인을 개발하고 시장을 방문하며 일상적인 인코딩 열풍을 업그레이드하는 데 진정한 가치가 있다는 것이다.
다음은 내가 현재 가장 좋아하는 확장 목록이다. 나는 거의 매일 이런 확장을 사용하거나 적어도 그것들이 매우 유용하다고 생각한다.

Bracket Pair Colorizer 2 - 괄호 또는 괄호에 색상을 추가하여 스캔하기 쉽도록 확장합니다.

Error Lens - 코드에 무슨 문제가 있는지 일목요연하게 알려줍니다.ESLint와 같은 사용 가능한 모든 대들보에 적용됩니다.

GitHub Theme - 내가 제일 좋아하는 주제.깨끗하고 간단하다.

GitLens - 때로는 너무 횡포하지만 이것은 Git의 역사를 훑어보고 한 줄씩 제출할 수 있는 매우 강력한 확장이다.

Simple React Snippets - React 템플릿 코드를 신속하게 추가하는 것이 도움이 됩니다.

vscode-icons - 거의 상상할 수 있는 모든 파일 형식에는 기본적이고 아름다운 아이콘이 있다.

나는 이것이 다른 개발자들에게 도움이 되거나 적어도 원칙적으로 도움이 되기를 바란다.더 많은 것을 알고 싶다면, 개발자와 다른 전문가들의 소장품이 있습니다. 그들은 자신의 사이트에서'사용'페이지에서 그들이 사용하는 내용을 정리합니다.다음은 모음의 일부입니다.

uses.tech

awesome-uses (GitHub)

uses this