vscode extension 유용한 익스텐션 모음
🖥️

vscode extension 유용한 익스텐션 모음

Tags
dev
Property
Published
May 27, 2021
slug
vscode-extention1

로그 메시지 자동화

로그 메시지에 관해서는 turbo-console-log 확장이 도움이됩니다. 의미있는 로그 메시지 작성 작업을 자동화하고 자동으로 삽입합니다.
turbo-console-log를 사용 하여 의미있는 로그 메시지를 자동으로 삽입 합니다.
notion image
디버그 할 변수를 선택하고 CtrlAlt+를 누르면 L로그 메시지가 다음 줄에 삽입됩니다. 키보드 단축키를 사용하면 현재 문서에서 모든 로그 메시지에 주석을 달거나 주석을 제거하거나 삭제할 수 있습니다.

번들 크기를 제어하기

우리는 모두 성능이 중요하다는 것을 알고 있지만 실제로는 코드 작성 흐름에서 성능을 잃지 않는 것이 상당히 어려울 수 있습니다. 번들 크기를 제어하기 위해 Import Cost 확장 프로그램을 사용하면 무거운 패키지를 프로젝트로 가져 오는지 즉시 알 수 있습니다.
수입 비용으로 번들 크기를 통제하십시오 .
notion image
Import Cost는 번들 분석 도구가 아니지만 사용자에게 제공하기 전에 가능한 성능 병목 현상 을 찾는 데 도움이되는 아이디어로 구축되었습니다 이를 위해 가져온 타사 라이브러리를 가져올 때 코드 줄 바로 옆에 크기를 표시하여 즉각적인 피드백을 제공합니다. 편리한 작은 도우미.

코드 서식, 자동화

코드를 작성할 때 서식 지정에 많은 시간이 걸립니다. Prettier 는 작업을 자동화합니다. 모든 원본 스타일을 제거하고 출력 된 코드가 일관된 스타일을 따르도록합니다.
Prettier , 저장을 누를 때 코드를 형식화하는 상당히 독특 하지만 친숙한 코드 포맷터입니다.
notion image
Prettier는 코드를 파싱 하고 고유 한 규칙으로 형식을 다시 지정 하여 최대 줄 길이를 고려하고 필요한 경우 코드를 래핑합니다. 모든 언어에 적용할지 여부를 결정하거나 수동으로 형식을 지정할 언어를 정의 할 수 있습니다. 또한 일반적인 스타일 가이드를 찾는 데 어려움을 겪는 팀을위한 훌륭한 솔루션입니다.

유용한 코드 조각 (React, Vue, TypeScript, JQuery)

자주 필요한 스 니펫 을 항상 처음부터 다시 입력하는 데 지쳤 습니까? 다음은 작업을 용이하게하는 몇 가지 편리한 도우미입니다. Vue의 경우 Sarah Drasner의 Vue.js VS Code Snippets 확장 을 확인하십시오 실제 사용을 위해 구축되었으며 API 정의를 분류하는 대신 개발자 인체 공학에 중점을 둡니다.
Burke Holland는 일상적인 React 사용에서 선택한 필수 React 스 니펫 및 명령 모음을 제공합니다 Angular 스 니펫을 찾고 있다면 John Papa가 도와 드리겠습니다. 그의 확장 기능 은 VS Code 설정 에 TypeScript 및 HTML 용 Angular의 스 니펫을 추가합니다 .
Vue.js VSCode Snippets , by Sarah Drasner, Vue.js 코드 조각의 금광.
notion image
이 두 가지도 유용 할 수 있습니다. Charalampos Karypidis 의 JavaScript 코드 스 니펫 확장 에는 ES6 구문의 스 니펫이 포함되어 있으며 JavaScript와 TypeScript를 모두 지원합니다. 마지막으로 Don Jayamanne의 jQuery 코드 스 니펫 은 130 개 이상의 jQuery 스 니펫을 제공합니다. 설치가 완료되면 입력 만하면 jq모두 목록이 표시됩니다.
스 니펫에 대해 말하기 : 스 니펫 을 처음부터 직접 정의하는 것보다 좋은 스 니펫 라이브러리 를 선호한다면 다음 컬렉션이 도움이 될 것입니다.

나만의 코드 스 니펫 작성

다른 언어에 대한 코드 조각 플러그인이 많이 있지만 VS Code에서 자신의 조각 을 정의하는 방법에 대해 궁금한 적이 있습니까? Maurice Borgmeier는 시작하기 위해 알아야 할 모든 것을 요약 했습니다.
Maruice Borgmeier의 철저한 가이드 인 VS Code의 커스텀 스 니펫에 대해 알아야 할 모든 것 .
notion image
주제에 대한 또 다른 훌륭한 기사 는 Rob O'Leary가 제공합니다. 그는 스 니펫을 사용하는시기와 이유에 대해 자세히 설명하고, 다양한 유형의 스 니펫을 자세히 살펴보고, VS Code가이를 처리하는 방법, 그리고 마지막으로, 물론 자신 만의 코드를 작성하는 방법을 살펴 봅니다.

코드 스크린 샷, 멋진 방법

솔직히 말해서 멋진 코드 스크린 샷을 찍는 것은 어려울 수 있습니다. 이를 변경하기 위해 Polacode 가 있습니다.
Polacode를 사용하면 VS Code에서 직접 코드의 스크린 샷을 찍고 편집 할 수 있습니다.
notion image
"코드 용 폴라로이드"로 설명되는 Polacode를 사용하면 VS Code에서 직접 코드의 스크린 샷 을 찍고 편집 할 수 있습니다 . 모서리를 드래그하여 코드 컨테이너의 크기를 조정하고 명령을 사용하여 이미지 모양을 제어 할 수 있습니다. 예를 들어 블로그 게시물이나 프레젠테이션에서 많은 시간을 소비 한 코드를 최상의 조명으로 빛나게 만드는 훌륭한 솔루션입니다.

인간 친화적 인 댓글

댓글을 어떻게 처리합니까? 코드에 많은 설명이 필요한 경우 일반적으로 회색으로 표시된 주석을 더 인간 친화적 으로 만드는 것이 좋습니다 . 이렇게하면 주석이 더 이상 사용되지 않는 메서드를 경고하는 경우 한 눈에보기가 더 쉽습니다. 또는 팀원이 당신을 위해 남겨둔 할 일이라면.
Better Comments 는 주석을 경고, 쿼리 및 할 일로 분류하는 데 도움이됩니다.
notion image
VS Code 확장 Better Comments 는 주석을 경고, 쿼리, 할 일, 하이라이트 등으로 분류하여이를 수행하는 데 도움이됩니다. 주석 처리 된 코드는 거기에 있으면 안된다는 것을 명확히하기 위해 스타일을 지정할 수도 있습니다.

VS 코드 내부의 Chrome 디버깅

Chrome을 사용하고 디버깅 할 때 브라우저와 편집기 사이를 전환하고 있습니까? 그런 다음 VS Code Chrome 디버거 를 사용해 볼 수 있습니다. VS Code에서 직접 Chrome에서 실행되는 클라이언트 측 JavaScript 코드를 디버깅하는 데 도움이됩니다.
VS Code 용 Chrome 디버거를 사용하여 편집기를 종료하지 않고 Chrome을 디버그하세요 .
디버거는 Chrome 디버거 프로토콜을 통해 Chrome에 연결하여 브라우저에로드 된 파일을 VS Code에서 연 파일에 매핑합니다. 따라서 편집기를 떠나지 않고도 소스 코드에 중단 점을 설정하고 감시 할 변수를 설정하고 디버깅 할 때 전체 호출 스택을 볼 수 있습니다. 디버깅 루틴을보다 간단하게 만드는 작은 도구입니다.

VSCode 확장 용 DevTools

DevTools를 코드 편집기에 통합하여 둘 사이를 앞뒤로 전환 할 필요가 없도록하는 것이 멋지지 않습니까? VSCode 및 Edge를 사용하는 경우 작은 확장으로 가능합니다.
VS Code 내부 DevTools : Visual Studio Code 용 Microsoft Edge 개발자 도구.
notion image
확장 프로그램은 당신에게 런타임 HTML 구조 변경, 스타일과 레이아웃을 볼 수있는 기능을 제공 VSCode 내부 브라우저의 요소 및 네트워크 도구는 진단을 수행 하고 프로젝트를 디버깅 - 편집기를 떠나지 않고. 그건 그렇고, Rachel Weil은 몇 주 전 SmashingConf San Francisco에서 Edge 및 Chrome과 같은 Chromium 기반 브라우저 작업에 대한 몇 가지 유용한 DevTools 팁을 공유했습니다. DevTools 기술을 다음 단계로 끌어 올리기 위해 레코딩 을 조정하십시오 .

VS Code 용 파일 관리 유틸리티

일반적으로 파일을 구성하고 관리하는 데 많은 시간이 소요됩니다. 파일 유틸리티를 사용하면 작업이 더 편리해집니다.
파일 및 디렉토리를 생성, 복제, 이동, 이름 바꾸기 및 삭제할 수있는 확장 프로그램 인 파일 유틸리티 .
notion image
확장 기능을 사용하면 몇 가지 명령만으로 파일과 디렉토리 를 생성, 복제, 이동, 이름 바꾸기 및 삭제할 수 있습니다. 또한 문서 구조를 설정하기 위해 임의의 문자열 문자열을 자동으로 생성하는 중괄호 확장을 지원합니다.

편집기에서 파일에 태그 추가

대규모 프로젝트에서 구성 요소의 특정 변형 하나 또는 올바른 파일을 찾으려면 실제로 찾고있는 파일을 알아야합니다. 하지만 특정 파일 에 책갈피 나 레이블 을 추가 하여 더 빨리 찾을 수 있다면 어떨까요?
File Ops를 사용하면 VS Code의 파일에 태그를 추가 할 수 있습니다.
notion image
File Ops VS Code Extension을 사용하면 파일 에 태그 를 지정하고 별칭 을 지정한 다음 빠르게 전환 할 수 있습니다. 추적을 잃어버린 경우를 대비하여 모든 태그를 빠르게 나열하고 현재 디렉토리의 모든 파일을보고 동일한 폴더에있는 .css와 .js 파일간에 전환 할 수도 있습니다. 모든 작동 방식을 설명하는 비디오를 볼 수도 있습니다 이제 편리합니다!

VS 코드의 폴더 아이콘

VS Code의 사용자 지정 파일 및 폴더 아이콘 ? 예, 부탁합니다! 많은 파일과 폴더가 관련된 경우에도 작업 공간을보다 쉽게 조작 할 수 있도록 VS Code Icons Team 은 편집기에 아이콘을 제공 하는 확장을 출시했습니다 "액세스"에서 "zip", "Android", "www"에 이르기까지 컬렉션에는 필요한 파일 및 폴더 아이콘이 있어야합니다.
VS Code 파일 및 폴더의 아이콘을 조정하여 좀 더 구별 할 수 있습니다. 와 VSCode 아이콘 .
notion image
프로젝트 별 아이콘 토글 기능과 프로젝트 자동 감지는 작업 공간에서 연 프로젝트 유형을 자동으로 감지 하고 그에 따라 아이콘을 토글하도록 프롬프트합니다. 원하는 경우 사용자 지정 아이콘을 사용할 수도 있습니다.

코딩을위한 고정 폭 글꼴

프로그래밍 글꼴은 확실히 타이포그래피의 핵심 요소입니다. 그들은 뛰어난 가독성을 제공하고, 빠른 텍스트 스캔을 가능하게하며, 개발자가 코드를 몇 시간 동안 볼 때에도 눈의 피로를 방지해야합니다. 필요에 맞는 프로그래밍 글꼴 을 찾는 데 도움을주기 위해 Chris Coyier 는이 기준과 모두 일치하는 30 개 이상의 (대부분 무료) 고정 폭 글꼴을 선별 한 Coding Fonts를 큐레이팅 합니다.
즐거운 코딩 경험을위한 Monospace Coding Fonts .
notion image
결정을 쉽게하기 위해 각 글꼴에는 간단한 설명, 모든 문자에 대한 개요, HTML, CSS 및 JavaScript 코드 예제가 함께 제공됩니다. Mostafa Gaafar 는 다른 색 구성표로 코드 예제를 볼 수있는 옵션과 함께 개발자 를 위한 유사한 글꼴 목록을 유지합니다 VS Code에 사용자 지정 글꼴을 추가하려면 "설정"에서 글꼴 을 정의 해야합니다 .

Git Supercharged

VS Code에 내장 된 Git 기능을 강화하는 데 유용한 확장은 GitLens 입니다. 작업중인 코드를 더 잘 이해하기 위해 GitLens를 사용하면 라인 또는 코드 블록이 변경된 사람, 이유 및시기를 엿볼 수 있습니다.
GitLens를 사용 하여 VS Code에서 Git 리포지토리를 원활하게 탐색하고 탐색합니다 .
notion image
이 확장 프로그램은 코드 작성자 를 한 눈에 시각화 하고, Git 리포지토리를 원활하게 탐색 및 탐색하고, 비교 명령을 통해 귀중한 통찰력을 얻을 수 있도록 도와줍니다. 편집기를 떠나지 않고도 코드베이스에 대해 알아야 할 모든 것을 바로 손끝에서 확인할 수 있습니다.

VS 코드의 Git 기록

그래프 및 세부 사항과 함께 git 로그보기 및 검색, 작업중인 파일의 이전 사본보기 , 히스토리 검색 , 브랜치 및 커미트 비교-이는 Git 히스토리 확장이 간소화하기 위해 제공 하는 기능 중 일부에 불과합니다. 당신의 워크 플로우.
Git History 를 사용하여 편안하게 미래로 돌아갈 수 있습니다.
notion image
Git에 대해 말하기 : Git으로 작업 할 때 자세히 살펴볼 가치가있는 또 다른 VS Code 확장은 Git Graph입니다 . 저장소의 Git 그래프를보고 그래프에서 Git 작업을 쉽게 수행 할 수 있습니다.

코드에서 주석 강조

코딩하는 동안 추가 한 할 일을 검토하는 것을 잊는 경우가 있습니까? TODO 하이라이트 확장 프로덕션에 게시하기 전에주의가 필요한 메모 나 가지가 있음을 상기시켜줍니다.
TODO Highlight를 사용하면 프로덕션에 게시하기 전에해야 할 일을 상기시킬 수 있습니다.
notion image
키워드 TODO및 FIXME사전 구성 되어 있지만 원하는 경우 구성 을 사용자 정의 할 수 있습니다 . 명령은 코드에서 바로 또는 모든 주석 목록으로 열려있는 주석을 강조 표시합니다. 아주 작은 알림입니다.

일치하는 대괄호 및 태그 강조

강렬한 코딩 세션은 눈을 피로하게하므로 시각적 선명도를 높이는 데 도움이되는 모든 것이 환영받는 도우미입니다. VS Code로 작업 할 때 구문 강조 표시를 한 단계 더 높이려면 Bracket Pair Colorizer 를 확인하는 것이 좋습니다. 확장자는 사용자가 정의한 색상으로 일치하는 괄호를 식별합니다.
브래킷 쌍 컬러 라이저로 일치하는 태그를 쉽게 강조 표시합니다 실시간 시간 절약.
notion image
이제 괄호를 완전히 제어 할 수 있으므로주의해야 할 또 다른 세부 사항은 일치하는 열기 및 닫기 태그입니다. VS Code에는 이미 태그 일치 기능 이 있지만 기본적으로 제공됩니다. 강조 매칭 태그 확장은 작업을보다 철저하게 수행 어디서나 태그와 일치하는 태그에서하는 내부 문자열 속성 - - 심지어는 상태 표시 줄에 태그에 태그에서 경로를 강조. 광범위한 스타일 옵션을 사용하면 태그가 강조 표시되는 방식을 사용자 지정할 수 있습니다. HTML 및 JSX가 공식적으로 지원됩니다.

유해한 캐릭터를 드러내 기

너비가 0 인 공백 및 비결 합자, 끊김없는 공백, 왼쪽 및 오른쪽 큰 따옴표 — 코딩 할 때 일부 문자는 보이지 않거나 합법적 인 문자처럼 보이기 때문에 해로울 수 있습니다. Gremlins Tracker 가 찾아드립니다.
Gremlins Tracker 는 너비가 0 인 공백, 비 참가자 및 모든 이상한 캐릭터를 추적합니다.
notion image
Gremlins Tracker는 색 구성표를 사용하여 유해하고 잠재적으로 유해하며 덜 유해한 문자 를 경고합니다 이러한 문자가 포함 된 줄은 Gremlins 아이콘으로 표시되며 커서를 문자 위로 이동하면 잠재적 인 문제에 대한 힌트를 얻을 수 있습니다. 원하는 경우 새 그렘린 문자를 추가하거나 특정 언어에 대해 재정의 할 수 있습니다.

들여 쓰기 강조

들여 쓰기는 코드를 빠르게 스캔 할 수 있도록하는 핵심입니다. 들여 쓰기를 더욱 읽기 쉽게 만드는 편리한 작은 플러그인은 Indent-Rainbow 입니다. 그것은 들여 쓰기를 색깔을 입 힙니다 각 단계에 대한 네 가지 색상을 교류하고, 들여 쓰기 탭 크기의 배수가 아닌 그 라인을 표시하는 텍스트의 앞에.
Indent-Rainbow를 사용 하여 들여 쓰기를 좀 더 읽기 쉽게 만드십시오 .
notion image
오류 강조 표시가 유용하지만 방해가 될 수있는 경우가 있습니다. 예를 들어 RegEx 패턴을 다룰 때. 운 좋게도 Indent-Rainbow를 사용하면 주석 줄에서와 마찬가지로 오류 강조 표시를 끌 수 있으며 원하는 경우 전체 언어에 대해 건너 뛸 수도 있습니다.

스태킹 컨텍스트 시각화

사용할 때 스택 컨텍스트를 찾는 데 어려움이 z-index있습니까? 당신은 혼자가 아닙니다! 때때로 z-index요소에 대해 10 억 개로 설정하고 스택 순서에서 진행되지 않는 경우 CSS Stacking Contexts 가 적합합니다.
CSS Stacking Contexts를 사용하여 번거 로움없이 CSS 스택 컨텍스트를 시각화 합니다.
notion image
확장은 CSS 및 SCSS에서 스택 컨텍스트를 표시하므로 z-index선언을 작성할 때 작은 값을 자신있게 사용할 수 있습니다 또한 z-index선언이 효과가없는 경우를 알려주고 빠른 수정을 제공합니다.

작업 공간을 구분하는 사용자 정의 색상

여러 VS Code 인스턴스가 자주 열려 있고 구분하기 어려운 경우 Peacock 은 자세히 살펴볼 가치가 있습니다. 확장 프로그램 은 작업 영역 의 색상 테마를 미묘하게 변경합니다 .
Peacock을 사용 하여 VS Code에서 구별하기 위해 작업 공간의 색상을 미묘하게 변경하십시오 .
notion image
그러나 Peacock이 빛나는 곳은 한 번에 여러 프로젝트를 작업 할 때만이 아닙니다. 또한 VS Live Share 또는 VS Code의 원격 기능을 사용할 때 유용하며 편집기를 빠르게 식별하려고합니다.

IntelliSense : AI 지원 개발 기능

IntelliCode의 확장과 함께 코드 문맥 이해를 바탕으로 통찰력, 비주얼 스튜디오 코드에 파이썬, 타이프 라이터 / 자바 스크립트와 자바 개발자를위한 AI를 이용한 개발 기능을 제공합니다 기계 학습을 .
인공 지능의 반짝임으로 개발을 강화 해 보지 않겠습니까? IntelliCode 가 도움을드립니다.
notion image
AI 지원 IntelliSense를 제공하는이 확장은 완성 목록 맨 위에 코드 컨텍스트에 대한 권장 자동 완성 항목 을 표시합니다. 과부하에 관해서는 알파벳순의 회원 목록을 순환하지 않고 가장 관련성이 높은 회원을 먼저 표시합니다. 더 이상 목록을 통해 직접 사냥하지 마십시오.

코드베이스에 대한 안내 식 온 보딩 기록

큰 코드베이스는 위협적이라고 느낄 수 있습니다. CodeTour 는이를 변경하려고합니다. 이 확장을 사용하면 편집기 내에서 직접 코드베이스의 안내 식 연습 을 기록하고 재생할 수 있습니다 새로운 프로젝트 또는 기능 영역에 쉽게 온 보딩 또는 재 보딩하고 버그 보고서를 시각화하거나 코드 검토의 컨텍스트를 이해하는 데 도움이되는 목차로 생각하십시오.
온 보딩, 쉬운 방법 : 코드베이스의 가이드 투어를 기록하고 재생합니다. 그것이 Codetour 입니다.
notion image
코드 둘러보기를 만들기 위해 코드 줄에 주석을 달고 (마크 다운이 지원됨) 필요한만큼 파일을 탐색 할 수 있으며 레코더가 시퀀스를 캡처합니다. 투어는 리포지토리로 체크인하거나 "투어"파일로 내보낼 수 있으므로 코드를 복제하지 않고도 누구나 재생할 수 있습니다. 능숙한!

GitHub에서 VS Code로, 1 초 만에

GitHub에서 코드 스 니펫을 발견 한 후 즉시 프로젝트에서 작업을 시작하려면 어떻게해야합니까? 저장소를 복제하고 필요한 파일을 찾는 대신 Github1s 를 사용할 수 있습니다 URL 에 1s뒤에 추가 github하고 Enter 키를 누르면 저장소 또는 단일 파일 이 VS Code에서 바로 열립니다 .
GitHub에서 VS Code로 1 초 만에. 이것이 Github1s 입니다.
notion image
북마크릿을 사용하여 github.com 과 github1s.com 사이를 빠르게 전환 하고 , 개인 저장소에 액세스 할 수 있으며, 프로젝트 페이지 에도 나열되는 많은 브라우저 확장이 있습니다. 대안이 필요한 경우 Gitpod 는 약간 더 고급 옵션으로, 온라인 개발 환경을 시작하고 병렬 작업 공간을 실행하며 코드베이스에서 공동으로 작업 할 수도 있습니다.

VS 코드에 대한 애완 동물

VS 코드 편집기를 향상시키고 싶습니까? 글쎄, 고양이, 개, 뱀, 고무 오리 또는 좋은 클리 피를 추가하는 것은 어떻습니까? 당신이 할 필요가있다 vscode - 애완 동물을 설치 하고 실행 vscode-pets.start패널을보기 위해 명령을 사용합니다. 애완 동물, 모피 색상 및 크기를 선택했으면 몸을 기대고 그들이 당신과 상호 작용하는 것을 지켜보십시오!
VS 코드 편집기를 꾸미고 싶습니까? 아니면 VS 코드에서 캐치를 재생합니까? VS Code Pets로 그렇게 할 수 있습니다 .
notion image
에서 공을 던지고 캐치를 재생하는 애완 동물 (실행에 vscode-pets.throw-ball추가 애완 동물 (실행을 추가로) vscode-pets.spawn-pet), 당신은 워크 플로우를 코딩하는 것은 아무것도하지만 지루가 될 수밖에 없다! 제작자 Anthony Shaw 는 아이디어와 토론을 위해 열려 있으며 언제든지 피드백을 환영합니다.

JavaScript / TypeScript 프로토 타이핑 속도 향상

JavaScript 프로토 타이핑 프로세스의 속도를 높이는 방법을 찾고 있다면 Quokka 가 적합합니다. 빠른 프로토 타이핑 플레이 그라운드는 편집기에 있으며 JavaScript 및 TypeScript의 프로토 타이핑, 학습 및 테스트 속도를 향상시킵니다.
쿼카 , 자바 스크립트, 타이프 라이터의 신속한 프로토 타이핑을위한 도움이 작은 도구입니다.
notion image
런타임 값은 입력과 동시에 업데이트되고 IDE에서 코드 옆에 표시됩니다. 즉시 시작하고 실행하기 위해 구성이 필요하지 않습니다. 실험을 시작하기 위해해야 할 일은 새 Quokka 파일을 여는 것뿐입니다. 즐거운 프로토 타이핑!

원격 머신을 개발 환경으로 사용

개발 환경으로 SSH 서버가있는 원격 머신을 사용하려는 이유는 다양합니다. 예를 들어 로컬 머신보다 더 빠르거나 더 전문화 된 하드웨어가 필요하거나 고객 사이트 또는 클라우드의 애플리케이션과 같이 다른 곳에서 실행중인 애플리케이션 을 디버깅해야하기 때문 입니다. 개발 및 문제 해결을 단순화하기 위해 Remote-SSH 확장은이를 수행하는 데 도움이됩니다.
확장 프로그램은 원격 컴퓨터 에서 직접 명령 및 기타 확장을 실행 하므로 컴퓨터 에 소스 코드가 필요하지 않습니다. 대신 원격 컴퓨터의 모든 폴더를 열고 평소처럼 VS Code의 전체 기능 세트를 최대한 활용하여 작업 할 수 있습니다. 능숙한!

실시간으로 Sass 컴파일

라이브 브라우저 재로드 기능이있는 실시간 Sass 컴파일러? Live Sass 확장 기능 을 사용하면됩니다. SASS / SCSS 파일을 실시간으로 CSS 파일로 컴파일 / 트랜스 파일하는 데 도움이됩니다.
기능에는 내 보낸 CSS 의 파일 위치 와 스타일 및 확장자 이름을 사용자 정의하는 것이 포함 되며 빠른 상태 표시 줄 컨트롤이 있으며 설정에서 특정 폴더를 제외 할 수 있으며 자동 접두사도 지원됩니다.

아무도 당신에게 말하지 않은 팁과 트릭

VS Code가 제공하는 강력한 기능을 정말로 최대한 활용하고 있습니까? Burke Holland와 Sarah Drasner는 그렇지 않다고 주장하므로이를 변경하기 위해 아무도 말하지 않았던 VS Code의 모든 장점 을 공유합니다 .
VS 그렇게 할 수 있습니까? VS Code가 제공하는 강력한 기능을 최대한 활용하는 데 도움이되는 팁과 요령입니다.
notion image
img이미지의 정확한 크기로 HTML 태그를 자동으로 업데이트하는 것부터 코딩 할 때 더 나은 가독성을 위해 글꼴 합자를 사용하거나 응용 프로그램에서 정보를 로그 아웃하기 위해 포인트를 기록하는 것까지, "VS Code Can Do That ?!" 기능 36 유용한 팁 워크 플로우 효율성을 한층 높일 수 있습니다.

마무리

거기 그대로 거기 VS 코드 확장의 수백, 우리는 여기에 나열된 것들 중 일부는 일상 업무에 유용하다는 것을 증명 희망 - 그리고 가장 중요한 것은 당신이 약간의 시간이 소요, 일상적인 작업을 방지하는 데 도움이. 모두 즐거운 코딩입니다!