Emmet: CSS-in-JS용 Emmet

@renatorib 아직 CSS-inJS에 emmet을 사용하는 솔루션을 찾았습니까?

아니요

Atom을 사용하는 경우 https://atom.io/packages/atom-emmet-css-in-js 를 확인하십시오.

vscode에는 두 가지 패키지가 있습니다.

• js 스니펫
• CSS-in-JS

두 번째는 더 많은 설치가 있지만 작동하지 못했습니다 :/

Emmet v2의 일부로 작업: https://github.com/emmetio/emmet/tree/v2
원하는 동작에 대한 사양을 제공할 수 있습니까(저는 개인적으로 CSS-in-JS를 사용하지 않습니다)?

@sergeche 동작은 매우 유사합니다.

예를 들어 .jsx 파일 내에서 bgc<TAB> 를 누르면 ` backgroundColor: '#' - # 다음에 커서가 확장됩니다.

알아 채다:

1. 속성은 낙타 케이스입니다
2. 이 경우 값은 문자열입니다.
3. 값도 숫자가 될 수 있습니다(예: opacity ). 따라서 따옴표를 생략합니다. 예를 들어 op<TAB> opacity: 로 확장됩니다.

어떻게 생각해?

@goldylucks 예, 현재 구현은 다음과 같이 작동합니다. https://github.com/emmetio/emmet/blob/master/test/stylesheet.ts#L167
여러 값이 배열( margin: 10px 20px → margin: [10, 20] ) 또는 무언가여야 하는 것과 같은 몇 가지 단점이 있다고 생각했습니다.

CSS 속성의 대부분 JSON과 유사한 출력인 경우 새 Emmet에서 이미 구현된 것입니다.

@sergeche lg() 그래디언트 CSS 약어가 css-in-js에서 작동해야 합니까? 나는 그것을 작동시키지 못하는 것 같다.

@tayler-ramsay가 작동해야 합니다. Emmet의 최신 RC 버전(v2.0.0rc-5)을 사용하십니까?

@sergeche 빠른 응답에 감사드립니다. VS 코드에서 작업 중입니다. 사용 중인 버전을 확인할 수 있는 방법이 있습니까?

v2 밖에 없는 것 같아요. 나는 단지 좋은 의존성으로 설치할 수 있습니다. VS 코드에서 업그레이드할 수 있는지 궁금합니다. 답변 수정해서 죄송합니다 ;/

아, 그러면 아직 사용할 수 없습니다. 새로운 Emmet 버전은 새로운 Sublime Text 플러그인에서만 사용할 수 있습니다.

건배!
친애하는,

테일러 램지({

• ({개발자} && "디자이너")*
• 반품 {*
  [ 전화 : (717) 578-3243,
  www.tayler.co http://www.taylerramsay.com/ ]
• }*
• });*

"어리석은 것과 똑똑한 것 사이에는 아주 미세한 선이 있습니다."

2019년 10월 30일 수요일 오전 10:15 Sergey Chikuyonok [email protected]
썼다:

아, 그러면 아직 사용할 수 없습니다. 새로운 Emmet 버전은 다음에서만 사용할 수 있습니다.
새로운 Sublime Text 플러그인

—
당신이 언급되었기 때문에 이것을 받는 것입니다.
이 이메일에 직접 답장하고 GitHub에서 확인하세요.
https://github.com/emmetio/emmet/issues/512?email_source=notifications&email_token=ABIQ3EJ6D2Z4ZLBO4UEWQ4DQRGJH5A5CNFSM4DYL4R72YY3PNVWWK3TUL52HS4DFVEXG43NVMVBW
또는 구독 취소
https://github.com/notifications/unsubscribe-auth/ABIQ3EIQ3SNIWMCE4WE3ZADQRGJH5ANCNFSM4DYL4R7Q
.

CSS 템플릿 리터럴에 대한 지원도 훌륭할 것입니다.

예

const style = css`
  background-color: red;
  /* Auto-expand css props */
`;

편집: 신경쓰지 마세요. vscode-styled-components 확장을 설치하기만 하면 됩니다.

감사 해요!

이것은 훌륭합니다! @sergeche , 이 기능에 도움이 될 수 있는지 알려주세요.

어제 Emmet 2.0을 공개적으로 사용할 수 있게 했습니다(핵심 부분 자체만). Sublime Text, CodeMirror 및 Nova 편집기에서 사용할 수 있습니다. 더 나은 컨텍스트 감지를 위해 편집기를 조정할 수 있도록 실제 사용 사례와 함께 일부 코드 조각을 제공할 수 있습니다.

예를 들어 JS(X)에서 잘못된 일치로 사용자의 주의를 산만하게 하지 않도록 약어 앞에 < 를 붙여야 합니다. 예를 들어 <div.my-class 와 같이 작성해야 합니다. 사용자 정의 접두사를 만들 수 있으므로 입력하는 약어는 CSS 개체 리터럴로 확장되어야 함을 명확하게 명시할 수 있습니다. |m10+p5 같은 것

굉장해! 스니펫의 경우 사용 중인 CSS-in-JS(및 구성 방법)에 따라 다릅니다. 이 문제의 원래 예는 좋은 예입니다( margin 수정했습니다).

{
  display: 'flex',
  fontSize: '16px',
  margin: '10px 5px',
}

다음과 같은 작업을 수행하여 동일한 결과를 얻을 수도 있습니다(적어도 JSS에서는).

{
  display: 'flex',
  fontSize: 16,
  margin: [[5, 10]],
}

CSS-in-JS에는 여러 종류가 있으므로 첫 번째 예에서와 같이 따옴표 안에 값을 사용하는 것이 가장 안전한 기본값이라고 생각합니다.

VS Code에서 이것을 시도할 기회가 있습니까?

Emmet의 모든 기능을 지원하기 위해 가까운 시일 내에 VSCode 확장을 다시 작성할 계획입니다.

답변: iPhone

2 мая 2020 г., в 15:25, Thomas [email protected] написал(а):

</s></s> 수있는
VS Code에서 이것을 시도할 기회가 있습니까?

—
당신이 언급되었기 때문에 이것을 받는 것입니다.
이 이메일에 직접 답장하거나 GitHub에서 보거나 구독을 취소하세요.

안녕하세요 👋
위의 대화에 따르면 Emmet이 .js 파일 내에서 CSS 개체 구문을 지원하는 것처럼 들리지만 VS Code에서는 아직 지원되지 않습니다.

정확합니까? ☝️

Google을 검색했지만 정확한 답변을 찾을 수 없었습니다.
@sergeche 이 기능에 대한 작업에 감사드립니다!

예, 새로운 Emmet 버전(이미 VSCode에 있음)은 이미 JSON 속성으로 출력을 지원합니다. 플러그인 자체의 추가 지원이 필요합니다.

이야 굉장해! 나는 그것을 작동시키는 방법을 아직 알아내지 못했다.

플러그인 자체의 추가 지원이 필요합니다.

☝️ 이것에 대해 조금 더 자세히 설명하거나 올바른 방향을 알려 주시겠습니까? 작동시키는 방법에 대한 문서가 어딘가에 있습니까?
다시 한번 감사합니다!

emmet.includeLanguages 를 "javascript": "css" 로 설정하면 표준 CSS(객체 구문 아님)가 제공됩니다.
"javascript": "javascriptreact" 로 설정하면 CSS를 JSX로 변환하려고 합니다.

CSS 개체 구문을 가져오는 데 사용해야 하는 다른 설정이 있습니까? 어디에서도 가능한 옵션 목록을 찾을 수 없습니다. 여기에서 내 settings.json 와 내가 겪고 있는 문제를 볼 수 있습니다.

https://user-images.githubusercontent.com/19367659/113518218-ebbfbb00-9552-11eb-8963-eadef0b15f06.mp4

분명히 하기 위해 내 .js 파일에 이것을 입력하고 싶습니다.
d:f+jc:c+ai:c+mt10

그리고 다음과 같은 결과를 얻습니다.

display: 'flex',
justifyContent: 'center',
alignItems: 'center',
marginTop: 10,

이 옵션은 true 로 설정해야 합니다. https://github.com/emmetio/emmet/blob/51757fc77ee2477c2e2cc6abeff44e64c8a85eec/src/config.ts#L257

VSCode 플러그인에서 Emmet 옵션을 설정하는 방법을 잘 모르겠습니다(저는 관리자가 아닙니다).

@sergeche 님이 옳다고 생각합니다. VSCode 에 구성을 추가하는 방법을 찾으셨습니까?

@josegutierro 는 아직 시도하지 않았습니다. VSCode 플러그인의 옵션일 뿐만 아니라 플러그인에서 제대로 지원해야 작동합니다.

이 확장 기능을 사용하고 있는 @sergeche 에게 감사합니다. nativeEmmet . 실제로 Emmet은 아니지만 탭 완성 기능이 있는 스니펫이 많이 있습니다. 전체 목록은 다음과 같습니다.