VS 코드 바로 가기와 팁, 일찍 알았으면 좋겠어요.

14727 단어 htmlcodenewbievscodeproductivity

소개하다.


1년 동안 독학한 후에 저는 2020년 3월에 창시자와 프로그래머 네트워크 개발 훈련소에 가입했을 때 전업 프로그래밍을 시작했습니다.수업이 시작된 지 2주 만에 우리는 영국에서 감금 상태에 들어갔고 나머지 16주 동안 우리 학생들은 학교를 멀리해야 했다.VS Code Live Share의 확장된 협업 능력 덕분에 우리는 여전히 계획에 따라 수업을 마치고 강의 요강을 완성할 수 있다. 그러나 우리가 직접 참가하지 않은 것은 우리가 작은 기교와 요령을 유기적으로 공유한 것이다. 이런 기교와 요령은 보통 당신들이 함께 일할 때 배운 것이다.
너는 누군가가 그들의 화면을 공유할 때 어떤 것을 보여 주는 것을 볼 수 있지만, 그들이 키보드에서 타자를 치는 것을 보지 않으면, 너는 반드시 버튼을 배울 수 없을 것이다. 이것도 너의 하루의 시간을 절약할 수 있다.그래서 저는 처음으로 컨테이너 개발자를 맡은 이래로 예쁜 VS 코드 기교를 많이 배웠습니다. 저는 과정에서 이런 기교를 알고 싶습니다.
나는 이 강연들을 다음 창시자와 프로그래머 단체의 강연으로 엮었다. 제목은'왜 F*** 내가 진작 몰랐지?!'이다.나도 이곳에서 자신의 인코딩 여행을 시작한 사람들에게 공유하고 싶다.

VS 코드 바로 가기


Emmet는 일련의 파일 형식에 기본 줄임말을 제공했다. .html와 .css를 포함하여 유용한 코드 세그먼트로 확장할 수 있다.Emmet은 VS 코드에 내장되어 있으므로 확장을 다운로드할 필요가 없습니다.

HTML 템플릿


VS 코드의 ! 파일에 html를 입력하고 Enter 키를 누르면 다음과 같은 HTML 프레임이 나타납니다.
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

</body>
</html>
자주 사용하는 HTML 태그가 이 템플릿에 나타나지 않아서 제 설정을 했습니다.
나는 !!를 SEO에 사용되는 <meta> 태그와 CSS 스타일시트와 자바스크립트 파일을 연결하는 데 사용되는 사용자 정의 단축키로 바꾸었다.
이 점을 하려면'코드>첫 번째 옵션>사용자 코드 필드'로 내비게이션을 해서'html'을 검색해야 한다.json'.이 파일에 사용자 정의 코드 세그먼트를 추가합니다.
필요한 구조를 HTML 파일에 쓴 다음 this 같은 도구에 복사해서 HTML 파일을 전의 문자가 있는 JSON 문자열로 해석해서 정확한 축진을 얻는 것을 권장합니다.
내 html.json 파일은 다음과 같습니다.
{
  "HTML boilerplate": {
    "prefix": "!!",
    "body": [
      "<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n  <meta charset=\"UTF-8\">\r\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n  <meta name=\"description\" content=\"\">\r\n  <link rel=\"stylesheet\" type=\"text\/css\" href=\"styles.css\">\r\n  <title>Document<\/title>\r\n<\/head>\r\n<body>\r\n  <header>\r\n  <\/header>\r\n  <main>\r\n  <\/main>\r\n  <footer>\r\n  <\/footer>\r\n  <script src=\"scripts.js\"><\/script>\r\n<\/body>\r\n<\/html>"
    ],
    "description": "HTML boilerplate with custom tags"
  }
}
최종 품목 템플릿은 다음과 같습니다.
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="">
  <link rel="stylesheet" type="text/css" href="styles.css">
  <title>Document</title>
</head>
<body>
  <header>
  </header>
  <main>
  </main>
  <footer>
  </footer>
  <script src="scripts.js"></script>
</body>
</html>

HTML 약어


수동으로 코드를 입력하는 것보다 단축키를 배우는 시간이 더 긴 경우도 있다.개인적으로 Emmet 약어가 CSS를 작성하는 시간을 절약할 수 있다고 생각하지는 않지만, 다음과 같은 유용한 HTML 약어가 있습니다.

요소 네스트하기


바로 가기nav>ul>li 생성:
<nav>
  <ul>
    <li></li>
  </ul>
</nav>

다원소


바로 가기li*5 생성:
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>

텍스트가 있는 태그


바로 가기a{Click Me} 생성:
<a href="">Click Me</a>

여러 종류의 원소를 가지고 있다


바로 가기div.first-class.second-class 생성:
<div class="first-class second-class"></div>

ID가 있는 요소


바로 가기div#main 생성:
<div id="main"></div>
Emmet Docs Cheat Sheet에서 찾을 수 있는 바로 가기의 전체 목록입니다.

VS 코드 소스 제어 탭


VS 코드에 내장된 소스 코드 관리 기능을 사용하면 터미널 대신 VS 코드 UI를 사용하여 파일을 임시 저장하고 커밋 메시지를 작성할 수 있습니다.
내가 좋아하는 것은:
  • 터미널에 파일 경로를 입력하지 않고도 특정 파일을 쉽게 임시 저장할 수 있습니다.
  • 커밋 메시지를 보다 쉽게 포맷할 수 있습니다.
  • 제출 메시지를 작성할 때 한 줄에 추천 문자 수를 초과하면 경고를 보냅니다.
  • Live Share 확장을 사용하는 경우 파트너의 공동 제작 자격 증명(GitHub 계정으로 로그인해야 함)이 표시됩니다.

    • 유용한 VS 코드 확장


    괄호 착색기 2


    코드에 일치하는 시작 괄호와 끝 괄호로 확장되어 함수와 문장의 범위를 한눈에 확인할 수 있습니다.
    확장 없음:

    추가 확장:

    편집: 본고는 최초로 괄호 대색기 v1에 연결되었습니다. 댓글에 v2가 더 빠르고 정확하다고 지적해 주셔서 감사합니다!

    상대 파일 경로


    이 확장자는 현재 파일에서 다른 파일의 상대 파일 경로를 가져오는 단축키를 제공합니다.이것은 대량의 플러그인 폴더를 포함하는 대형 코드 라이브러리에 매우 유용하다. 이 폴더들 사이에서 파일 사이에 대량의 가져오기와 내보내기가 있는데, 예를 들어 React에서.js 프로젝트.
    바로 가기를 사용하여 파일 검색(WindowsCtrl+Shift+H, MacCmd+Shift+H을 엽니다.

    상대 경로가 필요한 파일을 검색하려면 다음과 같이 하십시오.

    상대 경로가 나타납니다.

    키트랑스


    이 확장은 당신의 편집기에 있어서Git는 매우 강력합니다. 나는 아직 어떻게 사용하는지 모르는 많은 기능들이 있습니다.
    Git Bull 기능을 사용하면 파일의 모든 행에 최근 제출 내역을 설명합니다.이것은 그룹 프로젝트를 처리할 때 특히 유용합니다. 이로써 지난번 변경 사항이 언제 이루어졌는지, 누가 이루어졌는지, 그리고 관련 제출 메시지를 한눈에 볼 수 있습니다.

    더욱 아름답다


    Prettier는 당신의 코드를 자동으로 포맷하기 때문에 구원의 별입니다.VS 코드로 확장하여 다운로드할 수 있으며 응용 프로그램에서 구성한 설정을 실행합니다(설정으로 이동하여 Prettier 검색).
    현재 파일을 포맷하려면 마우스 오른쪽 단추를 누르고 '문서 포맷' 을 선택하거나 파일을 저장할 때 자동 포맷을 사용하십시오. '설정' 으로 이동하고 '저장할 때 포맷' 을 검색한 다음 체크 상자를 선택하십시오.

    그룹 프로젝트의 루트 폴더에 .prettierrc 프로필이 있는 것은 좋은 생각입니다. 의도, 싱글, 더블, 모든 줄을 분호로 끝내야 하는지 여부를 표시할 수 있는 공간을 지정할 수 있습니다.
    프로필은 로컬 설정과 코드가 더 예쁜 설정을 덮어씁니다. 그러면 팀의 모든 사람들이 그들의 코드에 같은 형식 규칙을 적용할 것입니다. 심각한 충돌을 피할 수 있습니다.
    나는 이것Prettier Config Generator을 사용하여 파일에 JSON을 생성했는데 이것Prettier docs은 모든 형식 옵션의 의미를 상세하게 설명했다..prettierrc 파일에는 다음과 같은 JSON이 포함되어 있습니다.
    {
    "printWidth": 80,
    "tabWidth": 2,
    "useTabs": false,
    "semi": true,
    "singleQuote": false
}
    다시 포맷하기:

    여기서 균일한 간격, 평균 선가중치는 약 80자, 탭 대신 두 개의 공백을 들여쓰기에 사용하고 각 문장 끝에 세미콜론을 인쇄하며 큰 따옴표 대신 큰 따옴표를 사용합니다.

    이 예는 Prettier 응용 프로그램의 형식 변경을 보여 주는 것일 뿐 코드 스타일을 사용하는 것을 추천하지 않습니다.대부분의 경우, 설정을 너무 많이 사용할 필요가 없다. 코드 라이브러리의 일치성을 유지하기 위해 basic config 를 사용할 수도 있고, 개발자로 일하기 시작했을 때, 당신의 회사는 이미 '집 스타일' 이 생겼다.
    Vulkan SDK 1.1 Samples build (Windows)
    기존 Sequelize 마이그레이션에 새 필드를 추가하는 방법

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

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