Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Implement bezier-react VS Code extension #774

Closed
Tracked by #1800
sungik-choi opened this issue May 2, 2022 · 3 comments
Closed
Tracked by #1800

Implement bezier-react VS Code extension #774

sungik-choi opened this issue May 2, 2022 · 3 comments
Assignees
@yangwooseong
Labels
chore:system Issue or PR regarding source environment (e.g. lints, tests), not the actual source code

Comments

@sungik-choi
Copy link
Contributor

sungik-choi commented May 2, 2022 •
edited
Loading

요약

CSS Variable에도 Intellisense가 잘 작동할 수 있도록 bezier-react 전용 VS Code extension을 구현해야합니다.

제안 이유

  • 요약에서 설명. 자동 완성이 지원되지 않으므로 생산성이 굉장히 떨어집니다.
  • 잘 구현될 경우 색상값에 대한 미리보기도 자동 완성에서 지원하므로, 라이브러리 사용처에서 생산성에 많은 도움이 될 거라 기대합니다.

개선 방안

아래 레퍼런스 참고해서 구현

레퍼런스
@sungik-choi sungik-choi added the enhancement Issues or PR related to making existing features better label May 2, 2022
@sungik-choi sungik-choi self-assigned this May 2, 2022
@sungik-choi sungik-choi mentioned this issue May 2, 2022
Closed
8 tasks
@sungik-choi
Copy link
Contributor Author

TailwindCSS 예시처럼 lint, preview까지 되면 정말 좋을듯.

@sungik-choi
Copy link
Contributor Author

디자인 토큰 도입으로 CSS Variable을 통해 Foundation이 구현된 이후 이를 token 패키지로 분리, 그 후 해당 패키지를 참조하는 방향으로 제대로 된 구현이 가능할 듯.

@sungik-choi sungik-choi changed the title bezier-react VS Code extension 제작 Implement bezier-react VS Code extension Nov 9, 2022
@sungik-choi sungik-choi added the dx label Nov 9, 2022
@sungik-choi sungik-choi removed their assignment Nov 9, 2022
@sungik-choi sungik-choi added chore:system Issue or PR regarding source environment (e.g. lints, tests), not the actual source code and removed enhancement Issues or PR related to making existing features better labels Mar 9, 2023
@sungik-choi
Copy link
Contributor Author

  • 컴포넌트 베이스로, 컴포넌트 Prop을 통해 스타일링하게 된다면 큰 필요성이 없을 수 있습니다. 타입을 잘 설정해두면 자동 완성은 같이 따라오기 때문입니다.
  • 추가로 CSS를 오버라이드할 경우엔 의미있을 수 있음. (예: 수도 엘리먼트, focus, hover 스타일 등)

@sungik-choi sungik-choi added status:pending Issue or PR that is now pending priority:B Issue that important but not urgent and removed dx labels Jun 21, 2023
@sungik-choi sungik-choi removed the priority:B Issue that important but not urgent label Jun 30, 2023
@sungik-choi sungik-choi mentioned this issue Dec 15, 2023
Closed
@yangwooseong yangwooseong self-assigned this Jan 3, 2024
@sungik-choi sungik-choi mentioned this issue Feb 16, 2024
Closed
@yangwooseong yangwooseong mentioned this issue Mar 18, 2024
Merged
9 tasks
@sungik-choi sungik-choi removed the status:pending Issue or PR that is now pending label Mar 20, 2024
yangwooseong added a commit that referenced this issue Mar 22, 2024
@yangwooseong
Implement bezier-vscode package (#2091)
6c5a7c4 
<!--
  How to write a good PR title:
- Follow [the Conventional Commits
specification](https://www.conventionalcommits.org/en/v1.0.0/).
  - Give as much context as necessary and as little as possible
  - Prefix it with [WIP] while it’s a work in progress
-->

## Self Checklist

- [x] I wrote a PR title in **English** and added an appropriate
**label** to the PR.
- [x] I wrote the commit message in **English** and to follow [**the
Conventional Commits
specification**](https://www.conventionalcommits.org/en/v1.0.0/).
- [x] I [added the
**changeset**](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md)
about the changes that needed to be released. (or didn't have to)
- [x] I wrote or updated **documentation** related to the changes. (or
didn't have to)
- [x] I wrote or updated **tests** related to the changes. (or didn't
have to)
- [x] I tested the changes in various browsers. (or didn't have to)
  - Windows: Chrome, Edge, (Optional) Firefox
  - macOS: Chrome, Edge, Safari, (Optional) Firefox

## Related Issue
<!-- Please link to issue if one exists -->

<!-- Fixes #0000 -->

- #774 

## Summary
<!-- Please brief explanation of the changes made -->

- 베지어 토큰의 자동완성을 VS Code extension 으로 지원하기 위한 패키지를 추가합니다. 

## Details
<!-- Please elaborate description of the changes -->

- 기본적으로 [MS
가이드](https://code.visualstudio.com/api/language-extensions/language-server-extension-guide)와
[polaris-vscode](https://github.com/Shopify/polaris/tree/main/polaris-for-vscode)
를 참고하면서 만들었습니다.

- 스타일링하고자 하는 css property 에 맞춰서 적절한 token 이 자동완성 리스트에 뜨도록 했습니다. 예)
color, background-color 라면 `--bgtxt-white-normal`, `--bdr-white` 등,
box-shadow 라면 `--ev-3` 이 뜨도록

- 명확한 원인은 모르겠으나 ts파일에서는 '--bgtxt' 을 입력하더라도 '--' 가 매칭이 안됩니다. 그래서 사용할 때는
var() 입력, 괄호 안에서 **'--'를 입력하지 않고** bgtxt 입력 후 자동완성 통해서
var(--bgxt-white-normal) 이 완성되는 흐름입니다. scss 파일에서는 --로 시작하는 텍스트라도 잘 필터링
되기 때문에 문제가 없습니다. 아마 ts 파일에서는 '-' 로 시작할 때 auto completion 이 안되는 게 원인인 것
같은데, 이것을 어떻게 해야 되게 하는지를 못찾았습니다. VS Code 자체적으로 막아놓은 게 아닐까 추측하고 있는 상태입니다.


https://github.com/channel-io/bezier-react/assets/28595102/8fc36735-9449-47c0-8264-d906968e092a


- 테스트 하려면 yarn dev 실행 후 VS Code > run > start debugging 실행하면 됩니다. 괜찮다
싶으면 머지 후 배포하고, 위키에 개발/배포 방법을 추가하면 될 것 같습니다.

### Todos

- [ ] 가이드 따라서 배포 하고 테스트 하기
- [ ] 위키에 개발 / 배포 방법 명시하기
- [ ] 베지어 루트 readme 에 추가하기

### Breaking change? (Yes/No)
<!-- If Yes, please describe the impact and migration path for users -->

- No

## References
<!-- Please list any other resources or points the reviewer should be
aware of -->

-
https://code.visualstudio.com/api/language-extensions/language-server-extension-guide
- https://github.com/Shopify/polaris/tree/main/polaris-for-vscode
@yangwooseong yangwooseong mentioned this issue Apr 5, 2024
Merged
6 tasks
yangwooseong added a commit that referenced this issue Apr 5, 2024
@yangwooseong
Add publisher name to bezier-vscode package.json (#2139)
5bc920e 
<!--
  How to write a good PR title:
- Follow [the Conventional Commits
specification](https://www.conventionalcommits.org/en/v1.0.0/).
  - Give as much context as necessary and as little as possible
  - Prefix it with [WIP] while it’s a work in progress
-->

## Self Checklist

- [x] I wrote a PR title in **English** and added an appropriate
**label** to the PR.
- [x] I wrote the commit message in **English** and to follow [**the
Conventional Commits
specification**](https://www.conventionalcommits.org/en/v1.0.0/).
- [x] I [added the
**changeset**](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md)
about the changes that needed to be released. (or didn't have to)
- [x] I wrote or updated **documentation** related to the changes. (or
didn't have to)
- [x] I wrote or updated **tests** related to the changes. (or didn't
have to)
- [x] I tested the changes in various browsers. (or didn't have to)
  - Windows: Chrome, Edge, (Optional) Firefox
  - macOS: Chrome, Edge, Safari, (Optional) Firefox

## Related Issue

<!-- Please link to issue if one exists -->

<!-- Fixes #0000 -->

- #774 

## Summary

<!-- Please brief explanation of the changes made -->

- extension 을 출판하기 위해 필요한 필드를 추가합니다. 

## Details

<!-- Please elaborate description of the changes -->

- 생략 

### Breaking change? (Yes/No)

<!-- If Yes, please describe the impact and migration path for users -->

- No

## References

<!-- Please list any other resources or points the reviewer should be
aware of -->

-
https://code.visualstudio.com/api/working-with-extensions/publishing-extension#create-a-publisher
This issue was closed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@yangwooseong yangwooseong

Labels
chore:system Issue or PR regarding source environment (e.g. lints, tests), not the actual source code
Projects
Bezier React
Archived in project
Milestone
No milestone
Development

No branches or pull requests
2 participants
@yangwooseong @sungik-choi