# VS Code Configurations

<!-- TOC -->

- [VS Code Configurations](#vs-code-configurations)
	- [code command](#code-command)
	- [setting.json](#settingjson)
		- [editor.formatOnSave](#editorformatonsave)
		- [editor.renderWhitespace](#editorrenderwhitespace)
		- [editor.mouseWheelZoom](#editormousewheelzoom)
		- [Python Per directory](#python-per-directory)
		- [Python Global Configuration](#python-global-configuration)
		- [Ruby Tag Jump](#ruby-tag-jump)
	- [Gist](#gist)
	- [Display Language](#display-language)
	- [Code Sync Settings](#code-sync-settings)
	- [Editor Config](#editor-config)
	- [Prefer Go to Source Definition](#prefer-go-to-source-definition)
	- [Vim Plugin](#vim-plugin)
		- [Press, Hold, and Key Repeating](#press-hold-and-key-repeating)
	- [Workbench](#workbench)
	- [Workspaces](#workspaces)
	- [Extension](#extension)
	- [Color Theme](#color-theme)
		- [Dracula](#dracula)
	- [Keybindings Mac](#keybindings-mac)
		- [How to change keybindings Shortcut](#how-to-change-keybindings-shortcut)
	- [Commands Shift+Cmd+P](#commands-shiftcmdp)
	- [Debug UI](#debug-ui)
- [VS Code on WSL](#vs-code-on-wsl)
	- [Install npm](#install-npm)

<!-- /TOC -->

## code command

```
# open code with current directory
code .

# open the current directory in the most recently used code window
code -r .

# create a new window
code -n

# change the language
code --locale=es

# open diff editor
code --diff <file1> <file2>

# open file at specific line and column <file:line[:character]>
code --goto package.json:10:5

# disable all extensions
code --disable-extensions .

# when reading from stdin, so you immediately get back to the terminal prompt.
# https://code.visualstudio.com/updates/v1_86#_do-no-enforce-wait-when-reading-from-stdin-from-the-command-line

curl https://httpbin.org/json | code -
```

ref: https://code.visualstudio.com/docs/getstarted/tips-and-tricks



## setting.json

- Mac: `$HOME/Library/Application Support/Code/User/settings.json`
- Linux: `$HOME/.config/Code/User/settings.json`
- Windows: `%APPDATA%\Code\User\settings.json`

You can open user settings from UI:

```
- Cmt + p
- type: "> user settings"
```

### editor.formatOnSave

```json
"editor.formatOnSave": true,   // Formating in saving
"editor.formatOnType": true,   // Formating in typing
"editor.formatOnPaste": true,  // Formating in pasting
```

Usually setting this in selecting like this as this has a big impact:

```json
  "[go]": {
    "editor.formatOnSave": true
  },
```

### editor.renderWhitespace

display space as "･"

```json
"editor.renderWhitespace": "[none|all|boundary]"
```

- `none`: don't show whitespace
- `all`:  show all whitespace with "･" <<<< my preference
- `display`: only the beginning and end of lines


### editor.mouseWheelZoom

`Ctrl + Scroll` allows to scale in/out only the editor's characters (NOT whole editor's characters)

```json
"editor.mouseWheelZoom": true
```


### Python Per directory

```
cd YOURDIR
ln -s ~/dev/venv3.6 .env
```

### Python Global Configuration

As instructed in [Using Python environments in VS Code](https://code.visualstudio.com/docs/python/environments#_environment-variable-definitions-file), Add `python.pythonPath` to your global settings.

- `Code` > `Preferences` > `Settings`
- Add `Python` keyword in Search Settings box
- Click `Edit in settins.json`

Add `python.pythonPath` to `User Settings`

```json
{
    "window.zoomLevel": 1,
    "python.jediEnabled": false,
    "python.pythonPath": "/Users/yoichika/dev/venv3.6/bin/python",   <<<<
    "editor.autoIndent": false,
    "editor.wordWrap": "on",
    "workbench.settings.settingsSearchTocBehavior": "hide",
    "go.gopath": "/Users/yoichika/dev/go",
    "go.formatOnSave": true,
    "azureFunctions.showProjectWarning": false
}
```

Or you can set Python Interpreter using Command Palette: `Python: Select Interpreter`

### Ruby Tag Jump

- Open setting, and type `ruby`
- Change Intellisense: false -> rubyLocate
- Restart

ref: https://www.fuwamaki.com/article/404

## Gist

- install [Gist extension](https://marketplace.visualstudio.com/items?itemName=kenhowardpdx.vscode-gist)
- Click GIST in footer menu in VS Code and select profile to initialize the profile selector
- Add PAT for GIST

## Display Language

- Open control panel, and select preferred lang in `Configure Display Language`
- Restart vscode

## Code Sync Settings

Settings Sync is officially supported. Please refer to [this](https://code.visualstudio.com/docs/editor/settings-sync).

The following are deprecated configuration steps.

---

- Install [Settings Sync](https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync)
- By following instructions of Settings sync, Get `Github Personal Access Token`
- For Uploading
  - (Initial only) Shift + Alt + U => Input your `Personal Access Token`: this will generate `Gist ID`
  - Shift + Alt + U => Upload Settings
- For downloading
  - (Initial only) Shift + Alt + D => Input your `Personal Access Token` and `Gist ID`
  - Shift + Alt + D => Download Settings

> Configuration files:

```sh
# Mac
## Main Confiuguration for Settings Sync
$HOME/Library/Application Support/Code/User/syncLocalSettings.json
## Gist ID is put in settings.json
$HOME/Library/Application Support/Code/User/settings.json
```


## Editor Config

- <https://editorconfig.org/>

```
vi ~/.editorconfig
```

## Prefer Go to Source Definition

Enable the following options in settings:

- JavaScript: Prefer Go to Source Definition
- TypeScript: Prefer Go to Source Definition

## Vim Plugin

### Press, Hold, and Key Repeating 
For MacOS, to enable key-repeating execute the following in your Terminal and restart VS Code:

```bash
# For VS Code
defaults write com.microsoft.VSCode ApplePressAndHoldEnabled -bool false
# For VS Code Insider
defaults write com.microsoft.VSCodeInsiders ApplePressAndHoldEnabled -bool false
# do this Just in case
defaults write NSGlobalDomain ApplePressAndHoldEnabled -bool false

# If necessary, reset global default
defaults delete -g ApplePressAndHoldEnabled
```

Then, `quit and start VSCode`, not simply reloading VSCode window

references

- [How do I press and hold a key and have it repeat in VSCode?](https://stackoverflow.com/questions/39972335/how-do-i-press-and-hold-a-key-and-have-it-repeat-in-vscode)
- <https://marketplace.visualstudio.com/items?itemName=vscodevim.vim>

## Workbench

- tree indent:

  ```
  Settings > Workbench > Tree (default indent 8 up to 40)
  ```
  or 
  ```
  "workbench.tree.indent": 8 (default = 8, but 20+ is recommended) 
  ```

## Workspaces

- Multi-root workspaces: <https://code.visualstudio.com/docs/editor/multi-root-workspaces>
- Manage multiple worspaces (projects): use an extension, [Project Manager](https://marketplace.visualstudio.com/items?itemName=alefragnani.project-manager)

## Extension

- Whitespace+
  - Whitespace+ Toggle => show all tabs + space
- Settings Sync
- Editor Config
- vim
- Docker
- GitLens
- Live Share
- Go
- Protobuf Support
- C#
- npm Intellisense
- VS Code for Node.js
- Python
- Settings Sync
- Kubernetes
- YAML
- Markdown All in One
- Markdown Preview Enhanced
- Markdown TOC
- Monnlight
- REST Client
- GitHub Codespaces
- Task Explorer

## Color Theme

### Dracula

<https://draculatheme.com/visual-studio-code/>

```sh
git clone https://github.com/dracula/visual-studio-code.git ~/.vscode/extensions/theme-dracula
cd ~/.vscode/extensions/theme-dracula
npm install
npm run build
```

## Keybindings (Mac)

- Show Shortcuts: `Cmd+k, Cmd+s`
- Relaod: `Cmd+R`
- Command Palette: `Cmd + B`
- Slidebar On/Off: `Cmd + B`
- Window Split (Vertical): `Cmd + \`
- Window Split (Horizontal): `Cmd + k, Cmd + \`
- Widonw Close: `Cmd + w`
- Window move: `Cmd + 1,2,3,4...`
- Change language mode: `Cmd + K, M`
- Keyword Search:
  - Search text in a file: `Cmd + F`
  - Search files in explorer: `Cmd + Shift + F`
  - Search files in explorer (with include condition): `Cmd + Shift + J`  (ex. search only from *.js)
- Multi-Cursor ([see](http://mugi1.hateblo.jp/entry/2018/12/11/215808)):
  - `Cmt + d`: select the same text (repeat `Cmd + d` to inc # of selected text)
  - `Cmt + Shift + L`: select all the same text
  - `Option + Click` to create cursor in any position
- Terminals ([ref](https://code.visualstudio.com/docs/editor/integrated-terminal))
  - ⌥⌘← Focus Previous Pane
  - ⌥⌘→ Focus Next Pane
  - ⌃⌘← Resize Pane Left
  - ⌃⌘→ Resize Pane Right
  - ⌃⌘↑ Resize Pane Up
  - ⌃⌘↓ Resize Pane Down
- Multi-line actions
  - comment out with `//` or `#`: select lines ->  `Cmd + /`


### How to change keybindings (Shortcut)

Open Command Panel with `Shift + Cmd + P`
then type `shortcut` and select `Preference: Open Keyboard Shortcuts`

## Commands (Shift+Cmd+P)

- Reload Window: `Reload Window`
- Screencast Mode: `Toogle Screencast Mode`

## Debug UI

- Add Break point
- Send Request


![Screenshot 2023-01-27 at 13 23 41](https://user-images.githubusercontent.com/82332/215009877-67e30710-dea9-496a-96d9-0753cc6d6295.png)


# VS Code on WSL

## Install npm

You need npm to start with VS Code on WLS. For npm installation, see [this](https://gist.github.com/noygal/6b7b1796a92d70e24e35f94b53722219)

```bash
sudo apt-get update
sudo apt-get upgrade
sudo apt-get install build-essential
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.0/install.sh | bash
```

`.zshrc`に次を追加

```
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
```

Install Node.js

```
# Now you can install the latest the latest LTS version of node:
nvm install --lts
# so next time you'll login to ubuntu you'll need to run the command:
nvm use --lts
# You can also add this command to the end of your .bash_profile file:
echo "nvm use --lts" >> ~/.zshrc
```