Posts

Showing posts with the label Visual Studio Code

Donate

Debugging Quasar Framework Applications Using Visual Studio Code (VS Code) Editor

Image
Hello, I was recently assigned and trained to work on future sprints for an existing project using Quasar Framework/Vue as Front-End and ASP.NET Core API as the back-end. Given that the project has been established for a couple of years now and has been significantly updated by the developer/architect in the US, learning through this involves sharing is caring, debugging and stepping through the code itself. With the goal at hand, I did some research on how to debug Quasar projects using the Visual Studio Code editor. After a few hours, I managed to debug the application based from the provided steps below. 1. Create a launch.json file if you have not do so. To create a launch.json file, click the Debug button on the left side of the editor and click 'create a launch.json file' link. This will create a launch.json file inside .vscode folder. 2. Replace the configurations object properties in the launch.json file with the settings below. Make sure to change the port of th...

How To Install Tailwind CSS 3.0 Using Tailwind CLI And Visual Studio Code In Your Web Project

Image
Hello and Good afternoon! In this post, I will demonstrate on how to install Tailwind CSS 3.0 which is the latest version as of this writing using Tailwind CLI and Visual Studio Code Terminal. The steps presented in this article are derived solely from the documentation which is then applied to an empty web project using Visual Studio Code IDE and it's built-in terminal. This framework was introduced to me by a ex-colleague of mine who's now focused on working with the latest front-end JavaScript and CSS frameworks. According to the documentation, Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override. In a nutshell, it is a utility-first CSS framework for rapidly building custom designs. Ok enough talk and let's get down to business. 1. Create a projects folder called test-project with three subdirectories namely cs...

How To Show Or Hide node_modules Folder In Visual Studio Code Editor

Image
Good evening! After adding the node modules using 'npm i' command in a Quasar or Vue.js project, I needed to show that folder in Visual Studio Code project explorer window since it's part of the project. Some of the solutions provided was to add some json configuration in settings.json which did not work. The solution that worked for me was to alter changes in Visual Studio Code Preferences itself. To proceed, go to File -> Preferences -> Text Editor -> Files and scroll down to locate the Exclude pane. Hover to the node_modules value and click the 'Remove Exclude Item' button. After that, the node_modules folder appears in the project explorer window. Cheers!

Donate