Skip to content

Commit 4543539

Browse files
authored
ref: adopt vscode's styling in beginner tips page (#831)
* apply vscode-webview-ui-toolkit on beginner tips page Signed-off-by: Yan Zhang <[email protected]> * add entry in webpack config Signed-off-by: Yan Zhang <[email protected]> * add copyrights Signed-off-by: Yan Zhang <[email protected]> * use consistent titles Signed-off-by: Yan Zhang <[email protected]> * address comments Signed-off-by: Yan Zhang <[email protected]> * address comments Signed-off-by: Yan Zhang <[email protected]>
1 parent 5411e0a commit 4543539

24 files changed

+668
-529
lines changed

package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -212,7 +212,7 @@
212212
{
213213
"command": "java.gettingStarted",
214214
"category": "Java",
215-
"title": "Beginner Tips"
215+
"title": "Tips for Beginners"
216216
},
217217
{
218218
"command": "java.extGuide",
Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
// Copyright (c) Microsoft Corporation. All rights reserved.
2+
// Licensed under the MIT license.
3+
4+
import "./style.scss";
5+
import { provideReactWrapper } from '@microsoft/fast-react-wrapper';
6+
import * as webviewUI from "@vscode/webview-ui-toolkit";
7+
import React from 'react';
8+
import CodeEditingPanel from "./tabs/CodeEditingPanel";
9+
import DebuggingPanel from "./tabs/DebuggingPanel";
10+
import FaqPanel from "./tabs/FaqPanel";
11+
import QuickStartPanel from "./tabs/QuickStartPanel";
12+
13+
const { wrap } = provideReactWrapper(React);
14+
15+
const PanelTab = wrap(webviewUI.VSCodePanelTab);
16+
const Panels = wrap(webviewUI.VSCodePanels);
17+
const PanelView = wrap(webviewUI.VSCodePanelView);
18+
19+
export default function BeginnerTips() {
20+
21+
return (
22+
<div className="container mt-5 mb-5">
23+
<div className="header">
24+
<h1 className="font-weight-light">Tips for Beginners</h1>
25+
</div>
26+
<div className="row">
27+
<Panels activeid="tab-1">
28+
<PanelTab id="tab-1">Quick Start</PanelTab>
29+
<PanelTab id="tab-2">Code Editing</PanelTab>
30+
<PanelTab id="tab-3">Debugging</PanelTab>
31+
<PanelTab id="tab-4">FAQ</PanelTab>
32+
<PanelView id="view-1">
33+
<QuickStartPanel />
34+
</PanelView>
35+
<PanelView id="view-2">
36+
<CodeEditingPanel />
37+
</PanelView>
38+
<PanelView id="view-3">
39+
<DebuggingPanel />
40+
</PanelView>
41+
<PanelView id="view-4">
42+
<FaqPanel />
43+
</PanelView>
44+
</Panels>
45+
</div>
46+
</div>
47+
);
48+
49+
}

src/beginner-tips/assets/index.tsx

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
// Copyright (c) Microsoft Corporation. All rights reserved.
2+
// Licensed under the MIT license.
3+
4+
import * as React from 'react';
5+
import * as ReactDOM from 'react-dom';
6+
import BeginnerTips from "./BeginnerTips";
7+
8+
ReactDOM.render(
9+
<BeginnerTips />,
10+
document.getElementById('root') as HTMLElement
11+
);

src/beginner-tips/assets/style.scss

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
// Copyright (c) Microsoft Corporation. All rights reserved.
2+
// Licensed under the MIT license.
3+
4+
#root {
5+
display: flex;
6+
justify-content: center;
7+
8+
div.container {
9+
display: flex;
10+
flex-direction: column;
11+
min-height: 100vh;
12+
max-width: 680px;
13+
}
14+
}
15+
16+
blockquote.card-body {
17+
margin-top: 2rem;
18+
margin: 0 7px 0 5px;
19+
padding: 2px 10px 2px 10px;
20+
border-left: 5px solid;
21+
border-color: rgba(0, 122, 204, 0.5);
22+
background: rgba(127, 127, 127, 0.1);
23+
}
24+
25+
.font-weight-bold {
26+
font-weight: bold;
27+
}
28+
29+
.font-weight-light {
30+
font-weight: lighter;
31+
}
32+
33+
a {
34+
text-decoration: none;
35+
}
36+
37+
h5 {
38+
font-size: 1rem;
39+
margin-top: 5px;
40+
margin-bottom: 0;
41+
}
42+
43+
code {
44+
font-family: var(--vscode-editor-font-family);
45+
}
46+
47+
@import "../../../node_modules/@vscode/codicons/dist/codicon.css";
48+
@import "../../../node_modules/@vscode/codicons/dist/codicon.ttf";
Lines changed: 126 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
1+
// Copyright (c) Microsoft Corporation. All rights reserved.
2+
// Licensed under the MIT license.
3+
4+
import { GenerateHeaderOptions } from "@microsoft/fast-foundation";
5+
import { provideReactWrapper } from '@microsoft/fast-react-wrapper';
6+
import * as webviewUI from "@vscode/webview-ui-toolkit";
7+
import React from 'react';
8+
const isMac: boolean = navigator.platform.toLowerCase().indexOf("darwin") === 0;
9+
const { wrap } = provideReactWrapper(React);
10+
const DataGrid = wrap(webviewUI.VSCodeDataGrid);
11+
const DataRow = wrap(webviewUI.VSCodeDataGridRow);
12+
const DataCell = wrap(webviewUI.VSCodeDataGridCell);
13+
14+
export default function CodeEditingPanel() {
15+
const controlKey = !isMac ? <kbd data-os="win">Ctrl</kbd> : <kbd data-os="mac"></kbd>;
16+
const f12Key = !isMac ? <kbd data-os="win">Ctrl + F12</kbd>: <kbd data-os="mac">⌘ F12</kbd>;
17+
const shiftAltF12 = !isMac ? <kbd data-os="win">Shift + Alt + F12</kbd> : <kbd data-os="mac">⌥ ⇧ F12</kbd>;
18+
const altF12Key = !isMac ? <kbd data-os="win">Alt + F12</kbd> : <kbd data-os="mac">⌥ F12</kbd>;
19+
const shiftF12 = !isMac ? <kbd data-os="win">Shift + F12</kbd>: <kbd data-os="mac">⇧ F12</kbd>;
20+
const ctrlShiftSlash = !isMac ? <kbd data-os="win">Ctrl + Shift + \</kbd>:<kbd data-os="mac">⇧ ⌘ \</kbd>;
21+
const ctrlSpace = !isMac ? <kbd data-os="win">Ctrl + Space</kbd>:<kbd data-os="mac">⌃ Space</kbd>;
22+
const ctrlShiftR = !isMac ? <kbd data-os="win">Ctrl + Shift + R</kbd>:<kbd data-os="mac">⌃ ⇧ R</kbd> ;
23+
const ctrlDot = !isMac ? <kbd data-os="win">Ctrl + .</kbd>:<kbd data-os="mac">⌘ .</kbd>;
24+
25+
return (
26+
<div className="tab-pane fade" id="code-editing-panel" role="tabpanel" aria-labelledby="code-editing-tab">
27+
<p>
28+
VS Code Java is backed by a full Java language server and it understands Java code. Because of that, you get features like Code Navigation, IntelliSense, Refactoring, etc. This is important when your projects get bigger and more complex. Now let's further look at the code editing experience.
29+
</p>
30+
<blockquote className="card-body">
31+
<h5 className="font-weight-light">Basic Editing User Guide</h5>
32+
<p className="mb-0">
33+
To make the most of VS Code, we strongly recommend reading the <a href="https://code.visualstudio.com/docs/editor/codebasics">Basic Editing</a> user guide. You'll get to know cool tricks about multi-select, formatting, indentation, folding, and much more.
34+
</p>
35+
</blockquote>
36+
<h2 className="font-weight-light">Code Navigation</h2>
37+
<div>
38+
<p>
39+
Code Navigation makes it easy to understand existing codebase. Here to mention a few features that can help you navigate your code repositories.
40+
</p>
41+
<DataGrid generateHeader={GenerateHeaderOptions.none} gridTemplateColumns="1fr 3fr">
42+
<DataRow key={1}>
43+
<DataCell className="font-weight-bold" gridColumn="1">Go to Definition</DataCell>
44+
<DataCell gridColumn="2"><kbd>F12</kbd><br />You can also hover on the symbol to preview its declaration and javadoc. To jump to the definition, hold the {controlKey} key, and click on the symbol.</DataCell>
45+
</DataRow>
46+
<DataRow key={2}>
47+
<DataCell className="font-weight-bold" gridColumn="1">Go to Implementation</DataCell>
48+
<DataCell gridColumn="2">{f12Key}<br />For an interface, this shows all the implementors of that interface and for abstract methods, this shows all concrete implementations of that method.</DataCell>
49+
</DataRow>
50+
<DataRow key={3}>
51+
<DataCell className="font-weight-bold" gridColumn="1">Go to Type Definition</DataCell>
52+
<DataCell gridColumn="2">This one allows you to go to the definition of the type of the symbol. For example, you have a class member <code>someString</code>, "Go to Definition" will take you to the definition of <code>someString</code> while "Go to <strong>Type</strong> Definition" will take you to the definition of <code>String</code>.</DataCell>
53+
</DataRow>
54+
<DataRow key={4}>
55+
<DataCell className="font-weight-bold" gridColumn="1">Find All References</DataCell>
56+
<DataCell gridColumn="2">{shiftAltF12}<br />This allows you to quickly analyze the impact of your edit or the popularity of your specific method or property throughout your repository.</DataCell>
57+
</DataRow>
58+
</DataGrid>
59+
</div>
60+
<div>
61+
<p>
62+
The commands above will possibly take you to another file. But you can choose to stay using the peeking features below:
63+
</p>
64+
<DataGrid generateHeader={GenerateHeaderOptions.none} gridTemplateColumns="1fr 3fr">
65+
<DataRow key={1}>
66+
<DataCell className="font-weight-bold" gridColumn="1">Peek Definition</DataCell>
67+
<DataCell gridColumn="2">{altF12Key}</DataCell>
68+
</DataRow>
69+
<DataRow key={2}>
70+
<DataCell className="font-weight-bold" gridColumn="1">Peek References</DataCell>
71+
<DataCell gridColumn="2">{shiftF12}</DataCell>
72+
</DataRow>
73+
</DataGrid>
74+
</div>
75+
<div>
76+
<p> Last but not least, you can jump between the matching brackets back and forth: </p>
77+
<DataGrid generateHeader={GenerateHeaderOptions.none} gridTemplateColumns="1fr 3fr">
78+
<DataRow key={1}>
79+
<DataCell className="font-weight-bold" gridColumn="1">Go to Bracket</DataCell>
80+
<DataCell gridColumn="2">{ctrlShiftSlash}</DataCell>
81+
</DataRow>
82+
</DataGrid>
83+
</div>
84+
<h2 className="font-weight-light">IntelliSense</h2>
85+
<p>
86+
IntelliSense is a general term for a variety of code editing features including: code completion, parameter info, quick info, and member lists. IntelliSense features are sometimes called by other names such as "code completion", "content assist", and "code hinting."
87+
</p>
88+
<p>
89+
IntelliSense works as you type. For example, when you try to invoke some member of an object, a list of all the members is popped up for you to choose from. If you continue typing characters, the list of members (variables, methods, etc.) is filtered to only include members containing your typed characters. Pressing <kbd>Tab</kbd> or <kbd>Enter</kbd> will insert the selected member.
90+
</p>
91+
<blockquote className="card-body">
92+
<h5 className="font-weight-light">Trigger IntelliSense Manually</h5>
93+
<p className="mb-0">
94+
In most cases, IntelliSense is triggered automatically. You can also press {ctrlSpace} to do it manually. For example, when you're trying to invoke a member function and want to see the parameter info, this will do the magic.
95+
</p>
96+
</blockquote>
97+
<h2 className="font-weight-light">Refactoring</h2>
98+
<p>
99+
VS Code Java provides essential refactoring features and makes it productive to modify larger codebase. The most frequently used one is <strong>Rename</strong>. It's so popular that a dedicated hot key <kbd>F2</kbd> is assigned to it. When you rename a symbol, all its references are also renamed.
100+
</p>
101+
<p>
102+
There are more refactoring features like <strong>Extract</strong>, <strong>Inline</strong>, etc. The availability changes corresponding to the current cursor position. All available features are packed in to the <strong>Refactor</strong> context menu. And you can also pop the list by pressing {ctrlShiftR}
103+
</p>
104+
<p>
105+
You may also notice the lightbulb near the cursor. It indicates that some <strong>Code Actions</strong> are available. In VS Code, Code Actions can provide both refactorings and Quick Fixes for detected issues. To show the full list of available actions, click the lightbulb or press {ctrlDot}
106+
</p>
107+
<blockquote className="card-body">
108+
<h5 className="font-weight-light">More Code Actions</h5>
109+
<p>
110+
There are other code actions that are not limited to the cursor position. They are grouped into the <strong>Source Action</strong> context menu. Here's a list of them.
111+
</p>
112+
<ul className="mb-0">
113+
<li>Organize Imports</li>
114+
<li>Override/Implement Methods</li>
115+
<li>Generate Getter and Setter</li>
116+
<li>Generate hashCode() and equals()</li>
117+
<li>Generate toString()</li>
118+
<li>Generate Constructors</li>
119+
<li>Generate Delegate Methods</li>
120+
</ul>
121+
</blockquote>
122+
</div>
123+
124+
);
125+
126+
}

0 commit comments

Comments
 (0)