Mes extensions Vs-code
Tags: vscode, french
Published: 2021-05-01 12:33:22

# Thème et visualisation

### Afterdark
- https://marketplace.visualstudio.com/items?itemName=ssmi.after-dark
- Thème complet 
- ![react-example](https://github.com/sssmi/after-dark/raw/master/react-example.png)

### Vscode simpler Icons with Angular
- https://marketplace.visualstudio.com/items?itemName=davidbabel.vscode-simpler-icons
- Pack d’icône 
- ![preview](https://github.com/DavidBabel/vscode-simpler-icons/raw/master/images/angular-preview.png)

### Jet brains Font
- https://www.jetbrains.com/lp/mono/
- Font utilisant les ligatures 
- ![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1619219018729/JEUJ7m3Gg.png)
 


# Aide de code

## Visuel

### Highlight Matching Tag
- https://marketplace.visualstudio.com/items?itemName=vincaslt.highlight-matching-tag
- change le style d'affichages des pairs de Tags, avec pleins d'options pour le configurer à souhait
- ![dark](https://images2.imgbox.com/85/d6/qRBWNUgu_o.png)


### Better comments
- https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments
- ![Annotated code](https://github.com/aaron-bond/better-comments/raw/master/images/better-comments.PNG)

### Todo tree
- https://marketplace.visualstudio.com/items?itemName=Gruntfuggly.todo-tree
- cherche les todo dans le code et les affiche dans son onglet dédié
- ![screenshot](https://raw.githubusercontent.com/Gruntfuggly/todo-tree/master/resources/screenshot.png)


### indent-rainbow
- https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow
- Affiche un arc-en-ciel pour mieux voir les indentations
- ![Example](https://raw.githubusercontent.com/oderwat/vscode-indent-rainbow/master/assets/example.png)
  
 ~~### Bracket pari colorizer 2~~
 ~~https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2~~
maintenant inclus dans vscode

### Trailing spaces
  - https://marketplace.visualstudio.com/items?itemName=shardulm94.trailing-spaces
  - Affiche en rouge les espaces de fin
  - ![img](https://shardulm94.gallerycdn.vsassets.io/extensions/shardulm94/trailing-spaces/0.3.1/1554790489790/Microsoft.VisualStudio.Services.Icons.Default)

### svg viewer
- https://marketplace.visualstudio.com/items?itemName=cssho.vscode-svgviewer
- Affiche les images svg
- ![palette](https://github.com/cssho/vscode-svgviewer/raw/master/img/from_context.gif)


### Turbo console log
- https://marketplace.visualstudio.com/items?itemName=ChakrounAnas.turbo-console-log
- ajoute le raccourci `ctl + alt +l` pour faire des console.log rapide avec le numéro de la ligne
- ![alt text](https://image.ibb.co/dysw7p/insert_log_message.gif)

### CodeSnap
- https://marketplace.visualstudio.com/items?itemName=adpyke.codesnap
- Permet  de faire des images du code  dans le presse-papier ou le sauvegarde sur le disque dur.
- ![Example 1](https://raw.githubusercontent.com/kufii/CodeSnap/master/examples/material_operator-mono.png)


## Genéral

### Visual Studio IntelliCode
- https://marketplace.visualstudio.com/items?itemName=VisualStudioExptTeam.vscodeintellicode
- Intelligence artificiel aidant à coder
- ![Python AI-enhanced IntelliSense](https://go.microsoft.com/fwlink/?linkid=2006041)
  


### Angular essentials pack
-  https://marketplace.visualstudio.com/items?itemName=johnpapa.angular-essentials
- pack avec plusieurs extensions regroupé par John Papa

### code spell checker 
- correcteur d'orthographe
- https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker
- dictionnaire français
- https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker-french

### Css Peek
- https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek
- Affiche la propriété CSS, d'une classe HTML ou d'aller dans le fichier .CSS où il est définie 
- ![working](https://github.com/pranaygp/vscode-css-peek/raw/master/readme/working.gif)

### Prettier - Code formatter
- https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
- formate le code et l'indente automatiquement, une option existe pour formater automatique à la sauvegarde du fichier

### Eslint
- https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
- intègre eslint dans vscode


### tslint
- linter pour typescript
- https://marketplace.visualstudio.com/items?itemName=ms-vscode.vscode-typescript-tslint-plugin


### IntelliSense for CSS class names in HTML
- propose de nom de classe déjà utilisé dans le projet
- ![img](https://i.imgur.com/5crMfTj.gif)
- https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion

### Live Sass Compiler
- https://marketplace.visualstudio.com/items?itemName=ritwickdey.live-sass
- compile le SASS et génère le fichier CSS
- ![App Preview](https://github.com/ritwickdey/vscode-live-sass-compiler/raw/master/images/Screenshot/AnimatedPreview.gif)


### Live Server
- https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
- lance un serveur de développement pour des pages statique ou dynamique
- ![Live Server Demo VSCode](https://github.com/ritwickdey/vscode-live-server/raw/master/images/Screenshot/vscode-live-server-animated-demo.gif)

### npm
- Indique si les paquets dans `package.json` sont bien installé
- https://marketplace.visualstudio.com/items?itemName=eg2.vscode-npm-script

### npm intellisense
- https://marketplace.visualstudio.com/items?itemName=christian-kohler.npm-intellisense
- Autocomplétion dans la définition d'import de paquet dans les fichiers `js`
- ![auto complete](https://github.com/ChristianKohler/NpmIntellisense/raw/master/images/auto_complete.gif)

### Snake Trail
- https://marketplace.visualstudio.com/items?itemName=richie5um2.snake-trail
- Affiche une couleur suivant le curseur aidant sa visibilité
- ![Example](https://github.com/richie5um/vscode-snake-trail/raw/master/resources/usage.gif)

### Sql Server (mssql)
- https://marketplace.visualstudio.com/items?itemName=ms-mssql.mssql
- se connecte  à une base de donné mssql, de microsoft Azure et l'affiche
- ![demo](https://github.com/Microsoft/vscode-mssql/raw/main/images/mssql-demo.gif)

## Git
### Git graph
- https://marketplace.visualstudio.com/items?itemName=mhutchie.git-graph
- Affiche  les commits et les branches de Git
- ![Recording of Git Graph](https://github.com/mhutchie/vscode-git-graph/raw/master/resources/demo.gif)

### Git lens
- https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens
- plusieurs outils pour git, dont la comparaison de fichier avec le précédent commit
- ![Revision Navigation](https://raw.githubusercontent.com/eamodio/vscode-gitlens/main/images/docs/revision-navigation.gif)


## Autres

### Joplin-vscode-plugin
- https://marketplace.visualstudio.com/items?itemName=rxliuli.joplin-vscode-plugin
- Affiche nos notes Joplin dans vscode, il faut avoir la version bureau de Joplin et activer le web clipper (plus d'info dans la doc)


### Discord pressence
- https://marketplace.visualstudio.com/items?itemName=icrawl.discord-vscode
- Affiche dans le status de discord le fichier édité dans vscode 

### Code time
- https://marketplace.visualstudio.com/items?itemName=softwaredotcom.swdc-vscode
-  Monitor le temps de passé à coder
- ![Code Time features for VS Code](https://assets.software.com/readme/code-time/vscode/features-2.5.0.png)


### WakaTime
- https://marketplace.visualstudio.com/items?itemName=WakaTime.vscode-wakatime
- idem que Code time
- ![Project Overview](https://github.com/wakatime/vscode-wakatime/raw/master/images/Screen-Shot-2016-03-21.png)


### Music Time for Spotify
  - https://marketplace.visualstudio.com/items?itemName=softwaredotcom.music-time
- Contrôler spotify depuis vscode
- ![Music Time features](https://assets.software.com/readme/music-time/vscode/features-2.1.15.png)