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.

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

doc: update new features of vscode extension #173

Merged
merged 2 commits into from
Oct 7, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 4 additions & 3 deletions docs/tools/Ide/index.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
# IDE

We have provided two simple kinds of plugins for KCL. You can get more help information at the following link:
Peefy marked this conversation as resolved.
Show resolved Hide resolved
We have provided three simple kinds of extensions for KCL. You can get more help information at the following link:

+ IntelliJ Plugin: https://github.com/kcl-lang/intellij-kcl
+ VSCode Plugin: https://github.com/kcl-lang/vscode-kcl
+ IntelliJ Extension: https://github.com/kcl-lang/intellij-kcl
+ VSCode Extension: https://github.com/kcl-lang/vscode-kcl
+ NeoVim Extension: https://github.com/kcl-lang/kcl.nvim
22 changes: 17 additions & 5 deletions docs/tools/Ide/vs-code.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,18 @@ sidebar_position: 1

- **Step 1.** [Install KCL](https://kcl-lang.io/docs/user_docs/getting-started/install) on your system. Please check that `kcl` and `kcl-language-server` are installed and have been added to your PATH:

In MacOs and Linux:
```bash
which kcl
which kcl-language-server
```

In Windows:
```bash
where kcl
where kcl-language-server
```

- **Step 2.** Install the [KCL extension](https://marketplace.visualstudio.com/items?itemName=kcl.kcl-vscode-extension) for Visual Studio Code. This extension requires the VS Code 1.50+.
- **Step 3.** Reopen VS Code and create a KCL file and begin your KCL tour!

Expand All @@ -22,19 +29,24 @@ This extension provides some coding assistance, including the following features

- **Syntax Highlight:**
![Highlight](/img/docs/tools/Ide/vs-code/Highlight.png)
- **Goto Definition:** Goto definition of schema, variable, schema attribute, and import pkg.
- **Goto Definition:** Goto definition of schema, variable, schema attribute, map key and import pkg.
![Goto Definition](/img/docs/tools/Ide/vs-code/GotoDef.gif)
- **Completion:** Keywords completions and dot(`.`) completion.
- **Completion:** Completion for keywords, dot(`.`), variables and schema attribute.
![Completion](/img/docs/tools/Ide/vs-code/Completion.gif)
- **Outline:** Main definition(schema def) and variables in KCL file.
![Outline](/img/docs/tools/Ide/vs-code/Outline.gif)
- **Hover:** Identifier information (type and schema documentation).
- **Hover:** Identifier information (type, function signature and documents).
![Hover](/img/docs/tools/Ide/vs-code/Hover.gif)
- **Diagnostics:** Warnings and errors in KCL file.
> Tips: You can enhance the effect of diagnostics by installing another plugin: [Error Lens](https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens).

![Diagnostics](/img/docs/tools/Ide/vs-code/Diagnostics.gif)

> Tips: You can enhance the effect of diagnostics by installing another extension: [Error Lens](https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens).

- **Format:** Format a KCL file or snippet code
![Format](/img/docs/tools/Ide/vs-code/Format.gif)
- **Quick fix:** Quick fix some diagnostics
![Qucik Fix](/img/docs/tools/Ide/vs-code/QuickFix.gif)

Other useful features such as refactoring and testing are in development.

## Dependencies
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,3 +4,4 @@

+ IntelliJ 插件: https://github.com/kcl-lang/intellij-kcl
+ VSCode 插件: https://github.com/kcl-lang/vscode-kcl
+ NeoVim 插件: https://github.com/kcl-lang/kcl.nvim
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,18 @@ sidebar_position: 1
## 快速开始

- 1. [安装 KCL](https://kcl-lang.io/docs/user_docs/getting-started/install) 并检查 `kcl` 和 `kcl-language-server` 命令在您的 PATH 中:

在 MacOs 和 Linux中:
```bash
which kcl
which kcl-language-server
```

在 Windows 中:
```bash
where kcl
where kcl-language-server
```

- 2. 安装 [VS Code KCL 插件](https://marketplace.visualstudio.com/items?itemName=kcl.kcl-vscode-extension). 需要您的 VS Code 版本大于 1.50+
- 3. 重新打开 VS Code 并创建一个 KCL 文件验证 IDE 插件功能

Expand All @@ -22,19 +28,24 @@ sidebar_position: 1

- **语法高亮**
![Highlight](/img/docs/tools/Ide/vs-code/Highlight.png)
- **跳转**
- **跳转:** 跳转至定义,如 schema,schema 属性, 变量,map key 等
![Goto Definition](/img/docs/tools/Ide/vs-code/GotoDef.gif)
- **补全**
- **补全:** 代码补全,如关键字, 点(`.`) 变量,schema 属性等
![Completion](/img/docs/tools/Ide/vs-code/Completion.gif)
- **大纲**
- **大纲:** 显示 KCL 文件中的 schema 和 变量定义
![Outline](/img/docs/tools/Ide/vs-code/Outline.gif)
- **悬停**
- **悬停**: 悬停提示 Identifer 的信息,如类型,函数签名和文档等
![Hover](/img/docs/tools/Ide/vs-code/Hover.gif)
- **诊断**
- **诊断:** 警告和错误信息
![Diagnostics](/img/docs/tools/Ide/vs-code/Diagnostics.gif)

> 提示:您可以通过安装 [Error Lens 插件](https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens) 来增强诊断效果

- **格式化:** 格式化一个 KCL 文件或代码片段
![Format](/img/docs/tools/Ide/vs-code/Format.gif)
- **快速修复:** 快速修复一些诊断信息
![Qucik Fix](/img/docs/tools/Ide/vs-code/QuickFix.gif)

其他一些有用的功能,如代码重构和智能感知等正在开发中。

## 最小依赖
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,3 +4,4 @@

+ IntelliJ 插件: https://github.com/kcl-lang/intellij-kcl
+ VSCode 插件: https://github.com/kcl-lang/vscode-kcl
+ NeoVim 插件: https://github.com/kcl-lang/kcl.nvim
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,18 @@ sidebar_position: 1
## 快速开始

- 1. [安装 KCL](https://kcl-lang.io/docs/user_docs/getting-started/install) 并检查 `kcl` 和 `kcl-language-server` 命令在您的 PATH 中:

在 MacOs 和 Linux中:
```bash
which kcl
which kcl-language-server
```

在 Windows 中:
```bash
where kcl
where kcl-language-server
```

- 2. 安装 [VS Code KCL 插件](https://marketplace.visualstudio.com/items?itemName=kcl.kcl-vscode-extension). 需要您的 VS Code 版本大于 1.50+
- 3. 重新打开 VS Code 并创建一个 KCL 文件验证 IDE 插件功能

Expand All @@ -22,19 +28,24 @@ sidebar_position: 1

- **语法高亮**
![Highlight](/img/docs/tools/Ide/vs-code/Highlight.png)
- **跳转**
- **跳转:** 跳转至定义,如 schema,schema 属性, 变量,map key 等
![Goto Definition](/img/docs/tools/Ide/vs-code/GotoDef.gif)
- **补全**
- **补全:** 代码补全,如关键字, 点(`.`) 变量,schema 属性等
![Completion](/img/docs/tools/Ide/vs-code/Completion.gif)
- **大纲**
- **大纲:** 显示 KCL 文件中的 schema 和 变量定义
![Outline](/img/docs/tools/Ide/vs-code/Outline.gif)
- **悬停**
- **悬停**: 悬停提示 Identifer 的信息,如类型,函数签名和文档等
![Hover](/img/docs/tools/Ide/vs-code/Hover.gif)
- **诊断**
- **诊断:** 警告和错误信息
![Diagnostics](/img/docs/tools/Ide/vs-code/Diagnostics.gif)

> 提示:您可以通过安装 [Error Lens 插件](https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens) 来增强诊断效果

- **格式化:** 格式化一个 KCL 文件或代码片段
![Format](/img/docs/tools/Ide/vs-code/Format.gif)
- **快速修复:** 快速修复一些诊断信息
![Qucik Fix](/img/docs/tools/Ide/vs-code/QuickFix.gif)

其他一些有用的功能,如代码重构和智能感知等正在开发中。

## 最小依赖
Expand Down
Loading
Loading