The folder structure
Any development work needs some organised plans.In my project I am up files in a new folder starts with creating folder and files before coding for web development, in my case it looks like this.
Customizing and Plugins in Visual code
Changing default Settings in order to customize visual studio code is easy.To do that, I go to bottom left in settings, I choose
font-size to be large enough to see clearly so I chose it
18px, You may choose different depending on your needs. The
tabs-size 2 instead of default of 4, and word wrap to yes.
Installing plugins from Extensions Marketplace
Common shortcuts and buttons
- Shift-Alt-DOWN which copies whole line down
- CTRL-D which selects similar tags in between lines
- CTRL-B hide sidebar
- CTRL-p search files or Alt-Tab
- CTRL-R to browse between folders
- Shift-CTRL-p opens control pallete for shortcuts keys or settings project workspace or any plugins.
- Go Live button to open live server
- Watch Sass to enable watch sass to convert to css
Pulling together files for build
I usually setup a app folder for sass files and dist folder for style-sheets file. The live sass compiler compiles the sass files and generate the
style.css in dist folder. The app folder contains style.sass as main sass file which pulls together other sass partial files like
_mixins.sass, typography.sass and other sass files.The _debugging in google chrome is very helpful to see if the final style.css file is working.
These settings help me a lot to get started, I hope It helps someone to learn using the tools and get started in the journey. All the best.
Top comments (0)