VScode에서 더 빨리 작업

12936 단어 vscodecssbeginnershtml
오늘 여러분과 가장 유행하는 현대 코드 편집기인 Visual Studio 코드에서 더 빠르고 효율적으로 작업할 수 있는 기교와 기교를 공유하고 싶습니다.VScode의 기능은 매우 광범위하다. 이것은 설정, 유연성, 통합과 확장 덕분이다. 그래서 제가 공유하고자 하는 것은 빙산의 일각일 뿐이므로 가능한 한 직접 탐색해 보시기를 권장합니다.

설정


대부분의 기본 설정이 만족스럽지만, Ctrl + 를 누르면 빠르게 접근할 수 있습니다.

  • 탭 크기 - 나는 두 개의 빈칸을 움츠린 사람이지만, 나는 this holy war에 참가하지 않기 때문에 너에게 가장 적합한 것을 선택한다.

  • 들여쓰기 감지 - 다른 사람의 파일을 열 때 규칙을 덮어쓰지 않도록 이전 들여쓰기와 연관됩니다.

  • Word wrap - 기본 설정을 설정합니다.편집기에서 Alt+Z 키를 눌러 행을 전환할 수도 있습니다.

  • 트림 후행 공백 - 설명과 같습니다.

  • 유형에 따라 이름 바꾸기 - 가장 중요한 것은 자동 이름 바꾸기 태그 확장으로 충당합니다.도움말 시작 및 끝 HTML 태그(예: <section></section>)의 이름을 동시에 바꿉니다.
    업데이트 2021: 유형의 이름이 링크 편집 설정으로 대체되었습니다!

    • 확장성


    VScode는 유용하고 쓸모없는 확장이 많습니다. 다음은 제 개인적인 선택입니다. (빠른 확장 접근 - Ctrl + Shift + X)
  • Prettier - 서로 다른 언어(JavaScript, TypeScript, JSON, CSS, SCSSS, HTML, Vue, Angular 등)에 대한 코드 포맷 프로그램으로 코드를 더욱 아름답게 만듭니다.Shift+Alt+F를 눌러 문서를 포맷할 수 있습니다(처음 호출할 때 기본 포맷 프로그램을 선택해야 함).기본적으로 확장자는 파일에 큰따옴표를 사용하지만 VScode 설정에서 "prettier single quote"를 검색하여 변경할 수 있습니다.
  • Beautify - 자바스크립트, JSON, CSS, Sass, HTML의 더 예쁜 대체품.실제로, 나는 그것을 Prettier와 결합하여 사용하지만, HTML과 CSS 파일에만 사용한다. (나는 이 파일에서 더블 인덱스를 사용하고, JS에서는 단일 인덱스를 사용하는 것을 더 좋아한다.)설정을 변경하는 것은 Prettier에서 쉽게 수행할 수 없으며 설정에 설정을 입력해야 합니다.json 파일은 다음과 같습니다.
    • "beautify.config": {
      "wrap_line_length": 80,
      "indent_size": 2
    },
  • Code Runner - 자주 사용하지 않지만 VScode 콘솔에서 다양한 언어의 코드 세그먼트나 코드 파일을 직접 실행합니다 (Ctrl + Alt + N 누르십시오).
  • 코드 맞춤법 검사기 - 코드에서 흔히 볼 수 있는 맞춤법 오류와 타자 오류(텍스트, 변수 이름 등)를 검사합니다. 설치 후 다양한 언어를 사용해야 합니다(설명 참조).
  • CodeSnap - 코드를 캡처합니다.예를 들어 이것과 유사한 확장이 여러 개 있다.
  • GitLens - 강력한 확장성으로 git를 더욱 쉽고 즐겁게 사용할 수 있습니다.
  • 이미지 미리 보기 - 코드에 이미지 링크가 있는 경우 이미지 축소판을 코드 행 왼쪽에 표시합니다.
  • LiveServer - 노드를 설치하지 않고도 웹 사이트를 실시간으로 업데이트할 수 있는 가장 간단한 방법인 로컬 개발 서버를 시작합니다.js 또는 기타 모든 것.
  • JavaScript(ES6) 코드 세그먼트 - 서로 다른 언어에 대한 코드 세그먼트 확장이 많은데, 예를 들어prom+Tab을 입력하면 return new Promise((resolve, reject) => {});으로 바뀐다는 생각이다.너의 시간을 절약해라.대부분의 코드가 편집기에 내장되어 있기 때문에 HTML/CSS는 코드 세션을 필요로 하지 않습니다.
  • 무지개 - 순수한 비주얼로 반투명 색상 설정을 교체하여 들여씁니다.
  • 괄호 착색기 2 - 깊이가 다른 괄호의 색깔은 쌍으로 표시됩니다.
  • WakaTime - 코딩 통계 정보의 확장을 추적합니다.또한 https://wakatime.com/을 등록하고 확장을 위한 API 키를 제공해야 합니다.
  • 재료 아이콘 테마 - 내가 가장 좋아하는 파일 유형 아이콘 테마.
  • 에도 여러 가지 색깔 테마가 있는데 Atom One Dark 테마나 One Dark Pro를 보세요. 하지만 기본 테마도 괜찮아요.

    • 지름길


    키보드 단축키가 너무 많아서 계산하기 어렵다.다음은 Windows 버전의 편집기 창에서 가장 자주 사용하는 도구입니다.

  • Ctrl+오른쪽/왼쪽 - 다음/이전 단어로 이동

  • Alt+위쪽/아래쪽 - 위쪽/아래쪽 선 이동/선택한 블록

  • Shift+Alt+Up/Down-
    • 위쪽/아래쪽 행/선택한 블록 복사

  • Ctrl+Backspace - 이전 단어 삭제

  • Shift+Del- 가공선/선택한 블록

  • Shift+Tab- 줄/선택한 블록의 들여쓰기 감소

  • Ctrl+G - 모든 내용(행, 파일 등)으로 이동

  • Ctrl+P - 파일
    • 으로 이동

  • F2-변수 이름바꾸기(문서의 어느 곳에서나 변경)

  • F12 - 변수 정의
    • 으로 이동

  • Ctrl+/- 행 주석

  • Shift+Alt+A-메모 차단

  • Ctrl+D -
    • 선택에 다음 일치 추가

  • Shift+Alt+F-형식 문서

  • Ctrl+Space - 권장 사항 표시

  • Ctrl+Z - 줄 바꿈

  • Ctrl+` - 터미널
    • 으로 켜고 이동

  • Ctrl+1/2/…-제1/제2/로 이동...코드 패널

  • Alt+ 클릭 - 다중 커서

  • Ctrl+Alt+Shift+Up/Down 또는 마우스 가운데 버튼 누름 - 다중 커서

  • Ctrl+Shift+V-가격 인하 미리보기

  • Ctrl+K 그리고 V-가격 인하 미리보기 나란히

  • Alt+ 리소스 매니저에서 파일 클릭 - 패널
    • 나란히 열기

  • F1 또는 Ctrl+Shift+P - 모든 명령 표시

    • In editor window, you can select the code, then call F1 and select Emmet: Wrap with Abbreviation to wrap the content in another element tag, for example. You can also add your own shortcut for that function.


    Emmet 및 코드 권장 사항


    Emmet은 VS코드에 내장된 강력한 도구 패키지로서 많은 시간을 절약할 수 있습니다.간단한 코드 세션을 작성해서 신기하게도 요소, 키워드, 속성으로 변환할 수 있습니다.이것은 매우 중요한 화제이다. 나는 그 중의 일부분만을 사용했기 때문에 여기에 몇 가지 예가 있다.

  • ! + 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>

  • ul.리스트>이.HTML의 항목 {text$}*6+ 탭:
    • <ul class="list">
  <li class="item">text1</li>
  <li class="item">text2</li>
  <li class="item">text3</li>
  <li class="item">text4</li>
  <li class="item">text5</li>
  <li class="item">text6</li>
</ul>

  • .quick+ 탭(HTML 형식):
    • <div class="quick"></div>

  • 선택기에 있는 CSS의 gtc+ 탭:
    • grid-template-columns: repeat();

  • CSS의 fz20r+ 탭:
    • font-size: 20rem;

  • CSS의 bb+ 탭:
    • border-bottom: 1px solid #000;
    보시다시피, 입력을 시작하기만 하면 됩니다. 에이미트는 당신이 필요로 하는 것이 무엇인지 조언합니다.
    JavaScript에서는 위/아래 화살표를 사용하여 권장 사항을 선택할 수도 있습니다.예를 들어 fo를 입력하면 For 순환을 즉시 선택할 수 있으며, 이 순환에서 Tab 키를 누르면 파라미터를 빠르게 건너뛸 수 있습니다.

    for (let index = 0; index < array.length; index++) {
  const element = array[index];
}
    앞서 언급한 JavaScript(ES6) 코드 세그먼트 등의 확장은 목록에 새로운 제안을 추가했습니다.

    지트


    내가 가장 공유하고 싶지 않은 것은 Git 단축키다.조만간 사용하고 싶을 수도 있으니 명령행 (VScode 터미널) 에서 배워서 사용하도록 하겠습니다.파일과 디렉터리를 만들거나 이동하거나 복사하는 Bash 명령을 배우는 것은 나쁘지 않습니다.(참고로 입력을 시작하고 Tab 키를 누르면 Bash에서 조언을 해 줍니다.)
    git 명령을 더 빨리 입력하려면 별명을 사용할 수 있습니다.명령을 git로 줄일 때 git 별명이 있을 수 있지만, Bash 별명을 사용하는 것이 좋습니다. 그러면 git 부분도 줄일 수 있습니다.그것들을 만드는 방법 중 하나는 하나를 만드는 것이다.bashrc 파일을 만들고 별명을 직접 추가합니다.다음은 내 목록입니다.
    alias gst='git status'
alias gaa='git add .'
alias gcm='git commit -m'
alias gcmno='git commit --amend --no-edit'
alias gch='git checkout'
alias gchd='git checkout develop'
alias gchm='git checkout master'
alias gchb='git checkout -b'
alias gbr='git branch'
alias glo='git log --oneline'
    따라서 터미널에서 전체 명령을 입력하지 않고, 예를 들어glo를 입력합니다.↵ 제출 로그를 봅니다.홈 디렉터리가 어디에 있는지 확인하지 못하면 echo$home을 입력하십시오↵ VScode 터미널에서
    또한 홈 디렉토리를 변경하려면 터미널(Windows)에서 다음 코드를 사용할 수 있습니다.
    setx HOME "C:\Path-to-your-projects\Projects"
    그런 다음 VScode를 다시 시작해야 합니다.
    또한 유용한 VScode 바로 가기와
    이 내용들은 내가 오늘 공유하고 싶은 모든 내용을 포함하고 있으니 당신들에게 유용하길 바랍니다.읽어주셔서 감사합니다!
    제목 그림의 배경은 Luca Campioni에서 제공
    T-SQL 코드로 캐시 효율성 향상 메모리 소모량 감소
    알고리즘 :: 백준 :: BFS :: 13549 :: 숨바꼭질3

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

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