Skip to content

Commit 434f6b8

Browse files
devvaannshdevvaannsh
committed
feat: add code intelligence index markdown doc
1 parent 37b3db1 commit 434f6b8

1 file changed

Lines changed: 191 additions & 0 deletions

File tree

‎docs/07-Code Intelligence/index.md‎

Lines changed: 191 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,191 @@
1+
---
2+
title: Code Intelligence
3+
slug: "/Features/Code Intelligence"
4+
---
5+
6+
**Phoenix Code** helps you write code faster with code hints, parameter hints, documentation popups, jump to definition, and live error checking. Most of it works out of the box with no setup.
7+
8+
This page explains what each feature does and how to tune it. For what you get in a specific language, see [JavaScript & TypeScript](./js-ts-code-intelligence), [PHP](./php-code-intelligence), [JSON](./json-code-intelligence), and [Python](./python-code-intelligence).
9+
10+
## Code Hints
11+
12+
As you type, a popup suggests what could come next: HTML tags, CSS properties and values, JavaScript symbols, JSON keys, file paths, and more.
13+
14+
- Hints appear automatically as you type.
15+
- Press `Ctrl + Space` to open them any time, or use `Edit > Show Code Hints`.
16+
- Use the arrow keys to pick one, then press `Enter` or `Tab` to insert it.
17+
- Press `Esc` to close the popup.
18+
19+
### Documentation Beside Hints
20+
21+
For languages with full code intelligence, the selected hint shows a documentation popup next to the list, with a short description of the function, property, or symbol. This lets you confirm it is the right one before you insert it.
22+
23+
## Parameter Hints
24+
25+
When you type inside a function call, right after `(` or `,`, a popup shows the function's parameters and highlights the one you are on. It follows your cursor as you move between arguments.
26+
27+
Press `Ctrl + Shift + Space` to show it any time, or use `Edit > Show Parameter Hint`.
28+
29+
## Hover Info
30+
31+
Hold your cursor over any symbol to see its type signature and documentation. The popup also has two buttons, **Go to Definition** and **Find Usages**.
32+
33+
## Jump to Definition and Find Usages
34+
35+
Place your cursor on a symbol and press `Ctrl/Cmd + J` to go to where it is defined, even in another file. This is also in `Navigate > Jump to Definition`.
36+
37+
Press `Shift + F12` to list every place the symbol is used across the project. This is also in `Find > Find All References`.
38+
39+
Both are in the right-click menu too.
40+
41+
## Error Checking
42+
43+
Phoenix Code checks your code as you type and shows problems in two places:
44+
45+
- **Squiggly underlines** in the editor, under the exact code with the problem. Hover over the underline to read the message.
46+
- The **Problems panel** at the bottom of the window, listing every problem in the file with its line number. Click a row to jump to it.
47+
48+
Problems come in three levels: **Error** (red), **Warning** (yellow), and **Info** (blue).
49+
50+
Two kinds of problems also change how the code looks, so you can spot them at a glance:
51+
52+
- **Unused code**, like a variable that is never read or an import that is never used, is drawn faded.
53+
- **Deprecated code**, like calling a function marked `@deprecated`, is drawn with a strikethrough.
54+
55+
These still get their underline and their row in the Problems panel. The styling is an extra hint on top.
56+
57+
### Quick Fixes
58+
59+
When a problem can be fixed automatically, a **Fix** button appears next to it in the Problems panel. Use **Fix All** to apply every fix in the file at once.
60+
61+
## Language Support
62+
63+
### Works Everywhere
64+
65+
These hints work in the desktop app and in the browser:
66+
67+
| Language or context | What you get |
68+
|---|---|
69+
| HTML | Tag names, attribute names and values |
70+
| HTML entities | Special characters like `&` and ` ` |
71+
| CSS, LESS, SCSS | Property names and property values |
72+
| SVG | Tag and attribute hints |
73+
| JavaScript | Symbol completion |
74+
| URLs | File path completion inside `href`, `src`, and `url()` |
75+
| Preferences files | Hints for every setting name and value while editing Phoenix Code's own settings files |
76+
77+
### Desktop App
78+
79+
The desktop app also runs **language servers**. A language server understands your whole project, not just the open file, so you get context-aware completion, documentation popups, parameter hints, jump to definition, and project-wide error checking.
80+
81+
| Language server | Languages | What you get |
82+
|---|---|---|
83+
| TypeScript | JavaScript, TypeScript, JSX, TSX | Type-aware completion, parameter hints, docs on hover, jump to definition, type errors, unused and deprecated detection. Respects your `jsconfig.json` or `tsconfig.json`. See [JavaScript & TypeScript](./js-ts-code-intelligence). |
84+
| JSON | JSON | Schema-based key and value completion and validation for well-known config files. In `package.json`, dependencies with known security problems are flagged. See [JSON](./json-code-intelligence). |
85+
| Intelephense | PHP | Completion, docs on hover, parameter hints, jump to definition, error checking. See [PHP](./php-code-intelligence). |
86+
| Pyrefly and Ruff | Python | Type-aware completion, docs on hover, parameter hints, jump to definition, type checking with Pyrefly, and formatting with Ruff. See [Python](./python-code-intelligence). |
87+
88+
The PHP and Python language servers download and set themselves up the first time you open a PHP or Python file. There is nothing to install by hand.
89+
90+
Language servers run on your own machine as background processes, so your code is not sent anywhere. Because they need those processes, they run in the desktop app only. In the browser, the hints in the table above still work.
91+
92+
Extensions can add language servers for more languages. Each one gets its own on and off setting automatically, see [Language Servers](#language-servers) below.
93+
94+
:::note JavaScript type checking
95+
By default, JavaScript files get completion, docs, and navigation, but not full type checking. This matches what other editors do. To also get type errors and unused variable warnings in plain `.js` files, add `"checkJs": true` to your project's `jsconfig.json`, or put a `// @ts-check` comment at the top of the file.
96+
:::
97+
98+
## Settings
99+
100+
You can turn every part of this on or off from your preferences file. See [Editing Preferences](/docs/editing-text#editing-preferences) to learn how to open and edit it. Preferences files get code hints too, so `Ctrl + Space` works while you edit them.
101+
102+
### General
103+
104+
| Setting | Default | What it does |
105+
|---|---|---|
106+
| `showCodeHints` | `true` | The master switch. Set it to `false` to turn off all code hint popups. |
107+
| `showCodeHintDocs` | `true` | Set to `false` to hide the documentation popup shown beside code hints. |
108+
| `showParameterHints` | `true` | Set to `false` to turn off the parameter hint popup, including `Ctrl + Shift + Space`. |
109+
| `insertHintOnTab` | `true` | Set to `false` if you don't want `Tab` to insert the selected hint. `Enter` still works. |
110+
| `maxCodeHints` | `50` | How many suggestions the popup shows at once. |
111+
112+
### Per-Language Hints
113+
114+
Turn hints off for one language and keep the rest:
115+
116+
| Setting | Default | What it controls |
117+
|---|---|---|
118+
| `codehint.TagHints` | `true` | HTML tag hints |
119+
| `codehint.AttrHints` | `true` | HTML attribute hints |
120+
| `codehint.SpecialCharHints` | `true` | HTML entity hints |
121+
| `codehint.CssPropHints` | `true` | CSS, LESS, and SCSS property and value hints |
122+
| `codehint.SVGHints` | `true` | SVG hints |
123+
| `codehint.JSHints` | `true` | JavaScript hints |
124+
| `codehint.UrlCodeHints` | `true` | File path and URL hints |
125+
| `codehint.PrefHints` | `true` | Hints in Phoenix Code settings files |
126+
127+
### Language Servers
128+
129+
Each language server has its own switch. Turning one off stops it right away, so completion, docs, parameter hints, jump to definition, and error checking for that language all stop, and any simpler built-in checker takes over. Turning it back on restarts the server. You don't need to restart the app.
130+
131+
| Setting | Default | What it controls |
132+
|---|---|---|
133+
| `codeIntelligence.typescript` | `true` | JavaScript and TypeScript code intelligence |
134+
| `codeIntelligence.json` | `true` | JSON code intelligence |
135+
| `codeIntelligence.php` | `true` | PHP code intelligence. Set to `false` before you open a PHP file and the server is never downloaded. |
136+
| `codeIntelligence.python` | `true` | Python code intelligence. Set to `false` before you open a Python file and the server is never downloaded. |
137+
| `codeIntelligence.<id>` | `true` | Any language server added by an extension gets its own setting. Look for the `codeIntelligence.` prefix in the default preferences file to see what is available. |
138+
139+
### Examples
140+
141+
Turn off the popups but keep error checking:
142+
143+
```json
144+
{
145+
"showCodeHints": false,
146+
"showParameterHints": false
147+
}
148+
```
149+
150+
Keep the hints, but make them quieter:
151+
152+
```json
153+
{
154+
"showCodeHintDocs": false,
155+
"maxCodeHints": 20
156+
}
157+
```
158+
159+
### Settings for One Project
160+
161+
To change a setting for a single project only, create a `.phcode.json` file in the project folder and put the same settings in it. Project settings win over your global ones.
162+
163+
For example, to turn off JavaScript and TypeScript code intelligence in one project:
164+
165+
```json
166+
{
167+
"codeIntelligence.typescript": false
168+
}
169+
```
170+
171+
## Troubleshooting
172+
173+
#### Q. Why don't I see any code hints?
174+
175+
Check that `showCodeHints` is not set to `false`, both in your preferences file and in the project's `.phcode.json`.
176+
177+
#### Q. Why do HTML and CSS hints work, but JavaScript feels basic or JSON validation is missing?
178+
179+
Those come from language servers, so they need the desktop app. If you are already on the desktop app, check that `codeIntelligence.typescript` and `codeIntelligence.json` are not set to `false`.
180+
181+
#### Q. Why don't I see parameter hints inside a function call?
182+
183+
Check `showParameterHints`. Parameter hints come from a language server, so they also need the desktop app and that language's `codeIntelligence.*` setting turned on.
184+
185+
#### Q. Why are unused variables in my `.js` file not flagged?
186+
187+
Plain JavaScript is not type-checked by default. Add `"checkJs": true` to `jsconfig.json`, or put a `// @ts-check` comment at the top of the file.
188+
189+
#### Q. How do I stop `Tab` from inserting a hint?
190+
191+
Set `insertHintOnTab` to `false`. `Enter` still inserts the selected hint.

0 commit comments

Comments
 (0)