Skip to content

Commit 39a2270

Browse files
authored
New readme (#508)
* new readme * fix license url * update readme * sync with master * sync with master
1 parent e3cea1e commit 39a2270

File tree

1 file changed

+115
-73
lines changed

1 file changed

+115
-73
lines changed

README.md

Lines changed: 115 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,44 @@
1-
# rescript-vscode
2-
3-
The official VSCode plugin for ReScript.
4-
5-
![Screen shot](https://user-images.githubusercontent.com/1909539/101266821-790b1400-3707-11eb-8e9f-fb7e36e660e6.gif)
6-
7-
## Prerequisite
8-
9-
You **must** have `rescript >=9.1` installed locally in your project, through the usual [npm installation](https://rescript-lang.org/docs/manual/latest/installation#integrate-into-existing-js-project). Older versions are not guaranteed to work.
10-
11-
## Recommendation
1+
<h1 align="center">
2+
<a href="https://marketplace.visualstudio.com/items?itemName=chenglou92.rescript-vscode">ReScript VSCode</a>
3+
</h1>
4+
5+
<p align="center">The Official VSCode plugin for ReScript</p>
6+
7+
<p align="center">
8+
<a href="https://marketplace.visualstudio.com/items?itemName=chenglou92.rescript-vscode">
9+
<img src="https://vsmarketplacebadge.apphb.com/version/chenglou92.rescript-vscode.svg"/>
10+
<img src="https://vsmarketplacebadge.apphb.com/installs/chenglou92.rescript-vscode.svg"/>
11+
</a>
12+
</p>
13+
14+
<p align="center">
15+
<img src="https://user-images.githubusercontent.com/1909539/101266821-790b1400-3707-11eb-8e9f-fb7e36e660e6.gif"/>
16+
</p>
17+
18+
## Contents
19+
20+
- [📝 Prerequisite](#-prerequisite)
21+
- [🌈 Supported Themes](#-supported-themes)
22+
- [💡 Features](#-features)
23+
- [📥 Installation](#-installation)
24+
- [📦 Commands](#-commands)
25+
- [🔨 Settings](#-settings)
26+
- [🚀 Code Analyzer](#-code-analyzer)
27+
- [Configuring the Code Analyzer](#configuring-the-code-analyzer)
28+
- [Usage](#usage)
29+
- [Caveats](#caveats)
30+
- [🪄 Tips & Tricks](#-tips--tricks)
31+
- [Hide generated files](#hide-generated-files)
32+
- [⌨️ Use with Other Editors](#️-use-with-other-editors)
33+
- [📰 Changelog](#-changelog)
34+
- [👏 How to Contribute](#-how-to-contribute)
35+
- [📄 License](#-license)
36+
37+
## 📝 Prerequisite
38+
39+
You **must** have [ReScript](https://www.npmjs.com/package/rescript) >= 9.1 installed locally in your project, through the usual [npm or yarn installation](https://rescript-lang.org/docs/manual/latest/installation#integrate-into-existing-js-project). Older versions are not guaranteed to work.
40+
41+
## 🌈 Supported Themes
1242

1343
Our highlighting works well with most popular VSCode themes, such as:
1444

@@ -22,15 +52,10 @@ The only 2 themes we don't (and can't) support, due to their lack of coloring, a
2252

2353
- Dark (Visual Studio), Light (Visual Studio)
2454

25-
If your custom theme doesn't seem to highlight much (e.g. no colors for upper-case JSX tag, no distinction between module and variant), try one of the recommended themes to see if that's the problem. For more info, see [this post](https://github.com/rescript-lang/rescript-vscode/pull/8#issuecomment-764469070).
26-
27-
## Installation
55+
> **Note**
56+
> If your custom theme doesn't seem to highlight much (e.g. no colors for upper-case JSX tag, no distinction between module and variant), try one of the recommended themes to see if that's the problem. For more info, see [this post](https://github.com/rescript-lang/rescript-vscode/pull/8#issuecomment-764469070).
2857
29-
The plugin's on [VSCode Marketplace](https://marketplace.visualstudio.com/items?itemName=chenglou92.rescript-vscode). In VSCode, `cmd-shift-p` -> "Install Extensions", then find "rescript-vscode".
30-
31-
The plugin activates on `.res` and `.resi` files. If you've already got Reason-Language-Server installed, it's possible that the latter took precedence over this one. Make sure you're using this plugin ("ReScript syntax") rather than Reason-Language-Server ("BuckleScript syntax").
32-
33-
## Features
58+
## 💡 Features
3459

3560
- Supports `.res`, `.resi` and `bsconfig.json`.
3661
- Syntax highlighting.
@@ -44,105 +69,110 @@ The plugin activates on `.res` and `.resi` files. If you've already got Reason-L
4469
- Autocomplete.
4570
- Find references.
4671
- Rename.
72+
- Inlay Hints
4773
- Snippets to ease a few syntaxes:
4874
- `external` features such as `@bs.module` and `@bs.val`
4975
- `try`, `for`, etc.
5076
- Folding, and [custom folding](https://code.visualstudio.com/docs/editor/codebasics#_folding) through `//#region` and `//#endregion`.
5177

52-
### Commands
53-
54-
#### `> ReScript: Create an interface file for this implementation file.`
55-
56-
Creates an interface file (`.resi`) for the current `.res` file, automatically filling in all types and values in the current file.
57-
58-
#### `> Open the compiled JS file for this implementation file.`
59-
60-
Opens the compiled JS file for the current ReScript file.
78+
## 📥 Installation
6179

62-
#### `> ReScript: Switch implementation/interface`
80+
Launch VS Code Quick Open (`Ctrl+P`), paste the following command, and press enter.
6381

64-
Switches between the implementation and interface file. If you're in a `.res` file, the command will open the corresponding `.resi` file (if it exists), and if you're in a `.resi` file the command will open the corresponding `.res` file.
65-
66-
> This can also be triggered with the keybinding `Alt+O`.
67-
68-
### Code Analyzer
69-
70-
The Code Analyzer is a mode in the extension that runs additional code analysis in your project. The analysis helps you find dead code at a granular level, find unhandled exceptions, and more.
82+
```
83+
ext install chenglou92.rescript-vscode
84+
```
7185

72-
> The Code Analyzer uses [reanalyze](https://github.com/rescript-association/reanalyze), which is embedded in the extension, so you don't need to install anything extra to run it.
86+
The plugin activates on `.res` and `.resi` files. If you've already got Reason-Language-Server installed, it's possible that the latter took precedence over this one. Make sure you're using this plugin ("ReScript syntax") rather than Reason-Language-Server ("BuckleScript syntax").
7387

74-
#### Configuring the Code Analyzer
88+
## 📦 Commands
7589

76-
You'll need to configure what code analysis you want to run, and what (if any) directories you want to ignore. Configuration is done via adding `reanalyze` in `bsconfig.json`. You'll get autocomplete for what configuration options are valid. You can also read [all about configuring `reanalyze` here](https://github.com/rescript-association/reanalyze#configuration-via-bsconfigjson).
90+
| Command | Description |
91+
|------------------------------------------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
92+
| ReScript: Create an interface file for this implementation file | Creates an interface file (`.resi`) for the current `.res` file, automatically filling in all types and values in the current file. |
93+
| ReScript: Open the compiled JS file for this implementation file | Opens the compiled JS file for the current ReScript file. |
94+
| ReScript: Switch implementation/interface | Switches between the implementation and interface file. If you're in a `.res` file, the command will open the corresponding `.resi` file (if it exists), and if you're in a `.resi` file the command will open the corresponding `.res` file. This can also be triggered with the keybinding `Alt+O`. |
95+
| ReScript: Start Code Analyzer | This will start code analysis in the ReScript project of the file you run the command from. |
7796

78-
##### Autostarting the Code Analyzer
97+
## 🔨 Settings
7998

80-
The Code Analyzer needs to be started manually by default. However, you can configure the extension to start the Code Analyzer automatically via the setting `rescript.settings.autoRunCodeAnalysis`.
99+
You'll find all ReScript specific settings under the scope `rescript.settings`.
81100

82-
#### Usage
101+
| Setting | Description |
102+
| ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
103+
| Prompt to Start Build | If there's no ReScript build running already in the opened project, the extension will prompt you and ask if you want to start a build automatically. You can turn off this automatic prompt via the setting `rescript.settings.askToStartBuild`. |
104+
| ReScript Binary Path | The extension will look for the existence of a `/node_modules/.bin/rescript` file and use its directory as the `binaryPath`. If it does not find it at the project root (which is where the nearest `bsconfig.json` resides), it goes up folders in the filesystem recursively until it either finds it (often the case in monorepos) or hits the top level. To override this lookup process, the path can be configured explicitly using the setting `rescript.settings.binaryPath` |
105+
| Inlay Hints (experimental) | This allows an editor to place annotations inline with text to display type hints. Enable using `rescript.settings.inlayHints.enable: true` |
106+
| Code Lens (experimental) | This tells the editor to add code lenses to function definitions, showing its full type above the definition. Enable using `rescript.settings.codeLens: true` |
107+
| Autostarting the Code Analyzer | The Code Analyzer needs to be started manually by default. However, you can configure the extension to start the Code Analyzer automatically via the setting `rescript.settings.autoRunCodeAnalysis`. |
83108

84-
Open the command palette and run `> ReScript: Start Code Analyzer`. This will start code analysis in the ReScript project of the file you run the command from.
109+
**Default settings:**
85110

86-
Dead code is highlighted in the editor, and code actions for suppressing dead code warnings are available in most cases.
111+
```jsonc
112+
// Whether you want the extension to prompt for autostarting a ReScript build if a project is opened with no build running
113+
"rescript.settings.askToStartBuild": true,
87114

88-
When done, stop the code analysis mode by clicking the `Stop Code Analyzer` button in the editor status bar. This will clear all reported analysis warnings.
115+
// Automatically start ReScript's code analysis.
116+
"rescript.settings.autoRunCodeAnalysis": false,
89117

90-
#### Caveats
118+
// Path to the directory where ReScript binaries are. You can use it if you haven't or don't want to use the installed ReScript from node_modules in your project.
119+
"rescript.settings.binaryPath": null
91120

92-
Currently does not work for full monorepo dead code analysis (although it should work for each monorepo package individually).
121+
// Enable (experimental) inlay hints.
122+
"rescript.settings.inlayHints.enable": true
93123

94-
## Configuration
124+
// Maximum length of character for inlay hints. Set to null to have an unlimited length. Inlay hints that exceed the maximum length will not be shown
125+
"rescript.settings.inlayHints.maxLength": 25
95126

96-
You'll find all ReScript specific settings under the scope `rescript.settings`. Open your VSCode settings and type `rescript.settings` to see them.
127+
// Enable (experimental) code lens for function definitions.
128+
"rescript.settings.codeLens": true
129+
```
97130

98-
### Autostarting ReScript builds
131+
## 🚀 Code Analyzer
99132

100-
If there's no ReScript build running already in the opened project, the extension will prompt you and ask if you want to start a build automatically. You can turn off this automatic prompt via the setting `rescript.settings.askToStartBuild`.
133+
The Code Analyzer is a mode in the extension that runs additional code analysis in your project. The analysis helps you find dead code at a granular level, find unhandled exceptions, and more.
101134

102-
#### How does it find my ReScript binary?
135+
> The Code Analyzer uses [reanalyze](https://github.com/rescript-association/reanalyze), which is embedded in the extension, so you don't need to install anything extra to run it.
103136
104-
The extension will look for the existence of a `/node_modules/.bin/rescript` file and use its directory as the `binaryPath`. If it does not find it at the project root (which is where the nearest `bsconfig.json` resides), it goes up folders in the filesystem recursively until it either finds it (often the case in monorepos) or hits the top level.
137+
### Configuring the Code Analyzer
105138

106-
To override this lookup process, the path can be configured explicitly using the setting `rescript.settings.binaryPath`.
139+
You'll need to configure what code analysis you want to run, and what (if any) directories you want to ignore. Configuration is done via adding `reanalyze` in `bsconfig.json`. You'll get autocomplete for what configuration options are valid. You can also read [all about configuring `reanalyze` here](https://github.com/rescript-association/reanalyze#configuration-via-bsconfigjson).
107140

108-
### Inlay Hints (experimental)
141+
### Usage
109142

110-
This allows an editor to place annotations inline with text to display type hints.
143+
Open the command palette and run `ReScript: Start Code Analyzer`. This will start code analysis in the ReScript project of the file you run the command from.
111144

112-
```jsonc
113-
// Enable (experimental) inlay hints.
114-
rescript.settings.inlayHints.enable: true
145+
Dead code is highlighted in the editor, and code actions for suppressing dead code warnings are available in most cases.
115146

116-
// Maximum length of character for inlay hints. Set to null to have an unlimited length. Inlay hints that exceed the maximum length will not be shown
117-
rescript.settings.inlayHints.maxLength: 25
118-
```
147+
When done, stop the code analysis mode by clicking the `Stop Code Analyzer` button in the editor status bar. This will clear all reported analysis warnings.
119148

120-
### Code Lens (experimental)
149+
### Caveats
121150

122-
This tells the editor to add code lenses to function definitions, showing its full type above the definition.
151+
Currently does not work for full monorepo dead code analysis (although it should work for each monorepo package individually).
123152

124-
```jsonc
125-
// Enable (experimental) code lens.
126-
rescript.settings.codeLens: true
127-
```
153+
## 🪄 Tips & Tricks
128154

129155
### Hide generated files
130156

131157
You can configure VSCode to collapse the JavaScript files ReScript generates under its source ReScript file. This will "hide" the generated files in the VSCode file explorer, but still leaving them accessible by expanding the source ReScript file they belong to.
132158

133-
Open your VSCode settings and type `editor.filenesting`. Enable the feature and scroll down to patterns.
159+
Open your VSCode settings and type:
134160

135-
The example has two patterns added:
136-
137-
![Shows configuration of file nesting patterns in VSCode.](https://user-images.githubusercontent.com/1457626/168123605-43ef53cf-f371-4f38-b488-d3cd081879de.png)
161+
```jsonc
162+
"explorer.fileNesting.enabled": true,
163+
"explorer.fileNesting.patterns": {
164+
"*.res": "${capture}.mjs, ${capture}.js, ${capture}.cmi, ${capture}.cmt, ${capture}.cmj",
165+
"*.resi": "${capture}.res"
166+
},
167+
```
138168

139169
This nests implementations under interfaces if they're present and nests all generated files under the main ReScript file. Adapt and tweak to your liking.
140170

141171
A screenshot of the result:
142172

143173
![Shows the end result in VSCode, with ReScript related files nested under eachother appropriately.](https://user-images.githubusercontent.com/1457626/168123647-400e2f09-31e3-45a2-b74b-190c7c207446.png)
144174

145-
## Use with Other Editors
175+
## ⌨️ Use with Other Editors
146176

147177
This repo also contains a language server that can power other editors. **However, the language server in this project is a pure implementation detail. We don't guarantee its stability for other editors' consumption** apart from Vim and Sublime Text.
148178

@@ -151,3 +181,15 @@ Still, if you'd like to use this language-server with other editors:
151181
- Get the release binaries from the Github Releases page.
152182
- Unzip the `.vsix` and get the `server` folder. That's the only folder you need.
153183
- The language server will be at `server/out/server.js`. Call it through node, and optionally pass `--stdio` if your editor doesn't support the default JSONRPC.
184+
185+
## 📰 Changelog
186+
187+
See [CHANGELOG](CHANGELOG.md)
188+
189+
## 👏 How to Contribute
190+
191+
Read our [Contributing Guide](CONTRIBUTING.md)
192+
193+
## 📄 License
194+
195+
See the [LICENSE](./LICENSE.txt) file for details.

0 commit comments

Comments
 (0)