Hey guys, Cedric here.I'm a Front End Developer based in Nairobi, Kenya. I'm constantly working on my Design game with web development. I love the concept of Integrating photography and web design and therefore in the meantime if there is any photographer out there that feels they need a web developer to grow their brand, feel free to reach out to me. Sooner, I'll get a camera and create my own content. One day at a time.
Anyway, enough of me ... Today I'll show you how some few tips and tricks I have learned so far on customizing your Interface especially for beginner devs who are trying to find their way around VS Code.
THEMES
The first thing you will need to customize is definitely the theme. Every dev needs to pick the right theme and colors for their tags and syntax. This is important to get you to enjoy what you do. I have to admit, opening up my editor really excites me just by how it looks and feels.
To get your terminal looking right and in the right mood for development, go to settings and search for 'Themes'. Here you will find a list of themes that you can choose from. If these still are not enough to choose from, here is a link that will help you find more options for your editor; VS Code Themes.
GITHUB SETUP
Working with code every day and more importantly with other developers will require you to put up your code on Github for ease of access and collaboration by other devs. Github is an open-source version control system that lets developers share code with others and also allows them to make changes to the code. VS Code allows you to fetch, edit, commit and push code back to Github with a few easy steps. To set it up, go to settings, search for Github and scroll down to "Git Authentification". Click on the option and authorize Github. Once this is done, you will be able to access Github functionality from the navigation bar on the left end of your screen.
GITLENS
An additional tool to help with your source control is GitLens.GitLens supercharges the Git capabilities built into Visual Studio Code. It helps you to visualize code authorship at a glance via Git blame annotations and code lens, seamlessly navigate and explore Git repositories, gain valuable insights via powerful comparison commands, and so much more. To learn more about GitLens have a look at GitLens
EXTENSIONS
VS Code Extensions let you add tools such as "HTML Snippets" which autocomplete HTML tags once you start typing, languages such as Python and JavaScript, and debuggers such as "Debugger for Firefox".These extensions will help you a great deal with your development workflow. To add Extensions to your interface, click the 'Manage' icon at the left bottom corner and head to Extensions. Here, you can search for any Extensions that will suit your development environment and another cool feature about VS Code is that they will recommend to you a whole load of Extensions that will make your work much simpler and organized.
FIND AND REPLACE
Another really cool feature that has helped me a lot is the 'Find And Replace' feature. Take a scenario where you are working on a project and as you begin, you name your main file, 'home.html'. As you keep developing the project, you obviously link this file to other files hence there are a couple of 'home.html's in different files. Now, say you want to host your project on Github Pages. As per custom GitHub pages rules, your project has to have an 'index.html' file at the base of the repository for your site to go live. This means you have to replace all the 'home.html's with 'index.html' including the name of the file itself.
Here is where our tool comes in handy. By using this tool, you can simply find 'home.html' across every file and replace that instance with 'index.html'. I know, it saves you a lot of time that would have gone into making the changes individually on each file.
SPLIT EDITOR
Just as the name goes, enabling this will split your editor's workspace vertically giving you the power to simultaneously work on more than one file. The future is now, isn't it?
I have come to the end of my list, for now. I hope this helps you in simplifying your workflow as you get to work with VS Code. As I also keep developing, I will occasionally update this article with it's I find helpful.
Top comments (0)