오늘 첫 번째 VS Code 확장을 게시했습니다. 이 확장 프로그램을 사용하면 CSS 코드에 고정된 크기를 쉽게 생성할 수 있습니다.

더 생산적으로 일하고 싶어서 만들었습니다. 현재 프로세스에는 온라인 클램프 생성기 웹사이트로 이동하여 원하는 크기를 입력한 다음 코드에 복사하여 붙여넣는 작업이 포함되었습니다.

ChatGPT의 도움을 받아 만들었습니다. 코드의 90%는 ChatGPT에서 생성됩니다. 몇 가지를 수정해야 했고 아이디어가 떠올랐으니 어느 정도 공로를 인정받을 만하다고 생각합니다.

사용을 시작하려면 먼저 전역 settings.json 파일(명령 팔레트: 기본 설정: 사용자 설정 열기(JSON)) 또는 프로젝트 settings.json 파일(명령 팔레트: 기본 설정: 열기)에서 다음 옵션을 설정하여 구성합니다. 작업공간 설정(JSON)):

{
  "clampExtension.globalMinViewport": 600,
  "clampExtension.globalMaxViewport": 1440,
  "clampExtension.baseFontSize": 16
}

다음으로 최소 및 최대 크기(픽셀 단위)를 입력하고 입력한 크기를 강조 표시한 다음 고정을 선택하세요! 명령 팔레트의 명령:

원한다면 다음과 같이 전체 정의를 사용할 수 있습니다.

16, 20, 16, 600, 1200

어디

• 첫 번째 매개변수는 최소 크기입니다.
• 두 번째 매개변수는 최대 크기입니다.
• 세 ​​번째 매개변수는 기본 글꼴 크기입니다.
• 네 번째 매개변수는 최소 뷰포트 크기이며
• 다섯 번째 매개변수는 최대 뷰포트 크기입니다.

출력은 항상 REM 단위입니다.

clamp(1rem, calc(0.821rem   0.476vw), 1.25rem)

그렇습니다! 이 작은 확장 기능을 통해 저처럼 여러분도 생산성을 높일 수 있기를 바랍니다.