Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/dooderstem/my-vsc-setup

My Visual Studio Code setup
https://github.com/dooderstem/my-vsc-setup

extensions productivity-tools visual-studio-code vscode vscode-extensions

Last synced: about 1 month ago
JSON representation

My Visual Studio Code setup

Host: GitHub
URL: https://github.com/dooderstem/my-vsc-setup
Owner: dooderstem
Created: 2022-06-23T07:36:48.000Z (over 2 years ago)
Default Branch: master
Last Pushed: 2022-12-15T21:08:43.000Z (about 2 years ago)
Last Synced: 2024-10-13T09:05:37.106Z (2 months ago)
Topics: extensions, productivity-tools, visual-studio-code, vscode, vscode-extensions
Homepage:
Size: 32.2 KB
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml

Awesome Lists containing this project

README

        




 



Getting started with Visual Studio Code and/or looking for some new plugins to fit seamlessly with your workflow? Well, look no further! Below, I have included some of the most useful and recommended extensions that are completely free to install and use.

![Visual Studio Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3503be2ok9ccfsapmk18.png)

## Theme/Icons

- Current theme:

  - [GitHub Dark Mode ♥️](https://marketplace.visualstudio.com/items?itemName=GitHub.github-vscode-theme)

- Icons:

  - [Material Icon Theme](https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme)

- Font:

  - [Fira Code](https://github.com/tonsky/FiraCode)

## Workflow

- [Auto Close Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag)

  - Automatically add HTML/XML close tag

- [Auto Rename Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag)

  - Automatically rename paired HTML/XML tag

- [Foam Research](https://marketplace.visualstudio.com/items?itemName=foam.foam-vscode)

  - note-taking tool that lives within VS Code, which means you can pair it with your favorite extensions for a great editing experience.

- [Better Comments](https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments)

  - Comments extension will help you create more human-friendly comments in your code.

- [CodeSwing](https://marketplace.visualstudio.com/items?itemName=codespaces-Contrib.codeswing)

  - It's like having the magic of a traditional web playground (e.g. CodePen, JSFiddle), but available directly from your highly-personalized editor.

- [Code Runner](https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner)

  - Run code snippet or code file for multiple languages: **C, C++, Java, JavaScript, PHP, Python, Perl,** e.c.t.

- [advanced-new-file](https://marketplace.visualstudio.com/items?itemName=patbenatar.advanced-new-file)

  - Create files anywhere in your workspace from the keyboard

- [Error Lens](https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens)

  - Error Lens turbo-charges language diagnostic features

- [ESDoc MDN](https://marketplace.visualstudio.com/items?itemName=samundrak.esdoc-mdn)

  - This extension lets you quickly bring up helpful MDN documentation in the editor by typing `//mdn [object.property];` for example.

- [Live Preview](https://marketplace.visualstudio.com/items?itemName=ms-vscode.live-server)

  - Hosts a local server in your workspace for you to preview your webpages on in VSC!

- [HTML CSS Support](https://marketplace.visualstudio.com/items?itemName=ecmel.vscode-html-css)

  - HTML `id` and `class` attribute completion for Visual Studio Code.

- [JavaScript (ES6) code snippets](https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets)

	- Code snippets for JavaScript in ES6 syntax (ex: clg + tab -> console.log())

- [Todo Tree](https://marketplace.visualstudio.com/items?itemName=Gruntfuggly.todo-tree)

	- Show TODO, FIXME, etc. comment tags in a tree view	  

- [Magick Image Reader](https://marketplace.visualstudio.com/items?itemName=elypia.magick-image-reader)

	- Uses ImageMagick to add read-only views of over 100 image formats in Visual Studio Code.

	  

### GitHub

- [Gist](https://marketplace.visualstudio.com/items?itemName=kenhowardpdx.vscode-gist)

  - Access your GitHub Gists within Visual Studio Code.

- [GistPad](https://marketplace.visualstudio.com/items?itemName=vsls-contrib.gistfs)

  - GistPad is a Visual Studio Code extension that allows you to edit GitHub [Gists](https://gist.github.com/ "https://gist.github.com/") and repositories from the comfort of your favorite editor

- [Git History](https://marketplace.visualstudio.com/items?itemName=donjayamanne.githistory)

  - View git log, file history, compare branches or commits

- [gitignore](https://marketplace.visualstudio.com/items?itemName=codezombiech.gitignore)

  - Lets you pull .gitignore templates from [https://github.com/github/gitignore](https://github.com/github/gitignore)

- [GitLens](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens)

  - Supercharge Git within VS Code

- [Open in GitHub, Bitbucket, Gitlab, VisualStudio.com](https://marketplace.visualstudio.com/items?itemName=ziyasal.vscode-open-in-github)

  - Open in GitHub, Bitbucket, Gitlab, VisualStudio.com

## Style/Formatting

- [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)

  - Integrates ESLint JS

- [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)

  - Automatically format javascript, JSON, CSS, Sass, and HTML files.

- [Color Highlight](https://marketplace.visualstudio.com/items?itemName=naumovs.color-highlight)

  - This extension styles css/web colors found in your document.

## Useful/Extra

- [Import Cost](https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost)

  - Display inline the size of the required/imported package

- [VS Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare)

  - Collaborative editing, debugging, and more inside VS Code

- [npm Intellisense](https://marketplace.visualstudio.com/items?itemName=christian-kohler.npm-intellisense)

  - Autocompletes npm modules in import/require statements

- [Path Intellisense](https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense)

  - Autocompletes filenames

- [Image Preview](https://marketplace.visualstudio.com/items?itemName=kisstkondoros.vscode-gutter-preview)

  - Shows image preview in the gutter and on hover

- [FontSize ShortCuts](https://marketplace.visualstudio.com/items?itemName=fosshaas.fontsize-shortcuts)

  - Change the font size with keyboard shortcuts.

- [WakaTime](https://marketplace.visualstudio.com/items?itemName=WakaTime.vscode-wakatime)

  - Metrics, insights, and time tracking automatically generated from your programming activity.

- [indent-rainbow](https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow)

  - Makes indentation easier to read

- [Discord Rich Presence](https://marketplace.visualstudio.com/items?itemName=LeonardSSH.vscord)

	- Show what you're working on in Discord!

- [Lorem ipsum](https://marketplace.visualstudio.com/items?itemName=Tyriar.lorem-ipsum)

	- A tiny VS Code extension made up of a few commands that generate and insert lorem ipsum text into a text file.

- [vscode-faker](https://marketplace.visualstudio.com/items?itemName=deerawan.vscode-faker)

	- Generate fake data for name, address, lorem ipsum, commerce and much more




See my full list of extensions [here](https://github.com/DoctorBraingoop/my-vsc-setup/blob/master/.vscode/extensions.json)