sprotty-vscode - GitLite

KO | EN

gitlite — search

#hacktoberfest #ai #android #rust #deep-learning #linux #docker #nodejs #java #windows #cli #kubernetes #awesome-list #security

sprotty-vscode

(★ 62)

sprotty-vscode

파일 탐색기

최종 버전 다운로드 (.zip)

- - build.yml
- extensions.json
- launch.json
- settings.json
- .eslintrc.js
- base.tsconfig.json
- - README.md
- - MrsGrantsSecretCompartment.sm
  - TrafficLight.sm
- architecture.idraw
- architecture.png
- screenshot.png
- - CHANGELOG.md
  - LICENSE
  - package.json
  - README.md
  - tsconfig.json
- - CHANGELOG.md
  - LICENSE
  - package.json
  - README.md
  - tsconfig.json
- - CHANGELOG.md
  - LICENSE
  - package.json
  - README.md
  - tsconfig.json
.eslintrc.js
.gitignore
.gitpod.yml
CODE_OF_CONDUCT.md
CONTRIBUTING.md
lerna.json
LICENSE
package.json
README.md
tsconfig.json
yarn.lock

# 설치 가이드

1. 코드 내려받기

git clone https://github.com/eclipse-sprotty/sprotty-vscode

깃허브에서 프로젝트 코드 전체를 내 컴퓨터로 내려받습니다.

cd sprotty-vscode

방금 내려받은 프로젝트 폴더 안으로 이동합니다.

2. Node.js

쉬움 추천

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
Node.js npm 명령어를 쓰려면 Node.js가 설치되어 있어야 합니다. LTS(장기지원) 버전을 추천합니다.

yarn

package.json에 명시된 라이브러리들을 내려받아 설치합니다.

✅ 명령어 실행 후 터미널에 나타나는 주소(보통 http://localhost:3000 형태)를 브라우저에서 열어보세요.

이 레포의 README에 적힌 실제 명령어를 그대로 가져왔습니다.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

[![Gitpod Ready-to-Code](https://img.shields.io/badge/Gitpod-Ready--to--Code-blue?logo=gitpod)](https://gitpod.io/#https://github.com/eclipse/sprotty-vscode)

# sprotty-vscode

This repository contains the glue code to integrate [Sprotty diagrams](https://github.com/eclipse/sprotty) - with or without a language server - in VSCode extensions.

Also contains an example extension for a domain-specific language for statemachines. The example is also available as _States Example_ from the [VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=typefox.states-extension).

![Screenshot](https://raw.githubusercontent.com/eclipse-sprotty/sprotty-vscode/master/images/screenshot.png)

## Features

* running Sprotty diagrams in VS Code webviews,
* SVG export (ALT-E), animated center selection (ALT-C) and fit to screen (ALT-F) actions,
* interaction with Sprotty-enhanced language servers to automatically synchronize diagrams with language artifacts.

## Architecture

In VS Code, extensions can contribute new UI components using a webview. Webviews communicate with the extension using the [`vscode-messenger`](https://github.com/TypeFox/vscode-messenger) library. The [`WebviewPanelManager`](./packages/sprotty-vscode/src/webview-panel-manager.ts) uses this to send and receive Sprotty Actions to and from a [`WebviewEndpoint`](./packages/sprotty-vscode/src/webview-endpoint.ts). The latter runs a webpacked `bundle.js` that contains the Sprotty diagram code.

![Architecture Diagram](https://raw.githubusercontent.com/eclipse-sprotty/sprotty-vscode/master/images/architecture.png)

If your extension provides a language, you can include a [Sprotty-enhanced language server](https://github.com/eclipse/sprotty-server) to get fully synchronized diagrams for your language artifacts. The [`SprottyLspVscodeExtension`](./packages/sprotty-vscode/src/lsp/sprotty-lsp-vscode-extension.ts) acts as a relay between the language server and a [`SprottyLanguageWebview`](./packages/sprotty-vscode/src/lsp/sprotty-lsp-webview.ts), and intercepts actions/LSP messages that require to interact with the VS Code workbench.

## Contents

The repo is structured as follows
- `examples`: an example Sprotty visualization using a [Langium](https://langium.org/)-based Language Server.
- `packages/sprotty-vscode`: library code for the VSCode extension.
- `packages/sprotty-vscode-protocol`: common protocol classes for the communication between the extension and the webview.
- `packages/sprotty-vscode-webview`: library code for the script that is run in the webview.

## Development

Compile the library code and the examples:
```
yarn
```

If you also want to use the older Xtext-based example, you need to run this command before `yarn`:
```
./examples/states-xtext/language-server/gradlew -p examples/states-xtext/language-server/ build
```