VS 코드 설정으로 생산성 향상

코드 편집기는 여러 해 동안 끊임없이 발전해 왔다.몇 년 전에는 Visual Studio 코드(VS 코드)가 없었습니다.Sublime, Atom, 괄호 등을 사용하고 있을 수 있습니다. 그러나 VS 코드가 발표되면서 대부분의 소프트웨어 개발자들이 가장 좋아하는 편집기가 되었습니다.

왜 VS 코드를 선택했습니까?

사용자 정의 가능

디버깅 용이

에밋

확장

Git 통합

통합 터미널

지능형 감지

경량

주제와 더...

VS 코드and awesome things you can do with it를 사용하는 장점을 파악한 후 본고는 생산력의 측면에서 VS 코드를 사용할 때 필요한 VS 코드 설정과 확장을 소개하고자 한다.

에미트

많은 유행하는 텍스트 편집기에서 사용되는데, 이것은 HTML과 CSS 작업 흐름을 크게 향상시켰다.
액세스하려면 CMD+Shift+P를 누릅니다. 그런 다음 emmet을 검색합니다.이것은 emmet를 사용하여 실행할 수 있는 작업 목록을 보여 줍니다.
예를 들어 클래스 항목으로 5개의div를 표시하려면

  .item{$}*5

그런 다음 Enter 키를 누릅니다.결국

<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>

글꼴

FiraCode 연자를 지원하기 때문에 멋있어 보인다.그것은 당신의 코드를 일목요연하게 합니다.FiraCode를 다운로드하여 설치한 다음 settings.json 파일에 추가합니다.

프로비저닝

기본 설정과 일치하도록 settings.json 파일에서 VS 코드를 구성할 수 있습니다.

{
    "editor.multiCursorModifier": "ctrlCmd",
    "editor.formatOnPaste": true,
    "editor.wordWrap": "bounded",
    "editor.trimAutoWhitespace": true,
    "editor.fontFamily": "Fira Code",
    "editor.fontLigatures": true,
    "editor.fontSize": 14,
    "editor.formatOnSave": true,
    "files.autoSave": "onFocusChange",
    "emmet.syntaxProfiles": {
        "javascript": "jsx"
    },
    "eslint.autoFixOnSave": true,
    "eslint.validate": [
        "javascript",
        "javascriptreact"
    ],
    "javascript.validate.enable": true,
    "git.enableSmartCommit": true,
    "files.trimTrailingWhitespace": true,
    "editor.tabSize": 2,
    "gitlens.historyExplorer.enabled": true,
    "diffEditor.ignoreTrimWhitespace": false,
    "workbench.sideBar.location": "right",
    "explorer.confirmDelete": false,
    "javascript.updateImportsOnFileMove.enabled": "always",
}

명령줄에서 시작

CMD+Shift+P를 누르고 셸 명령을 입력한 다음 경로에서 코드 설치 명령을 선택하십시오.
그런 다음 터미널에서 항목을 탐색하고 디렉토리에서 code . 를 입력하여 VS 코드를 사용하여 프로젝트를 시작합니다.

다중 커서

여러 줄 코드를 동시에 수정할 수 있습니다.settings.json 파일에서 기본 액세스 키를 설정해야 합니다.

    "editor.multiCursorModifier": "ctrlCmd",

    or

    "editor.multiCursorModifier": "alt",

에어 스테이션

VS 코드 터미널 설정을 사용할 수 있습니다set up your terminal to use iTerm2 and ZSh.

확장

다음은 개발자가 코드 라이브러리를 사용할 때의 체험을 개선할 수 있는 유용한 확장이다.
이러한 확장에 액세스하려면

액세스 > 확장

시장에서 검색 확장

설치 클릭

jsdoc 주석 추가

그러면 코드에 주석 블록이 추가됩니다.이를 사용하려면 함수의 첫 번째 행을 강조표시하고 CMD+Shift+P를 누른 다음 문서 주석 추가 를 선택합니다.

자동 가져오기

이 확장자를 사용하면 파일을 수동으로 가져올 필요가 없습니다.구성 요소 기반 프로젝트를 처리하는 경우 구성 요소 이름을 계속 입력하면 자동으로 가져옵니다.

레이블 자동 이름 바꾸기

요소 쌍으로 자동 이름 바꾸기

CSS Peek

말 그대로 코드 라이브러리에 정의된 스타일 응용의 규칙과 특수성을 이해하는 데 도움이 됩니다.유류 코드를 처리할 때, 그것은 매우 편리하다.

Chrome 디버거

구글 브라우저에서 자바스크립트 코드를 직접 디버깅할 수 있습니다.

Docker

이 확장 동적으로 Dockerfiles를 만들 수 있습니다.문법 하이라이트 디스플레이, 스마트 감지 기능도 제공한다.
CMD+Shift+P 키를 누르고 작업공간에 Docker 파일 추가 검색

ESDoc MDN

어떤 상황에서 우리는 종종 특정한 사물이 어떻게 일을 하는지 잊어버린다.이것이 바로 이 확장이 유용해지는 곳이다.웹 브라우저를 시작해서 문법을 찾을 필요가 없습니다.너는 타자만 하면 돼.

//mdn [object].[method];

ESLint

이것은 ESLint를 VS 코드에 통합하여 코드를 lint로 만듭니다.작업 중인 프로젝트는 확장된 기능을 활용하기 위해 로컬 또는 전역으로 ESLint를 설치해야 합니다.
ESLint를 로컬에 설치하려면 실행 npm install eslint 또는 글로벌 설치를 사용합니다.npm install -g eslint ..eslintrc 프로필을 만들어야 합니다.
로컬에 ESLint를 설치한 경우 실행./node_modules/.bin/eslint --init또는 eslint --init전 세계 설치에 사용됩니다.

GitLens

GitLens는 Git를 사용하여 구현할 수 있는 기능이 향상되었습니다.Git 저장소를 빈틈없이 훑어보거나 코드 수정을 보거나 작성자를 보는 등 더 많은 일을 할 수 있다.

구글 글꼴

이 확장을 통해 구글 글꼴을 추가하는 것이 더욱 쉬워졌다.브라우저에서 글꼴을 검색할 필요가 없습니다.글꼴 목록에 액세스하려면 CMD+Shift+P를 누르고 구글 글꼴을 검색하여 계속하십시오.

HTMLHint

이 확장은 HTML을 검증하여 작성할 수 있도록 도와줍니다.

수입 원가

가져오기 비용은 코드 내 가져오기 패키지의 영향을 표시합니다.그것은 성능 병목을 평가하는 데 도움이 된다.

Live Server

이것은 실시간 다시 불러오는 기능을 가진 로컬 개발 서버를 시작합니다.

공작

이 확장을 사용하면 작업공간의 작업공간 색상을 변경할 수 있습니다.여러 개의 VS 코드 인스턴스가 있고 특정 인스턴스를 빠르게 식별하고자 할 때 이상적인 선택입니다.
Peacock 설치 후 설정 아이콘 > 설정 을 클릭합니다.
작업공간 설정 탭을 선택하고 {} 을 클릭한 다음 다음 다음 코드를 붙여넣습니다.

    {
        "workbench.colorCustomizations": {
            "activityBar.background": "#e90b8d",
            "activityBar.foreground": "#fff",
            "activityBar.inactiveForeground": "#b5b5b5",
        },
        "peacock.affectedElements": [
            "activityBar",
        ]
    }

ffected Elements에 titleBar 및 statusBar 를 추가하고 color Customizations 부분에 색을 사용자 정의할 수 있습니다.
기본 색상 중 하나를 사용하려면 CMD+Shift+P를 누르고 공작새를 입력하고 원하는 테마를 선택하십시오.이것은 설정의 색 설정을 덮어씁니다.이 작업 영역에 정의된 json 파일입니다.

더 예뻐

코드 포맷 및 읽기 가능

Polacode

기술 작가로서 이것은 매우 편리하다.그것은 당신의 코드 세션에 매력적인 화면 캡처를 제공합니다.

Step 1: Press CMD + SHIFT + P
Step 2: Select Polacode 📸
Step 3: Copy some code
Step 4: Paste into Polacode view
Step 5: Click the lens-like button below the code view to save

업무 강조 표시

우선적으로 처리해야 할 일이 많고, 때로는 아직 완수하지 못한 임무를 잊어버릴 수도 있다.TODO 하이라이트는 강조 표시를 통해 쉽게 볼 수 있습니다.
평론 부분에서 당신에게 적합한 내용을 마음대로 삭제하고 우리와 본문을 공유하십시오.