# VSCode (Visual Studio Code)

- You may use VSCode to code your Java & Springboot programs in coming weeks!
- Visual Studio Code is a lightweight but powerful source code editor which runs on your desktop and is available for Windows, macOS and Linux.
- If you have programming background and want to use "IntelliJ IDEA" instead of VSCode, it's fine, just an IDE. But I would still recommend you to try VSCode, and feel how lightweight it is.
## 4.1 Install VSCode from Official Site
- [VScode Download](https://code.visualstudio.com/download) - Mac OS 10.11 +
- Be aware of "apple" or "intel" chip

- After downloading and install it.
- Move to Application.

## 4.2 Install 'code' shell command (Optional)
- Launch VScode.app, ==shift+command+p==, type "install code" to execute the shell command

[Result check] Then, you will find "code" is placed in ==/usr/local/bin==
Next time you want launch the VSCode, just simply type "code ." in terminal (iTerm). (i.e. There is a space between code and .)

## 4.3 Extensions
- Explorer / Search / Extensions are common functions in VScode. Put it in the menu bar on the left hand side of VSCode. (right click and select)

- Extensions in VSCode help it become an integrated IDE with powerful functions, like color themes/ syntax management/ icon setting/ text color for different file types. All of those features enable you to code much more easily in VSCode.

You can install all of the extensions below:
- ==Auto Import==
- ==Auto Rename Tag==
- ==Console Ninja==
- ==ES7 React/Redux/Styled-components snippets==
- ==ESLint==
- ==Language Support for Java(TM) by Red Hat==
- ==Extension Pack for Java== (Install this, the other 4 Java extensions will be installed automatically)
- ==Maven for Java==
- ==HTML to CSS autocompletion==
- ==JSON Crack==
- ==Debugger for Java==
- ==Project Manager for Java==
- ==Test Runner for Java==
- ==Ayu - file/folder logo==
- ==One Dark Pro - themes (One Dark Pro Darker)==
- ==Spring Initializr Java Support==
- ==Spring Boot Tools==
- ==Spring Boot Dashboard==
- ==Lombok Annotations Support for VS Code==
- ==XML==
- ==YAML==
- ==SQL Beautify==
- ==Dependency Analytics==
- ==Markdown Preview Enhanced==
- ==Prettier - Code formatter==

---

## 4.4 Code Formatter/ settings.json/ key shortcut
### Step 1: VSCode general setting - settings.json
- In VSCode, press ==shift+command+p==, type "open settings json" and select "Open Settings(JSON)".
- Overwrite your settings.json by
[settings.json - Windows](https://hackmd.io/@oscarlo/settingWindows)
[settings.json - MacOS](https://hackmd.io/@oscarlo/setupMac)


[Result]

### Step 2: VSCode Code Formatter - googlestyle.xml
CodeFormatter helps you auto-format your code to align maven checkstyle/pmd plugin.
- From github laptop-setup, download the [googlestyle.xml](https://hackmd.io/@oscarlo/googlestyle) into the folder ~/.vscode


- In VSCode, ==shift+command+p==, type "open settings json" and select "Open Settings(JSON)".
- As you have downloaded it to ==~/.vscode/googlestyle.xml==, just update this path to java.format.settings.url

- Double Check "lineSplit" to 80 and "comment.line_length" to 200.

### Step 3: VSCode keyboard shortcut - keybindings.json
- In VSCode, ==shift+command+p==, type "keyboard shortcuts json" & select "Open Keyboard Shortcut(JSON)"

- You can find the setup file for "Keyboard Shortcuts (JSON)" in github
[keybindings.json - MacOS](https://hackmd.io/@oscarlo/shortcutMac)
[keybindings.json - Windows](https://hackmd.io/@oscarlo/shortcutWindows)
- Copy the file content to the above keybindings.json file.
These are the shortcuts that you would frequently use:

- ==shift+cmd+f==: Auto format the code
- ==shift+cmd+o== : Organize java Imports, remove unused Imports
- ==shift+cmd+k== : Restart VSCode

[Result]
- To let the above configurations take effect, you have to restart the VSCode (you can just ==shift+cmd+k==)