Table of Content:
- Assumptions = הנחות יסוד
- Snippets list
- Extenstions list
- Extensions list - with details & description
- Running this project (hint: don't)
- Want to add an extention?
- The command pallette (opened with
ctrl+shift+p) has all commands (command that are bind to keyboard shortcuts and commands that are not) - The extensions can be opened with
ctrl+shift+x - Intellisense is vs-code's completion menu that tries to complete your sentence (- your line of code)
Notice the snippets.md file for vscode user-configured snippets.
- IntelliCode
- Code Spell Checker
- Live Share
- TabOut
- To
- GitLens
- Git Graph
- GitHub Pull Requests and Issues
- File Utils
- javascript console utils
- Auto Add Brackets in String Interpolation
- Auto rename tag
- ES7 React/.../React-Native Snippet
- Better comments
- Color Highlight
- Indent rainbow
- Bookmarks
- Split HTML attributes
- Copy Relative Path and Line Numbers
- Bracket Peek
- Svg Preview
- Theme by language
- CSS peak
- Inline Parameters for VSCode
- Paste JSON as Code
- Color Assist
- JSON Trailing Comma Trimmer
- Bracketeer
- Azure Databases (for MongoDB)
- Twoslash Query Comments
- Pretty TypeScript Errors
- Error Lens
- Quokka
- Emojies Intellisense (Emojisense)
- Image Preview
The names here are the exact names of the extensions in the vscode's extensions marketplace (
ctrl+shift+xin vscode)
Comes from Microsoft.
Adds intellisense which is created from data of millions of users. it guesses good...
https://marketplace.visualstudio.com/items?itemName=VisualStudioExptTeam.vscodeintellicode
Will add a curly underline sign on words that are not spelled correctly. Helps prevent "typo"s
VERY SUGGESTED
(even for english speakers)
I once wrote a short doc about a certain function, and at the end I noticed (thanks to this extension) that I mis-spelled the word "function" three times, in THREE different ways in one paragraph.
https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker
To see other's vscode on your vscode.
Enables you to quickly collaborate with a friend on the same code without the need to sync code or to configure the same development tools, settings, or environment.
- Instead of looking at code from one computer on a small screen - share the code from the one computer to the other and view the same code on different screens/computers.
- If you have a different theme in vscode, while live-sharing: each person will see the files in the theme that's in their vscode
https://code.visualstudio.com/blogs/2017/11/15/live-share
Use the tab key to get out of quotes, brackets, etc.
e.g if this: | is your cursor and you're here: someFunc(value|). Without the extension, you need to press the right-arrow key. With the extension you would also be able to press the tab key. It's very intuitive once you try it (:
https://marketplace.visualstudio.com/items?itemName=albert.TabOut
Convert any text to camelCase, to UPPER_CASE, to snake_case, to kebab-case and more
https://marketplace.visualstudio.com/items?itemName=amih90.to
Description: Supercharge Git within VS Code — Visualize code authorship at a glance via Git blame annotations and CodeLens, seamlessly navigate and explore Git repositories, gain valuable insights via rich visualizations and powerful comparison commands, and so much more
https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens
Adds a button at the bottom nav bar and on the Source Control top bar that opens the current git history (log) as a graph
https://marketplace.visualstudio.com/items?itemName=mhutchie.git-graph
If you go over Pull Requests in GitHub, this is a very suggested extension for PR review
https://marketplace.visualstudio.com/items?itemName=GitHub.vscode-pull-request-github
delete / rename / ... current file via the command pallette!
https://marketplace.visualstudio.com/items?itemName=sleistner.vscode-fileutils
Adds a keyboard shortcut (default to ctrl + shift + l) which writes: console.log().
And when a variable is selected, writes console.log(“var: “, var);.
There are several console.log extensions, you're welcome to find the one you prefer.
You can also checkout how to do this on you own, using vscode's user configured keybindings and snippets
https://marketplace.visualstudio.com/items?itemName=whtouche.vscode-js-console-utils
If you type a dollar sign ($) inside backtick brackets (``) it will add the curly brackets for you
i.e `typingHere` -> writing a $: $typingHere -> will turn into `${typingHere...}`
https://marketplace.visualstudio.com/items?itemName=aliariff.auto-add-brackets
When changing the opening html/jsx tag, the closing tag will automatically change in parallel (and vice-versa).
vscode's F2 does this, check for yourself whether you need this extension
https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag
Words or a combination of letters which you can write in your code and the VSCode Intellisense (the menu trying to complete your sentences) will provide you with options from the React Snippet library, which, when selected, will open (surprisingly) a SNIPPET.
> many combinations. Check the extension docs.
https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets
Colors your comment!
! = red, ? = blue, todo = orange, * = green, / = strike & grey.
> this extension has interesting stuff in it's settings
https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments
Colors the background of a color-code according to the color (e.g. #1464d4).
https://marketplace.visualstudio.com/items?itemName=naumovs.color-highlight
Colors indentations in your code. Can be limited to certain file types, for example it's nice to limit it to .scss files.
With keyboard shortcuts, can add/remove/go-to-next/go-to-previous/show all/... bookmarks (according to where your cursor currently is). Plus there's a list of all your bookmarks.
https://marketplace.visualstudio.com/items?itemName=alefragnani.Bookmarks
Splits html/jsx tags by attributes, so that each prop is on a new line (or the opposite: puts all attributes on the same line).
There are two similar extensions for this, the suggested one is called: 'Split HTML Attributes (Vue, React, Angular)'
https://marketplace.visualstudio.com/items?itemName=dannyconnell.split-html-attributes
Adds a keyboard shortcut (or use via the command pallette) that copied your current relative path and line number
e.g "./src/components/HomePageButton.tsx:28"
https://marketplace.visualstudio.com/items?itemName=ezforo.copy-relative-path-and-line-numbers
(TRY THIS!!!) When your cursor is on or is hovered on a closing bracket, this extension will show you what the opening bracket looks like. e.g if there's a big and scoped function and your working somewhere in the middle, it'll show you what's going on in the opening bracket your cursor (or hover) is on.
https://marketplace.visualstudio.com/items?itemName=jomeinaster.bracket-peek
... svg preview ... (right when you open a .svg file, it'll load the svg in a tab on your right)
If you want your vscode Color Theme to change per file language (e.g .js, .py).
- you'll need to set it to what you want
With the ctrl button pressed, hovering over an html/jsx className/class/id, a peek of the CSS code will appear.
Adds an inline display of the parameter names in functions.
https://marketplace.visualstudio.com/items?itemName=liamhammett.inline-parameters
Description: Copy JSON, paste as Go, TypeScript, C#, C++ and more.
https://marketplace.visualstudio.com/items?itemName=quicktype.quicktype
Using special comments, this extension will color the background of the selected scope (between the two comments).
> Opening comment: //#green, closing comment: //#
opening the command palette, this extension will give you a command which removed trailing commas (,) in JSON file (or in current JSON object)
https://marketplace.visualstudio.com/items?itemName=logerfo.json-trimmer
Change bracket type
using a keyboard shortcut or via the command pallette
https://marketplace.visualstudio.com/items?itemName=pustelto.bracketeer
Update database very easily
Allows you to see the types of different things in TypeScript by leaving a comment with ^? pointing to what you want to see
https://marketplace.visualstudio.com/items?itemName=Orta.vscode-twoslash-queries
Make TypeScript errors prettier and more human-readable in VSCode
https://marketplace.visualstudio.com/items?itemName=yoavbls.pretty-ts-errors
See errors inline as they happen, in addition to in a popup on hover.
https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens
A developer productivity tool for rapid JavaScript / TypeScript prototyping. Runtime values are updated and displayed in your IDE next to your code, as you type.
https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode
Adds suggestions and autocomplete for emoji to VS Code.
https://marketplace.visualstudio.com/items?itemName=bierner.emojisense
Shows image preview in the gutter (next to the line number) and on hover
https://marketplace.visualstudio.com/items?itemName=kisstkondoros.vscode-gutter-preview
- shell formatter (- formats bash/shell files, bcos there's no default format-document (= ctrl+shift+i) for .sh files)
- DotENV (- colors .env file content)
- Polacode (- takes nice code pictures)
- VSCode Progressive Increment (- select lines of numbers to increment all by 1 or 10 I think)
This is an example repository only, an example which will 100% crash if "npm start"ed. so don't.
It exists mainly and only for this readme.
clone/fork, make a PR from your branch into main.
- Fill me in on the extension you're planning to add to the list. (shani kehati on Slack/Email)
- The name of the extension will be identical to the extention-id.
- Add the new extension name (according to 2. ^) and description under Extensions list - with details & description
- Make sure to add both a description and the link of the extension ^ (in 3.)
- Add the new extension name (according to 2. ^) under Extenstions list
- Make sure the link you added in 5. works
- Submit the PR (: