Archie  Clayton

Archie Clayton

1556284326

How I configure VSCode for Everything?

#visual-studio #javascript

What is GEEK

Buddha Community

Dylan Iqbal

1556286280

Recently, I was at the Boryspil Airport, Ukraine, working on a blog article when suddenly my VSCode stops working. It actually got crashed! Not once, but twice under 30 minutes. Some of the content was autosaved, some of it was gone forever…

I was frustrated at first as to why it had to crash at that moment! Next, after re-opening the editor, I was angry with myself for I had to write some of the stuff again that didn’t get saved.

Also, at times, previous this experience, it did feel that I have bloat of extensions that I am not using since I have stopped working with some of the frameworks in recent months (example, Angular).

What did I do? After none of the emotions helped, I had to find a way to cope better. On a network that was not so crappy, but did have to login every 30 minutes due to WIFI restrictions, I re-installed VSCode.

VSCode uses Electron as its base that enables it to be cross-platform and work on macOS, Windows, and Linux. It is built using Node.js and has the complete support for any JavaScript developer. Now, that’s what I call win-win. It’s fast as compared to the previous editors (Atom) and IDE (Webstorm) I have used.

Themes

First thing I did was to install themes that I am habitual seeing all day. I like my editor to be charming and appealing to the eye. Thus, I use the following themes for different purposes.

  • FairyFloss (most of the time, cause I love purple backgrounds!)
  • Dracula Official (I used this with my iTerm setup a lot)
  • Night Owl (just try something new)
  • Material-Icon-Theme (for file icons)

Configuring VSCode

Next, I changed a few things that I could remember from my previous settings.

  • FairyFloss (most of the time, cause I love purple backgrounds!)
  • Dracula Official (I used this with my iTerm setup a lot)
  • Night Owl (just try something new)
  • Material-Icon-Theme (for file icons)
"editor.tabSize": 2,
"emmet.includeLanguages": {
    "html": "html",
    "javascript": "javascriptreact"
},
"workbench.iconTheme": "material-icon-theme",
"files.autoSave": "afterDelay",
"files.autoSaveDelay": 5000,
"terminal.external.osxExec": "iTerm.app",
"terminal.integrated.shell.osx": "zsh",
"editor.wordWrap": "on",
"editor.formatOnSave": true,
"editor.formatOnPaste": true,
"editor.minimap.enabled": false

Extensions I use

Next step for me is to make this editor work like a charm with the help of some awesomely maintained and available for free extensions.

  • FairyFloss (most of the time, cause I love purple backgrounds!)
  • Dracula Official (I used this with my iTerm setup a lot)
  • Night Owl (just try something new)
  • Material-Icon-Theme (for file icons)

With prettier, I like to use my own set of configuration as described below.

"prettier.jsxSingleQuote": true,
"prettier.printWidth": 100,
"prettier.semi": false,
"prettier.useTabs": true,
"prettier.tabWidth": 2,


Conclusion

That’s the setup I use now for my JavaScript, NodeJS, React and React Native work. I hope you enjoyed reading this post.

Thanks for reading ❤

If you liked this post, share it with all of your programming buddies!

Follow me on Facebook | Twitter

Learn More

VS Code extensions you may not have heard of before

Getting Started with Python in Visual Studio Code

VS Code: C++ Development with Visual Studio Code

Build Productive Python Web Apps with VS Code and Azure

Visual Studio 2019 Tips and Tricks

Visual Studio Code – The First Second

Get Productive with Python in Visual Studio Code

*Originally published on *https://dev.to

Building My First VSCode Extension

It’s a fantastic journey of how much a person can learn when he tries to do new things. That is pretty much the same feeling I had when I started writing my first VSCode Theme extension (Flutter Light Theme). It was amazing how much control we can have on its look and feel. Below are some of the things that I found easier while developing/deploying my theme.

  • Creating the VSCode Extension ( Predefined Yeoman generator )
  • Testing your Extension
  • Updating colors
  • Publishing the extension

#vscode-theme #vscode-extension #programming #vscode

Fannie  Zemlak

Fannie Zemlak

1594129920

Top VSCode keyboard shortcuts every developer should know

Here’s a list of some essential VSCode keyboard shortcuts that will save you at least a few minutes every day.

  • Move line up/down -_option + up/down_

  • Jump to Matching Brackets -_shift + command + \_

  • Replace next similar word -_option + command + f_

  • Copy line up/down -_shift + option + Up/Down_

  • Code Fold -_command + option + [_
  • Code Unfold -_command + option + ]_

  • Select next match -_command + d_

  • Deselect next match -_command + u_

  • Open and close sidebar -_command + b_

  • Add cursor above/below -command + option + up/down

  • Add multiple cursors -option + mouse click

  • Delete line -shift + command + k or command + delete

  • Open current file in finder/explorer -command + k then r

  • Zen Mode -_command k__ then __z_

  • Comment Code -command + /

  • Add cursor to all selected lines -shift + option + drag mouse

  • Split-screen -command + \
  • Toggle Split-screen horizontal and vertical views -command + option + o

Leave a clap or a few hundred claps :) if you like my list. If there is a shortcut that you use regularly and is not on the list, add it in the comments below.

#vscode-productivity #vscode #vscode-keyboard-shortcuts

Verdie  Murray

Verdie Murray

1638045000

How to Match Colourful Bracket Pairs WITHOUT Extensions in VSCode

You don't need the bracket pair coloriser extension with #VSCode anymore as its built in. Lets take a look at how you can enable it and why you should

https://code.visualstudio.com/updates/v1_60#_high-performance-bracket-pair-colorization

#vscode 

Verdie  Murray

Verdie Murray

1638030420

How to Select and Use Latest TypeScript 4.4 in VSCode (1 Minutes)

Answers the following questions:
How to select and use latest #TypeScript 4.4 in #VSCode
Why use TypeScript template index signatures

#vscode #typescript #javascript 

3 Awesome Themes for Visual Studio Code

Visual Studio Code is by far one of the most popular code editors for web, mobile, and hardware developers. More than 2,600,000 people use VS Code every month, up by over 160% in the last year.

Here are three awesome **VS Code **themes you can start using today.

#vscode #web-development #vscode-extensions #vscode-themes #ui