# Using VSCode at IT Center

## What is VSCode ?

- Visual Studio Code is an Integrated Development Environment
- ... i.e. a text editor with extra steps
- Download Link: https://code.visualstudio.com/

## Before we start ...
we need
- WSL (on Windows)
- git
- python
- ssh

#### From previous presentation...

1. On repo.it.auth.gr fork it/it-ansible
2. ```git clone [e-mail]/<username>/it-ansible```
3. ```git remote add upstream [e-mail]/it/it-ansible```

or... with https*

2. ```git clone https://repo.it.auth.gr/<username>/it-ansible```
3. ```git remote add upstream https://repo.it.auth.gr/it/it-ansible```

\* but requires login on every remote operation

#### Open repo with VSCode

or ...

Open VSCode > Open Folder > Select repo directory

## Useful VSCode extensions

- `Error Lens` - Show error hints without hovering
- `GitLens` - Show git blame
- `Remote - SSH` - Open projects on remote hosts
- `Markdown Preview Enhanced` - Προεπισκόπιση markdown
- `Python` (+ setup env) - Syntax highlighting, linting, references, refactorings
- `Ansible` - Syntax highlighting and linting, autocompletions. AI suggestions with Lightspeed.
- `Better Jinja` - Combined template and underlying language highlighting.


## Example 1: documentation projects in `it-ansible` repo

Στο `it-ansible` repo φιλοξενούμε το περιεχόμενο και τον κώδικα για deployment εσωτερικών σελίδων τεκμηρίωσης αλλά και σελίδων τεκμηρίωσης για το HPC.

Ο όλος μηχανισμός βασίζεται στο `mkdocs` το οποίο μπορεί να σερβίρει ένα σύνολο σελίδων που είναι γραμμένες σε markdown ως μία στατική web σελίδα.

### Βασικά στοιχεία mkdocs

1. `mkdocs` - Markdown based static webpages
2. `mkdocs.yaml` - Κεντρικό configuration
3. `docs/**.md` - Markdown αρχεία με πληροφορίες
4. \+ assets/snippets κλπ.

### Environment Setup

# Setup venv
cd documentation
python -m venv docs.venv
. docs.venv/bin/activate
pip install --upgrade pip
pip install -r requirements.txt

# Spin up dev server
cd admin
mkdocs serve

## Example 2: Opening remote directories via ssh

- [Οδηγίες για εγκατάσταση `Remote - SSH` extension και σύνδεση σε remote host](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-ssh#installation)

## Cheat sheet

**Navigation**
- <kbd>Ctrl</kbd> + <kbd>`</kbd> - Open up terminal
- <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>P</kbd> - Open up command box
- <kbd>Ctrl</kbd> + <kbd>B</kbd> - Toggle sidebar
- <kbd>Ctrl</kbd> + <kbd>\\</kbd> - Split screen
- On terminal: `code path/to/file` - Open file in new tab

**Editor tricks**
- <kbd>Ctrl</kbd> + <kbd>S</kbd> Save, <kbd>Ctrl</kbd> + <kbd>Z</kbd> Undo, etc...
- <kbd>Ctrl</kbd> + <kbd>N</kbd> - Open up new file
- <kbd>Ctrl</kbd> + <kbd>Space</kbd> - Editor Hints
- <kbd>Alt</kbd> + <kbd>Z</kbd> - Toggle wrapping

**Things hidden in the command box (<kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>P</kbd>)**
-  `Python: Clear cache and reload window`
-  `Sort selection ascending`

<!-- 
## Environment Setup

# Create environment
python -m venv ansible.venv

# Load environment
source ansible.venv/bin/activate

# Install deps
pip install --upgrade pip
pip install -r requirements.txt

ansible-galaxy collection install -r requirements.yml
ansible-galaxy install -r requirements.yml

## Useful VSCode extensions

- `Error Lens` - Show error hints without hovering
- `GitLens` - Show git blame
- `Remote - SSH` - Open projects on remote hosts
- `Python` (+ setup env) - Syntax highlighting, linting, references, refactorings
- `Ansible` - Syntax highlighting and linting, autocompletions. AI suggestions with Lightspeed.
- `Better Jinja` - Combined template and underlying language highlighting.


## Example 1: Documentation Pages (RTFM & HPC docs)



### Πώς βλέπω το αποτέλεσμα;



### Contiuous Deployment
 -->