Customize workspace colors in VSCode
VSCode give you a lot of flexibility to override nearly every setting they offer. This come in handing for many reasons which users are finding daily. One of those very reasons I came across today; using title bar and status bar colors to visually differentiate my open VSCode windows.
Adapting your workspace color settings
First things first you will need to learn to explore the VSCode settings. You can open the settings in a number of ways.
ctrl + ,cmd + ,File -> Preferences -> Settings
After you have opened the settings you can search for setting by typing in the search box. For this exercise type color customization and a few results are going to come back. Before you select one make sure you have selected Workspace just below the search box. By selecting Workspace you are indicating that you are only wanting to make the setting changes for the current workspace and not your entire user.
Next you will select Edit in settings.json in the result titled Workbench: Color Customizations.
Time to now add in the settings. You will likely be left with the following starting point or something similar:
{
"folder": [
],
"settings": {
}
}
Add your customizations to the settings section. Below is an example:
{
"folder": [
],
"settings": {
"workbench.colorCustomizations": {
"statusBar.background": "#053b00",
"titleBar.activeBackground": "#053b00",
"titleBar.activeForeground": "#cccccc"
},
"window.titleBarStyle": "custom"
}
}
To explain, the settings we are updating above are the color of the bottom status bar background color
"statusBar.background": "#053b00",
and the window title bar background color and the text color.
"titleBar.activeBackground": "#053b00",
"titleBar.activeForeground": "#cccccc"
The last change we made was enabling the titleBar setting change which is saying we are using the "window.titleBarStyle": "custom" setting. Now this will not make the change to the title bar just yet.
For the title bar setting change to take for your current workspace you must change your user window setting to use the custom option rather than the native. To do this go back to the settings page ctrl + , or other way depending on your operation system. Then in the search type titleBarStyle and ensure you have selected User instead of Workspace. The setting change is a dropdown which should be selected native. Change it to custom and let VSCode reload.
You now have your custom setting enabled for your workspace. Congrats!
Inspiration and Credits
One of the best features of @code is the ability to change the window top bar color. Makes it so easy to identify the correct project. I always have 3-4 windows open at the same time!
— flavio (@flaviocopes) March 31, 2020
NestJS: VSCode debugger setup
Debugging is inevitable for all developers and when you get the point that your code is not doing what you would expect VSCode is definitely built for TypeScript and thus perfect for NestJS. Get started by ensuring you have VSCode installed and open your project in VSCode. For the purpose of this article install the Nest TypeScript starter scaffolding. $ npm i -g @nestjs/cli $ nest new my-app Create a launch. Continue reading
NestJS: Getting started
What is Nest? This is the next post in a series of articles as I explore NodeJS. If you need to go back one and get Node setup and running check this one out: NodeJS: Getting started. First, what is Nest? It is essentially a Node.js framework for building efficient server side applications. The really cool part about it is it uses TypeScript. Nest also incorporates elements of Object Oriented Programming, Functional Programming, and Functional Reactive Programming. Continue reading
NodeJS: Getting started
Installing NodeJS
First things first; download Node. You have a few options to install and all options are outlined on Node’s download page. I would recommend the LTS version unless you feel that you need close to latest as possible. Installation is generally really easy and in most case a point and click away. You do have options for installation through package managers but keep in mind those don’t always deliver the latest and greatest.
What about running more than one NodeJS version
Multiple version of Node may be needed for different projects you are working on. This is not always the easiest to maintain until Node Version Manager (NVM) entered the market. NVM is a really cool package that allows you to manage multiple version of Node on a single machine.
You can install NVM on most developer system with exception of Windows unless you are running WSL.
Install and Using
Installation instructions are kept up-to-date on the NVM GitHub page so I strongly recommend you going to their site to get the latest installation instructions but here is an outline of the process at the time of writing this article.
Install using either cURL or Wget:
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash
or
wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash
You can take their word for the safety of these install scripts but I always recommend to inspect a script coming from the internet before running it locally.
The installation is pretty simple. The script clones the nvm repository to ~/.nvm, and attempts to add the source lines from the snippet below to the correct profile file (~/.bash_profile, ~/.zshrc, ~/.profile, or ~/.bashrc).
export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm
Next you will install a version of Node and use it.
To install the latest LTS run:
nvm install --lts
To install the latest Node version:
nvm install node
Next use it:
npm use --lts
or
npm use node
Test it out
Back to Node. You should now have Node installed and have a version set to use if you chose NVM.
To test out your installation you are going to create a file called app.js and use a code snippet from the NodeJS docs.
> app.js
const http = require('http');
const hostname = '127.0.0.1';
const port = 3000;
const server = http.createServer((req, res) => {
res.statusCode = 200;
res.setHeader('Content-Type', 'text/plain');
res.end('Hello World');
});
server.listen(port, hostname, () => {
console.log(`Server running at http://${hostname}:${port}/`);
});
> Start the app up with node app.js:
> The result of the app in the browser should look like:
