minapp vscode 다운로드 - minapp vscode 소스 코드 다운로드

minapp vscode

AI 소스 코드

v2.4.14

다운로드

WXML - 언어 서비스

주요 기능

한 번의 클릭으로 미니 프로그램 구성 요소 만들기
태그 이름 및 속성 자동 완성
구성 요소의 기존 속성에 따라 해당 지원 속성 집합이 자동으로 필터링됩니다.
속성 값 자동 완성
템플릿 파일의 함수나 속성을 클릭하면 js/ts가 정의된 위치로 이동합니다(순수 wxml 또는 pug 파일에서만 지원되며 vue 파일에서는 완전히 지원되지 않음).
스타일 이름 자동 완성(순수 wxml 또는 pug 파일에서만 지원되며 vue 파일에서는 완전히 지원되지 않음)
또한 vue 템플릿 파일에서 자동 완성이 가능하며 퍼그 언어를 지원합니다.
지원 링크(순수 wxml 또는 pug 파일에서만 지원되며 vue 파일에서는 지원되지 않음)
사용자 정의 구성 요소 자동 완성(순수 wxml 파일에서만 지원되고 vue 또는 pug 파일에서는 지원되지 않음)
템플릿 파일에서 js 변수 강조 표시(순수 wxml 또는 pug 파일에서만 지원되고 vue 파일에서는 지원되지 않음)
내장된 스니펫
emmet 작성 방법 지원
wxml 형식화

자동으로 완성된 모든 템플릿 데이터는 공식 문서에서 가져온 것이며 스크립트를 통해 자동으로 가져옵니다.

한 번의 클릭으로 미니 프로그램 구성 요소 만들기

New Miniprogram Component 옵션을 보려면 마우스 오른쪽 버튼을 클릭하세요. 컴포넌트 이름을 입력하면 한 번의 클릭으로 .wxml / .js / .wxss / .json 및 컴포넌트 폴더가 생성됩니다.
성공적으로 생성된 후 js 파일을 자동으로 엽니다.

구성 요소 생성은 css/wxml/js 접미사 구성을 지원합니다. 예를 들어 프로젝트는 less/vue/ts를 사용합니다.

 {
  "minapp-vscode.cssExtname" : "less" , // 默认 wxss，支持 styl sass scss less css
  "minapp-vscode.wxmlExtname" : "vue" , // 默认 wxml，支持 vue wpy
  "minapp-vscode.jsExtname" : "ts" // 默认 js，支持 ts coffee
}

태그 이름과 속성 이름은 자동으로 완성됩니다.

wxml에서는 태그 완성을 트리거하려면 < 입력해야 하지만, 퍼그 언어에서는 태그 시작 부분만 작성하면 태그 완성이 트리거됩니다.
공백을 입력하면 해당 태그의 속성 완성이 트리거됩니다.

구성 요소의 기존 속성에 따라 지원되는 해당 속성 집합이 자동으로 필터링됩니다.

선택기의 mode="selector"인 경우 range 및 range-key 속성이 있습니다.
선택기의 mode="time"인 경우 start 및 end 속성이 있습니다.

속성값 자동완성(옵션값이 있는 경우에만 완료됨)

속성값에 공백을 입력하면 발동할 수 있으며, 완료 후 해당 공백을 자동으로 덮어씁니다.

템플릿 파일의 함수나 속성을 클릭하면 js/ts가 정의된 위치로 이동합니다(순수 wxml 또는 pug 파일에서만 지원되며 vue 파일에서는 완전히 지원되지 않음).

이 기능은 아직 완벽하지 않습니다. 현재 템플릿과 동일한 이름을 가진 스크립트 파일만 검색하므로 JS의 정의를 찾지 못할 수도 있습니다.

스타일 이름 자동 완성(순수 wxml 또는 pug 파일에서만 지원되며 vue 파일에서는 완전히 지원되지 않음)

시스템은 현재 템플릿과 동일한 이름을 가진 스타일 파일의 모든 스타일 이름을 자동으로 가져오고 스타일 이름에 대한 /** */ 의 문서도 가져올 수 있습니다. 전역 스타일이 있는 경우 구성을 사용해야 합니다. minapp-vscode.globalStyleFiles 항목이 지정되었습니다.

기본적으로 현재 템플릿과 동일한 이름을 가진 스타일 파일의 이름을 가져옵니다.
참고: 스타일 파일이 다른 스타일 파일을 @import 경우 프로그램은 가져온 파일에서 스타일 이름을 가져오지 않습니다.
또한 minapp-vscode.globalStyleFiles 사용하여 일부 전역 스타일 파일을 지정할 수 있으므로 이러한 파일의 스타일 이름은 class="" 입력한 후에도 표시됩니다.
미니 프로그램의 app.wxss는 일반적으로 전역 스타일이므로 minapp-vscode.globalStyleFiles: ["src/app.wxss"] 구성과 같이 이 구성을 통해 수동으로 지정해야 합니다.
또한 minapp-vscode.styleExtensions 사용하여 시스템에서 사용하는 스타일 파일의 접미사를 지정할 수도 있습니다.
이 항목을 구성하는 것이 좋습니다. 시스템은 기본적으로 다양한 접미사를 가진 스타일 파일을 검색합니다. 불필요한 성능 손실을 방지하려면 프로젝트에 사용되는 접미사로 구성하는 것이 가장 좋습니다.

참고: sass 와 같은 들여쓰기된 조판 스타일 파일은 지원되지 않습니다.

또한 vue 템플릿 파일에서 자동 완성이 가능하며 퍼그 언어를 지원합니다.

vue의 템플릿 보드는 두 가지 속성을 지원합니다.

lang "wxml" 또는 "pug" 로 설정하여 사용된 언어를 나타낼 수 있습니다( vue와 유사한 프레임워크에서 lang 속성을 지정하면 컴파일 오류가 발생할 수 있습니다. 대신 xlang 사용할 수 있지만 이렇게 하면 vue 및 minapp가 완료됩니다. 동시에 )
minapp 사용된 프레임워크를 나타내는 "native" , "wepy" , "mpx" 또는 "mpvue" 로 설정할 수 있으며 기본값은 "mpvue" 입니다.

좋다:

<template lang="wxml" minapp="native"> 프레임워크를 사용하지 않고 wxml 언어를 사용한다는 의미입니다.
<template lang="pug" minapp="mpvue"> pug 언어를 사용하고 mpvue 프레임워크를 사용하는 것을 의미합니다.

mpvue에서 lang="wxml"을 지정하면 오류가 보고되며 작성자가 이를 수정할 때까지 기다려야 합니다. 그러나 일시적으로 xlang="wxml" 사용할 수 있지만 이로 인해 vue의 자동 완성도 트리거됩니다.

다른 minapp 값을 지정하면 해당 프레임워크의 자동 완성이 발생합니다. wepy 및 mpvue를 사용하여 개발하지 않았기 때문에 이러한 자동 완성은 공식 문서에 따라 추가됩니다. 오류가 있으면 PR 환영합니다(수정하면 됩니다. 파일 src/plugin/lib/언어.ts)

지원 링크(순수 wxml 또는 pug 파일에서만 지원되며 vue 파일에서는 지원되지 않음)

기본적으로 src 태그만 링크되며 파일이 존재하지 않으면 링크가 추가되지 않습니다.
minapp-vscode.linkAttributeNames 구성하여 링크를 지원하는 추가 태그를 확장할 수 있습니다. 이 값을 빈 배열로 구성하여 링크 기능을 비활성화할 수 있습니다.
minapp-vscode.resolveRoots 상대 디렉터리를 사용하여 이미지 경로를 확인하도록 구성할 수 있습니다.

사용자 정의 구성 요소 자동 완성(순수 wxml 파일에서만 지원되고 vue 또는 pug 파일에서는 지원되지 않음)

해당 json 파일의 컴포넌트 정보를 자동으로 가져옵니다.
맞춤 구성요소 우선순위 지정
구성 요소의 속성에 대한 설명을 자동으로 가져옵니다.

템플릿 파일에서 js 변수 강조 표시(순수 wxml 또는 pug 파일에서만 지원되고 vue 파일에서는 지원되지 않음)

강조 표시는 기본적으로 꺼져 있습니다. minapp-vscode.disableDecorate true 로 구성하면 강조 표시가 켜집니다.
기본 강조 색상은 보라색입니다. {"color": "red"} 와 같이 원하는 색상을 사용하도록 minapp-vscode.decorateType 구성할 수 있습니다.
기본적으로 "{{"와 "}}" 사이의 모든 문자가 강조 표시됩니다. minapp-vscode.decorateComplexInterpolation false 로 구성하면 변수(예: foo , foo.prop , foo[1] )만 강조 표시됩니다. 강조 표시되고 표현식(예: foo + bar , foo < 3 )은 강조 표시되지 않고 원래 색상이 사용됩니다.

구문 분석 속도를 높이기 위해 색상 강조는 정규식 일치를 사용하므로 일치 오류가 발생할 수 있습니다. 만족스럽지 않으면 minapp-vscode.disableDecorate 구성하여 색상 강조 기능을 비활성화할 수 있습니다.

알려진 문제:

퍼그 언어의 주석에 있는 변수도 강조 표시됩니다. (퍼그는 들여쓰기 기반이며 정규 표현식은 다루기가 쉽지 않습니다.)

내장된 스니펫

스와이프/아이콘/버튼/선택기 시간/선택기 날짜/선택기 지역/체크박스 그룹/라디오 그룹이 함께 제공됩니다. 파일을 참조하세요.
minapp-vscode.snippets 구성 항목을 통해 자신만의 스니펫을 정의할 수 있습니다.

공식 스니펫과의 차이점은 여기 스니펫은 키와 본문만 지정하면 되며 구성 요소 설명은 키를 기반으로 자동으로 가져옵니다(추가로 구성은 나중에 내장 데이터와 결합될 수 있음).

emmet 작성 방법 지원

에밋 치트 시트

wxml 형식

prettyHtml , js-beautify 및 prettier 지원(일부 콘텐츠는 HTML 호환 방식으로 작성되어야 함)

기본 wxml

 "minapp-vscode.wxmlFormatter" : "wxml" , // 指定格式化工具

js-미화

 "minapp-vscode.wxmlFormatter" : "jsBeautifyHtml" , // 指定格式化工具
// 使用 vscode settings.json 中的 `html.format.[配置字段]` 配置字段, 详见下方 tips.4
"minapp-vscode.jsBeautifyHtml" : "useCodeBuiltInHTML" ,
// 使用自定义配置
"minapp-vscode.jsBeautifyHtml" : { // jsBeautify 默认配置
    "content_unformatted" : "text" ,
    "wrap_attributes" : "force" ,
    "indent_size" : 2 ,
    "wrap_attributes_indent_size" : 2 ,
    "void_elements" : "image,input,video" ,
    "indent_scripts" : "keep"
}

예쁜Html

 "minapp-vscode.wxmlFormatter" : "prettyHtml" , // 指定格式化工具
"minapp-vscode.prettyHtml" : { // prettyHtml 默认配置
  "useTabs" : false ,
  "tabWidth" : 2 ,
  "printWidth" : 100 ,
  "singleQuote" : false ,
  "usePrettier" : true ,
  "wrapAttributes" : false , // 设置成 true 强制属性换行
  "sortAttributes" : false
}

더 예뻐요

 "minapp-vscode.wxmlFormatter" : "prettier" , // 指定格式化工具
"minapp-vscode.prettier" : { // prettier 更多参考 https://prettier.io/docs/en/options.html
  "useTabs" : false ,
  "tabWidth" : 2 ,
  "printWidth" : 100 ,
  "singleQuote" : false
}

팁:
1. prettyHtml 및 prettier 모드의 경우 프로젝트 아래의 구성 파일이 자동으로 읽혀집니다. Prettier 구성 파일 .editorconfig
2. 서식 지정 도구를 전환하려면 VSCode를 다시 시작해야 합니다.
3. prettyHtml 의 경우, prettier 에서 채택한 HTML5의 구문은 wxml과 완전히 일치하지 않습니다. 작성 시 호환성에 주의하세요.
4. jsBeautifyHtml 의 경우 값이 "useCodeBuiltInHTML" 이면 vscode 구성의 html.format.* 구성 필드 문서에서 구성 정보를 읽어 js-beautify 구성으로 변환합니다.

FAQ

플러그인 설치 후 자동 완성이 나타나지 않습니다

설치 후 VSCode를 다시 시작했는지 확인하십시오.
현재 파일의 형식이 wxml, wxml-pug 또는 vue인지 확인하세요. (파일 접미사는 구성 파일의 다른 파일 형식과 연결될 수 있으므로 볼 수 없습니다. 하단에 표시되는 파일 형식을 확인해야 합니다. vscode 오른쪽 코너)