알아둘 가치가 있는 프런트엔드 VSCode 자동화 플러그인을 요약하고 공유합니다.

이 글은 프런트엔드 개발자의 개발 효율성을 향상시킬 수 있는 일부 VSCode 자동화 플러그인을 요약하고 공유합니다. 이 글이 모든 사람에게 도움이 되기를 바랍니다.

프로그래밍은 복잡합니다. 높은 생산성과 코드 품질을 유지하면서 기억해야 할 모범 사례, 따라야 할 지침, 피해야 할 "알려진 문제"가 많이 있습니다.

자동화된 작업이 없으면 현대 개발 프로세스는 여전히 상대적으로 어렵습니다. 이 기사에서는 프런트엔드 개발자의 개발 효율성을 향상시킬 수 있는 몇 가지 VSCode 자동화 기술을 소개하겠습니다. [추천 학습: "vscode 입문 튜토리얼"]

Live Server

일반적으로 VSCode에서 코드를 수정할 때 효과를 보려면 브라우저를 수동으로 새로 고쳐야 합니다. 즉, 코드를 100번 업데이트하면 브라우저를 100번 새로 고쳐야 하는데 이는 피곤하고 시간이 많이 걸리는 작업입니다.

Live Server는 위에서 언급한 작업을 자동으로 완료할 수 있는 멋진 플러그인이므로 저장 후 매번 브라우저를 수동으로 열고 새로 고칠 필요가 없습니다. . 서버 기능에서 제공되는 이 기능을 사용하면 코드를 저장한 후 즉시 렌더링할 수 있습니다. 또한 VSCode의 자동 저장 기능을 활성화하면 Live Reload가 더욱 멋지고 편리해집니다.

Turbo Console Log

Turbo Console Log는 Turbo Console Log의 도움으로 로그 정보를 자동으로 작성하는 데 도움이 되는 도구입니다.

• 의미 있는 로그 정보를 자동으로 삽입합니다.
• 현재 문서의 플러그인에 포함된 모든 로그 메시지에 주석을 달고 주석 해제를 해제하세요.
• 현재 문서에서 플러그인에 포함된 모든 로그 메시지를 제거하세요.

Live SASS Compiler

SASS 또는 SCSS 파일을 Live SASS Compiler를 통해 쉽고 자동으로 CSS로 컴파일할 수 있습니다. 즉석에서, 코드 편집기 자체 내에서, 라이브 미리 보기를 제공할 때 브라우저에서 자동으로 자동으로 컴파일할 수 있습니다. 애플리케이션이나 컴파일된 스타일의 예입니다.

Live SASS Compiler는

• Live SASS 및 SCSS 컴파일을 포함한 다양한 멋진 기능을 갖춘 편리한 VSCode 확장입니다.
• 빠른 상태 표시줄 제어
• 사용자 정의 가능한 확장자(.css 또는 .min.css)
• 내보낸 CSS 스타일 사용자 정의(확장, 압축, 압축, 중첩)
• 내보낸 CSS 파일 사용자 정의 위치

태그 자동 이름 바꾸기

In 수백 또는 수천 줄의 코드가 포함된 애플리케이션에서 하나의 HTML 태그를 변경하고 다른 태그 쌍을 잊어버리거나 실수로 변경한 적이 있습니까? 이런 종류의 작업은 혼란스럽고 비효율적일 수 있습니다.

이제 두 가지 옵션이 있습니다. 하나는 쌍을 이루는 태그를 수동으로 유지하거나 자동 이름 바꾸기 태그 플러그인을 직접 설치하고 자동으로 이러한 작업을 완료하도록 하는 것입니다.

자동 이름 바꾸기 태그는 이름에서 알 수 있듯이 승인 태그 중 하나가 업데이트되면 자동으로 다른 태그를 업데이트하는 플러그인입니다.

ESLint

코드 감지는 특정 스타일 지침을 따르지 않는 프로그램이나 코드의 구문 오류를 확인하는 데 사용됩니다.

그리고 ESLint와 같은 코드 감지 도구를 사용하면 개발자가 코드 문제를 실행하지 않고도 JavaScript 코드를 찾을 수 있습니다. ESLint는 거의 1,300만 건의 다운로드를 기록한 VS Code용 확장 프로그램 중 가장 많이 다운로드되었으며 위치 지정, 들여쓰기 등과 같은 표준 코딩 지침을 준수하도록 보장합니다. 이 확장을 사용하려면 컴퓨터에 ESLint를 로컬 또는 전역으로 설치해야 하며, npm install eslint를 실행하기만 하면 됩니다.

다음은 ESLint의 데모입니다.

코드 크기가 작을 때 위의 오류는 여전히 명백합니다. 그러나 코드가 100줄을 초과하는 경우. ESLint를 실행하면 코드의 문제를 신속하게 식별하여 코드의 무결성과 품질을 향상시킬 수 있습니다.

Prettier

프런트 엔드 개발자들 사이에서 인기 있는 VSCode 확장 프로그램인 Prettier는 1,100만 건의 다운로드를 기록하고 있으며 계속 성장하고 있습니다. 이 도구를 사용하면 코드 형식을 빠르게 지정하는 데 도움이 되며 버튼만 누르면 코드 형식 지정이 완료됩니다.

• 스타일 가이드가 변경되면 Prettier가 전체 코드 베이스에 자동으로 적용될 수 있습니다.
• 형식을 수정하기 위해 노력할 필요가 없습니다.
• 풀 요청에서 스타일을 논의하는 데 시간을 낭비할 필요가 없습니다.
• 스타일 가이드에서 규칙을 찾아볼 필요가 없습니다.

Prettier는 JavaScript를 지원할 뿐만 아니라 TypeScript, CSS, JSON, JSX, GraphQL 등을 포함하여 기본적으로 다양한 구문을 지원합니다.

다른 유사한 확장 프로그램이 있는데 그 중 가장 인기 있는 것은 Beautify입니다! 몇 가지 설정과 구성만 있으면 더 이상 보기 흉한 코드 작성에 대해 걱정할 필요가 없습니다. Beautify는 코드를 아름답고 일관된 코드로 바꿔줍니다.

사전 커밋 후크

지금까지 생산성을 높이는 데 사용할 수 있는 VSCode의 다양한 확장에 대해 논의했습니다. 이 기사의 마지막 부분에서 사전 커밋 후크에 대해 설명하겠습니다. 그렇다면 사전 커밋 후크란 실제로 무엇입니까? 이미 들어보신 분들도 계시고, 들어보지 못한 분들도 계실 겁니다.

코드를 커밋하거나 푸시할 때마다 명령을 실행하고 싶었던 적이 있나요? 그렇다면 git Hooks가 당신이 찾고 있는 것입니다.

Git 후크는 git 명령 전후에 실행하여 수동 작업을 자동화할 수 있는 사용자 정의 스크립트입니다. 여러 가지 git 후크를 사용할 수 있으며 사전 커밋 후크는 제가 가장 좋아하는 후크 중 하나입니다.

훌륭한 기능 중 하나를 소개합니다.

• 제출 정보를 입력하기 전에 자동으로 실행되기 시작합니다.
• 0이 아닌 데이터로 종료하면 제출이 중단됩니다.
• pre-commit 후크는 곧 커밋될 스냅샷을 확인하는 데 사용됩니다.

사전 커밋 후크를 사용하면 코드 스타일, 추가 후행 공백, 원치 않는 가져오기를 확인하거나 새로운 메서드에 대한 적절한 문서를 확인할 수 있습니다.

요약

뛰어난 도구는 개발자가 더욱 빠르고, 깔끔하고, 일관된 코드를 작성하는 데 도움이 될 수 있습니다. 마이크로소프트가 출시한 비주얼 스튜디오 코드(VS Code)는 출시 이후 점차 많은 이들의 호응을 얻었다.

이 기사에서는 VSCode에서 생산성을 높이고 개발 프로세스를 자동화하는 데 사용할 수 있는 다양한 확장 기능과 방법 중 일부를 나열했습니다. 공유할 가치가 있는 다른 확장 프로그램을 찾으면 아래 댓글에서 언급해 주세요.

원본 참조: https://blog.bitsrc.io/vscode-automations-for-frontend-developers-6c66a6f36bc6

VSCode에 대한 더 많은 관련 지식을 보려면 vscode 튜토리얼을 방문하세요! !

위 내용은 알아둘 가치가 있는 프런트엔드 VSCode 자동화 플러그인을 요약하고 공유합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!