개발 효율성을 엄청나게 향상시키는 프런트 엔드 Vscode 플러그인을 공유해 보세요!
VScode는 분명 프론트엔드 학생들에게 매우 친숙한 플러그인입니다. 최근에는 제가 직접 탐색하고 동료들의 추천을 받아 실제 개발과 결합하여 실제 개발 효율성에 매우 도움이 되는 여러 가지 VScode 플러그인을 선택했습니다.
【추천 학습: "vscode 입문 튜토리얼"】
Code Spell Checker
Code Spell Checker는 단어의 철자를 검사하는 플러그인입니다.
"연구에 따르면 한자의 순서가 읽기에 반드시 영향을 미치는 것은 아닙니다." 개발 과정에서 변수 이름의 철자 오류가 종종 발생합니다. 단어의 철자 순서가 틀려서 읽기에 영향을 주지 않는데, 영어는 물론이고 중국어에서도 보이지 않는 경우가 많죠?
이때 코드 맞춤법 검사기가 유용합니다. 플러그인을 설치한 후 맞춤법 오류가 있으면 물결 모양의 선 프롬프트
예를 들어 위 그림에서 단어 삭제는 모두 대문자로 되어 있는데, 개발 과정에서 누락된 문자를 찾기가 어렵습니다. 시간을 절약하거나 코드 프롬프트를 사용하기 위해 이 잘못된 단어를 다른 곳에서 많이 사용하면 전체 코드가 상대적으로 표준화되지 않게 됩니다. 그리고 예상치 못한 버그가 발생할 수 있습니다.
플러그인을 사용한 후 철자가 틀린 단어에 대한 메시지가 표시될 뿐만 아니라 잘못된 단어 위에 마우스를 올려놓고 빠른 수정을 선택하면 가능한 올바른 단어에 대한 메시지도 표시됩니다. 매우 친절합니다.
이 플러그인을 처음 설치했을 때 현재 프로젝트에서 두 단어의 철자가 틀리거나 여러 곳에서 인용된 것을 발견하여 적시에 수정했습니다. 이것도 이 플러그인이 실제 개발에 큰 도움이 된다는 증거죠~
javascript console utils
14만 다운로드의 플러그인에 아이콘이 없다는게 믿기지 않네요. 자바스크립트 콘솔 유틸리티의 유일한 용도는
Cmd+Shift+L
Cmd+Shift+D
변수 abc를 선택할 때, 첫 번째 단축키 세트는 현재 코드 아래에 줄을 삽입합니다:
console.log( "abc" , abc )
두 번째 단축키는 삽입된 코드 줄을 삭제하는 데 사용됩니다. 공식 예는 다음과 같습니다.
JS 프로그래머를 작성한 사람 간단한 단축키 세트가 실제 개발 효율성을 얼마나 향상시킬 수 있는지 다들 알고 계실 겁니다. 이 간단하고 간단한 플러그인을 놓쳐서는 안 되겠죠?
GitHub Copilot
이전 두 플러그인인 GitHub Copilot과 비교해 보세요. 공식적인 설명은 언제든지 함께 개발하는 AI 프로그래머입니다. 개발 중에 현재 입력 내용을 기반으로 하는 AI 코드 프롬프트 플러그인입니다. .AI와 결합하여 코드 팁을 제공합니다.
최근 개발 과정에서 이 플러그인은 저에게 한 번 이상 충격을 줬고 심지어 조금 무섭기도 했습니다. 메소드든, 변수든, 코멘트든 힌트를 주기도 하고 때로는 겁을 주기도 합니다
위 그림은 제가 버튼 컴포넌트를 디자인하면서 너무 많은 속성을 쓰고 싶을 때 무의식적으로 너무 많은 속성을 쓰는 모습을 보여줍니다. 코드를 더 명확하게 만들기 위해 레이블에서 일부 개체를 구조화하고 방금 const를 입력했는데 GitHub Copilot이 내가 원하는 작업을 안내하는 데 도움을 주었습니다. 이것이 어떻게 const를 기반으로 했는지 상상할 수 없을 것입니다. 가서 코드를 분석해 보세요. 뒤에.
실제 사용에서는 변수, 상수, 메서드, 후크 등 필요한 코드를 추론할 수 있습니다. 처음에는 그런 AI가 프로그래머들에게 치명적일 것이라고 생각했습니다. 앞으로는 프로그래머가 필요하지 않을까요?
실제 사용에서는 정말 당신을 이해합니다. 이유 없이 수많은 코드를 묻는 것이 아니라, 현재 기존 비즈니스 로직을 기반으로 지금 필요한 것을 결정하고 사려 깊은 도움을 제공합니다. 프롬프트하십시오.
예를 들어 위 그림에서는 이 유형 앞에 상수를 정의했습니다. 여기서는 어떤 유형을 사용해야 하는지 이미 짐작했습니다. 코드가 크면 언젠가는 코드의 60%가 GitHub Copilot에 의해 표시될 것입니다.
이 플러그인을 사용하기 전에는 신청이 필요했습니다. 현재 상황이 어떤지 모르겠습니다. 다운로드하여 사용해 보시기 바랍니다~
가져오기 비용
가져오기 비용 이 플러그인은 사용이 매우 간단합니다. 설치 후 js 또는 ts에 도입된 종속성의 크기가 표시됩니다.
실제 효과는 다음과 같습니다. 때로는 대체 타사 종속성이 사용되는 경우 어느 것이 더 가벼운지 판단하는 것이 더 편리합니다.
VS 코드 카운터
VS 코드 카운터는 때로는 대규모 프로젝트(똥산)를 맡을 때 친구들에게 알리고 싶을 때가 있습니다. 거대한 프로젝트를 유지하고 있다고 불평하세요. 이 플러그인을 사용하면 코드를 계산하고 다른 사람에게 보여줄 수 있습니다(비교)
사용하려면 플러그인을 설치한 후 상단을 클릭하세요. VscodeView-> 명령 패널 메뉴에서 count를 입력하고 아래 그림의 옵션을 선택하면 현재 작업 공간 디렉터리에 있는 모든 코드가 계산됩니다.
통계 보고서에는 언어별로 분류된 전체 코드 볼륨이 표시됩니다. 보고서에는 각 디렉토리의 특정 코드 볼륨도 포함됩니다.
요약
이번에 추천하는 플러그인은 특정 언어나 프레임워크와 크게 관련되지 않고 적용 범위가 넓어 친구들이 설치해서 사용해 볼 수도 있습니다. 댓글 영역에서 좋아하는 플러그인을 공유해 주셔서 감사합니다~
VSCode에 대한 자세한 내용을 보려면 vscode 튜토리얼을 방문하세요!
위 내용은 개발 효율성을 엄청나게 향상시키는 프런트 엔드 Vscode 플러그인을 공유해 보세요!의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

핫 AI 도구

Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

인기 기사

뜨거운 도구

메모장++7.3.1
사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경

드림위버 CS6
시각적 웹 개발 도구

SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제











Visual Studio 코드를 사용하여 헤더 파일을 정의하는 방법은 무엇입니까? .h 또는 .hpp 접미사 이름 (예 : 클래스, 함수, 변수)을 사용하여 헤더 파일을 만들고 기호를 선언합니다. 소스 파일에 헤더 파일을 포함시키기 위해 #include 지시문을 사용하여 프로그램을 컴파일합니다. 헤더 파일이 포함되어 있고 선언 된 기호를 사용할 수 있습니다.

대 코드 시스템 요구 사항 : 운영 체제 : Windows 10 이상, MacOS 10.12 이상, Linux 배포 프로세서 : 최소 1.6GHz, 권장 2.0GHz 이상의 메모리 : 최소 512MB, 권장 4GB 이상의 저장 공간 : 최소 250MB, 권장 1GB 및 기타 요구 사항 : 안정 네트워크 연결, Xorg/Wayland (LINUX)

Visual Studio Code에서 중국어 의견이 물음표가되는 문제를 해결하는 방법 : 파일 인코딩을 확인하고 "BOM이없는 UTF-8"인지 확인하십시오. 글꼴을 "노래 스타일"또는 "Microsoft Yahei"와 같은 한자를 지원하는 글꼴로 변경하십시오. 글꼴을 다시 설치하십시오. 유니 코드 지원을 활성화합니다. vscode를 업그레이드하고 컴퓨터를 다시 시작하고 소스 파일을 재현하십시오.

Visual Studio Code (VSCODE)는 Microsoft가 개발 한 크로스 플랫폼, 오픈 소스 및 무료 코드 편집기입니다. 광범위한 프로그래밍 언어에 대한 가볍고 확장 성 및 지원으로 유명합니다. VSCODE를 설치하려면 공식 웹 사이트를 방문하여 설치 프로그램을 다운로드하고 실행하십시오. VScode를 사용하는 경우 새 프로젝트를 만들고 코드 편집, 디버그 코드, 프로젝트 탐색, VSCODE 확장 및 설정을 관리 할 수 있습니다. VSCODE는 Windows, MacOS 및 Linux에서 사용할 수 있으며 여러 프로그래밍 언어를 지원하며 Marketplace를 통해 다양한 확장을 제공합니다. 이점은 경량, 확장 성, 광범위한 언어 지원, 풍부한 기능 및 버전이 포함됩니다.

VS 코드 터미널에 대한 공통 명령은 다음과 같습니다. 터미널 화면 (Clear) 지우기 (CLEAR), 현재 디렉토리 파일 (LS)을 나열하고 현재 작업 디렉토리 (CD) 변경, 현재 작업 디렉토리 경로 (MKDIR) 작성, 빈 디렉토리 (RMDIR) 삭제, 새 파일 (터치), 파일 삭제 또는 디렉토리 또는 디렉토리 (CP) (MV) 파일 콘텐츠 표시 (CAT) 파일 콘텐츠보기 및 스크롤 (적음) 파일 컨텐츠보기 아래로 스크롤 (more) 파일의 처음 몇 줄 (헤드)을 표시합니다.

VSCODE 내장 터미널은 편집기 내에서 명령 및 스크립트를 실행하여 개발 프로세스를 단순화 할 수있는 개발 도구입니다. VSCODE 터미널 사용 방법 : 바로 가기 키 (CTRL/CMD)로 터미널을 엽니 다. 명령을 입력하거나 스크립트를 실행하십시오. 핫키 (예 : ctrl l)를 사용하여 터미널을 지우십시오). 작업 디렉토리 (예 : CD 명령)를 변경하십시오. 고급 기능에는 디버그 모드, 자동 코드 스 니펫 완료 및 대화식 명령 기록이 포함됩니다.

Visual Studio Code에서 중국어를 설정하는 두 가지 방법이 있습니다. 1. 중국어 패키지 설치; 2. 구성 파일에서 "로케일"설정을 수정하십시오. Visual Studio Code 버전이 1.17 이상인지 확인하십시오.
