Skip to content

Commit c547b32

Browse files
akaromlakaroml
authored
Getting Started - Code Editing (#184)
* Getting Started - Code Editing Signed-off-by: Rome Li <[email protected]> * Fix ts/build error Signed-off-by: Rome Li <[email protected]>
1 parent acef2d6 commit c547b32

File tree

3 files changed

+119
-5
lines changed

3 files changed

+119
-5
lines changed

‎src/assets/vscode.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,10 @@ $list-group-item-padding-x: 1rem !default;
1717
$list-group-border-radius: 0 !default;
1818

1919
$font-size-base: .8rem !default;
20+
21+
$code-font-size: $font-size-base;
22+
$kbd-bg: var(--vscode-button-background) !default;
23+
$kbd-color: var(--vscode-button-foreground) !default;
2024
$pre-color: var(--vscode-textPreformat-foreground) !default;
2125

2226
$text-muted: var(--vscode-editorCodeLens-foreground) !default;

‎src/getting-started/assets/index.html‎

Lines changed: 106 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ <h1 class="font-weight-light">Java Getting Started</h1>
1919
<div class="card">
2020
<div class="card-body">
2121
<div class="row">
22-
<div class="col d-block d-md-none">
22+
<div class="col d-block">
2323
<ul class="nav nav-tabs mb-3" role="tablist">
2424
<li class="nav-item">
2525
<a class="nav-link active" id="quick-start-tab" data-toggle="tab" href="#quick-start-panel" role="tab" aria-controls="quick-start-panel" aria-selected="true" title="">Quick Start</a>
@@ -51,6 +51,8 @@ <h1 class="font-weight-light">Java Getting Started</h1>
5151
<div class="row">
5252
<div class="col">
5353
<div class="tab-content">
54+
55+
<!-- Quick Start -->
5456
<div class="tab-pane fade show active" id="quick-start-panel" role="tabpanel" aria-labelledby="quick-start-tab">
5557
<p>Welcome to Visual Studio Code!<br/>
5658
In this 1-minute tutorial, we'll show you how to create a quick-start Java program in VS Code.
@@ -101,37 +103,137 @@ <h3 class="font-weight-light">Congratulations!</h3>
101103
</p>
102104
<dl class="row mb-0" id="navigationPanel">
103105
<dt class="col-sm-3"><a href="#code-editing-tab">Code Editing</a></dt>
104-
<dd class="col-sm-9">Learn more about Refactoring, Code Completion, and Linting</dd>
106+
<dd class="col-sm-9">Learn more about Code Navigation, Refactoring, and Code Completion</dd>
105107
<dt class="col-sm-3"><a href="#debugging-tab">Debugging</a></dt>
106108
<dd class="col-sm-9">Learn more about Breakpoints, Variables, Threads, and Call Stacks</dd>
107109
<dt class="col-sm-3"><a href="#faq-tab">FAQ</a></dt>
108110
<dd class="col-sm-9">Frequently asked questions</dd>
109111
</dl>
110112
</div>
113+
114+
<!-- Files & Folders -->
111115
<div class="tab-pane fade" id="files-folders-panel" role="tabpanel" aria-labelledby="files-folders-tab">
112116
<p>How to deal with files and folders</p>
113117
</div>
118+
119+
<!-- Code Editing -->
114120
<div class="tab-pane fade" id="code-editing-panel" role="tabpanel" aria-labelledby="code-editing-tab">
115-
<p>Explore code editing features</p>
121+
<p>
122+
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.
123+
</p>
124+
<blockquote class="card-body">
125+
<h5 class="font-weight-light">Basic Editing User Guide</h5>
126+
<p class="mb-0">
127+
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.
128+
</p>
129+
</blockquote>
130+
<h3 class="font-weight-light">Code Navigation</h3>
131+
<p>
132+
Code Navigation makes it easy to understand existing codebase. Here to mention a few features that can help you navigate your code repositories.
133+
<dl class="row">
134+
<dt class="col-sm-3">Go to Definition</dt>
135+
<dd class="col-sm-9"><kbd>F12</kbd><br/>You can also hover on the symbol to preview its declaration and javadoc. To jump to the definition, hold the <kbd data-os="win">Ctrl</kbd><kbd data-os="mac">⌘</kbd> key, and click on the symbol.</dd>
136+
<dt class="col-sm-3">Go to Implementation</dt>
137+
<dd class="col-sm-9"><kbd data-os="win">Ctrl + F12</kbd><kbd data-os="mac">⌘ F12</kbd><br/>
138+
For an interface, this shows all the implementors of that interface and for abstract methods, this shows all concrete implementations of that method.</dd>
139+
<dt class="col-sm-3">Go to Type Definition</dt>
140+
<dd class="col-sm-9">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>.</dd>
141+
<dt class="col-sm-3">Find All References</dt>
142+
<dd class="col-sm-9"><kbd data-os="win">Shift + Alt + F12</kbd><kbd data-os="mac">⌥ ⇧ F12</kbd><br/>
143+
This allows you to quickly analyze the impact of your edit or the popularity of your specific method or property throughout your repository.
144+
</dd>
145+
</dl>
146+
</p>
147+
<p>
148+
The commands above will possibly take you to another file. But you can choose to stay using the peeking features below:
149+
<dl class="row">
150+
<dt class="col-sm-3">Peek Definition</dt>
151+
<dd class="col-sm-9"><kbd data-os="win">Alt + F12</kbd><kbd data-os="mac">⌥ F12</kbd></dd>
152+
<dt class="col-sm-3">Peek References</dt>
153+
<dd class="col-sm-9"><kbd data-os="win">Shift + F12</kbd><kbd data-os="mac">⇧ F12</kbd></dd>
154+
</dl>
155+
</p>
156+
<p>
157+
Last but not least, you can jump between the matching brackets back and forth:
158+
<dl class="row">
159+
<dt class="col-sm-3">Go to Bracket</dt>
160+
<dd class="col-sm-9"><kbd data-os="win">Ctrl + Shift + \</kbd><kbd data-os="mac">⇧ ⌘ \</kbd></dd>
161+
</dl>
162+
</p>
163+
<h3 class="font-weight-light">IntelliSense</h3>
164+
<p>
165+
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."
166+
</p>
167+
<p>
168+
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.
169+
</p>
170+
<blockquote class="card-body">
171+
<h5 class="font-weight-light">Trigger IntelliSense Manually</h5>
172+
<p class="mb-0">
173+
In most cases, IntelliSense is triggered automatically. You can also press <kbd data-os="win">Ctrl + Space</kbd><kbd data-os="mac">⌃ Space</kbd> 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.
174+
</p>
175+
</blockquote>
176+
<h3 class="font-weight-light">Refactoring</h3>
177+
<p>
178+
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.
179+
</p>
180+
<p>
181+
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 <kbd data-os="win">Ctrl + Shift + R</kbd><kbd data-os="mac">⌃ ⇧ R</kbd>
182+
</p>
183+
<p>
184+
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 <kbd data-os="win">Ctrl + .</kbd><kbd data-os="mac">⌘ .</kbd>.
185+
</p>
186+
<blockquote class="card-body">
187+
<h5 class="font-weight-light">More Code Actions</h5>
188+
<p>
189+
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.
190+
</p>
191+
<ul class="mb-0">
192+
<li>Organize Imports</li>
193+
<li>Override/Implement Methods</li>
194+
<li>Generate Getter and Setter</li>
195+
<li>Generate hashCode() and equals()</li>
196+
<li>Generate toString()</li>
197+
<li>Generate Constructors</li>
198+
<li>Generate Delegate Methods</li>
199+
</ul>
200+
</blockquote>
201+
<h3 class="font-weight-light">Next Steps</h3>
202+
<dl class="row mb-0" id="navigationPanel">
203+
<dt class="col-sm-3"><a href="#debugging-tab">Debugging</a></dt>
204+
<dd class="col-sm-9">Learn more about Breakpoints, Variables, Threads, and Call Stacks</dd>
205+
<dt class="col-sm-3"><a href="#faq-tab">FAQ</a></dt>
206+
<dd class="col-sm-9">Frequently asked questions</dd>
207+
</dl>
116208
</div>
209+
210+
<!-- Compile & Build -->
117211
<div class="tab-pane fade" id="compile-build-panel" role="tabpanel" aria-labelledby="compile-build-tab">
118212
<p>Understand the compile and build mechanism of the language server</p>
119213
</div>
214+
215+
<!-- Debugging -->
120216
<div class="tab-pane fade" id="debugging-panel" role="tabpanel" aria-labelledby="debugging-tab">
121217
<p>How to use the debugger</p>
122218
</div>
219+
220+
<!-- Projects & Dependencies -->
123221
<div class="tab-pane fade" id="projects-dependencies-panel" role="tabpanel" aria-labelledby="projects-dependencies-tab">
124222
<p>How to deal with projects and dependencies</p>
125223
</div>
224+
225+
<!-- Customize -->
126226
<div class="tab-pane fade" id="customize-panel" role="tabpanel" aria-labelledby="customize-tab">
127227
<p>How to customize vs code</p>
128228
</div>
229+
230+
<!-- FAQ -->
129231
<div class="tab-pane fade" id="faq-panel" role="tabpanel" aria-labelledby="faq-tab">
130232
<p>Frequently asked questions</p>
131233
</div>
132234
</div>
133235
</div>
134-
<div class="col-3 d-none d-md-block">
236+
<div class="col-3 d-none">
135237
<div class="list-group list-group-flush" role="tablist">
136238
<a class="list-group-item list-group-action active" id="quick-start-tab" data-toggle="list" href="#quick-start-panel" role="tab" aria-controls="quick-start-panel" aria-selected="true" title="">Quick Start</a>
137239
<a class="list-group-item list-group-action d-none" id="files-folders-tab" data-toggle="list" href="#files-folders-panel" role="tab" aria-controls="files-folders-panel" aria-selected="false" title="">Files & Folders</a>

‎src/getting-started/assets/index.ts‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,5 +6,13 @@ import "bootstrap/js/src/tab";
66
import * as $ from "jquery";
77

88
$("#navigationPanel a").click(e => {
9-
$($(e.target).attr("href")).tab('show');
9+
($($(e.target).attr("href")||"") as any).tab("show");
1010
});
11+
12+
let os = "win";
13+
if (navigator.platform.toLowerCase().indexOf("mac") === 0) {
14+
os = "mac";
15+
}
16+
17+
const osToHide = os === "win" ? "mac" : "win";
18+
$(`kbd[data-os=${osToHide}]`).hide();

0 commit comments

Comments
 (0)