Skip to content

Commit

Permalink
doc: update new features of vscode extension
Browse files Browse the repository at this point in the history
  • Loading branch information
He1pa committed Oct 7, 2023
1 parent 81f4a25 commit 37458c9
Show file tree
Hide file tree
Showing 8 changed files with 4,180 additions and 8,135 deletions.
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:
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
Loading

0 comments on commit 37458c9

Please sign in to comment.