FabioRosado
a month ago

Compile Sass files to CSS on the fly

If you use VSCode and prefer to use sass instead of plain old css. You can install the Live Sass Compiler from the extension marketplace. After you installed the extension all you need to do is press a button on the bottom of the window of vscode and watch your sass files.

The extension will automatically turn all your files into a single css file (this includes all the ones you import within your sass files).

The bar looks like this:

sass compiler

owenconti
a month ago

5 keyboard shortcuts to navigate your code faster

Here are 5 quick keyboard shortcuts I recommend you setup to help you navigate your code faster!

  • Delete line(s): CMD + D
  • Move line(s): OPTION + UP or DOWN ARROW
  • Go to line: CMD + L
  • Go back/forward: CMD + [ or ]
  • Start/end of word: OPTION + LEFT or RIGHT ARROW

Bonus:

  • Highlight characters with start/end of word: SHIFT + OPTION + LEFT or RIGHT ARROW

Full article available here: https://owenconti.com/tips/5-keyboard-shortcuts-to-navigate-your-code-faster/

ahmadawais
a month ago

[VSCODE] Switch back from Settings UI to Settings.JSON | VSCode.pro

OneDevMinute

[Part of the https://VSCode.pro course] — VSCode recently stopped displaying the split of VSCode default settings and users settings along with the settings.json file — hacker in me doesn't like the new UI Settings so — I moved them back.

P.S. If you like my work, feel free to share it, like it, and subscribe to my YouTube channel.

Peace! ✌️

Video Transcript: (CLICK TO EXPAND!)

🎸 (MUSIC PLAYING) While I was working with VSCode.pro course, one thing happened. Visual Studio kept updating every single month. Now if you press COMMAND (⌘) + COMMA (,) or if you press COMMAND (⌘) + SHIFT (⇧) + P and search for settings and open the settings, you get a shiny new UI, the user interface for settings area. But the hacker in me doesn't really like it. And throughout this course, I'll be teaching you to configure all the different settings through this particular file "settings.json" So, how about we go ahead and make this our default settings for the time being. Press COMMAND (⌘) + SHIFT (⇧) + P search for settings And click on Open Settings. Now search for Settings again. And as you can see Workbench does settings that determine which setting editor to be used by default is set to UI. I want you to go ahead and set it to json. As soon as you do it, this bar basically indicates that this setting has been updated. After setting your Settings Editor to JSON Go down here, or search for "Use Split JSON" E.g. "Settings Use Split JSON" – and you'll meet this particular setting Here I want you to go ahead and checkmark this setting It should be check marked so that you can see a split of All of your default settings as well as your "settings.json" file E.g. now if I press COMMAND (⌘) + COMMA (,) Your settings will look like this! You will have the "Default User Settings" on the left and your "User Settings" on the right. This is very important for this course because in this entire course I'll be doing all of the settings and searching for them through this area. Now if I go back and press COMMAND (⌘) + COMMA (,) The "settings.json" file opens up. That is exactly what we want for this course But if you would still like to access the UI for Settings, what can do is press COMMAND (⌘) + SHIFT (⇧) + P Search for Open Settings — and here it is Open Settings UI. If you click it, you'll be in the UI of the settings. But we can set up a keyboard shortcut for that as well. To do that, you can either go from here to the keyboard shortcuts Or you can press COMMAND (⌘) + K then COMMAND (⌘) + S And access these keyboard shortcuts. Search for open settings — this is the setting we want. Open Settings UI Click on the plus icon (+) and let's type COMMAND (⌘) + PERIOD (.) Press [ENTER] Now if you press COMMAND (⌘) + PERIOD (.) you will be opening up the UI settings. And if you will press COMMAND (⌘) + COMMA (,) you will be opening up the normal JSON settings. Let's try it out. I am going to press COMMAND (⌘) + COMMA (,) and it opens up the settings.json file. I am going to press COMMAND (⌘) + PERIOD (.) and there you have it. A new shiny UI of settings. So that's about it. You can obviously set a different keyboard shortcut here but I tend to go with this one. 👍 Tweet your progress with #VSCODEpro @MrAhmadAwais

deamme
a month ago

VSCode - Code editor

Probably the best code editor out there. It has tons of extensions and is just a joy to work with.

Best theme to have is: https://vscodethemes.com/e/dracula-theme.theme-dracula.

Best font to code with: https://github.com/tonsky/FiraCode

Highlight colors in your code: https://github.com/tonsky/FiraCode

My VSCode settings (very opinionated you probably shouldn't copy everything ): https://github.com/deamme/gatsby-starter-prismic-resume/blob/master/vscode.json

Enjoy an amazing setup!

Load More