# Series: Visual Studio Code - Tips & Tricks (5 Parts) — Luca Del Puppo > Complete 5-part technical series "Visual Studio Code - Tips & Tricks" by Luca Del Puppo (https://delpuppo.net/blog/series/vs-code-tips-and-tricks/). Ordered chronologically from Part 1 to Part 5. - **Canonical Series URL**: https://delpuppo.net/blog/series/vs-code-tips-and-tricks/ - **Hashnode Series Mirror**: https://blog.delpuppo.net/series/vs-code-tips-and-tricks - **Blog Index LLMs.txt**: https://delpuppo.net/blog/llms.txt ## Series Curriculum 1. [Part 1: Visual Studio Code - Tips & Tricks - Command Palette and its friends](https://delpuppo.net/blog/vs-code-tips-and-tricks/visual-studio-code-tips-tricks-command-palette-and-its-friends/) (Feb 21, 2022) — Visual Studio Code is one of the best code editors in this moment. Its Palette has many features but... ([Article LLMs.txt](https://delpuppo.net/blog/vs-code-tips-and-tricks/visual-studio-code-tips-tricks-command-palette-and-its-friends/llms.txt)) 2. [Part 2: Visual Studio Code - Tips & Tricks - Snippets](https://delpuppo.net/blog/vs-code-tips-and-tricks/visual-studio-code-tips-tricks-snippets/) (Mar 21, 2022) — If you used to adopt Visual Studio in the past probably you already know something about... ([Article LLMs.txt](https://delpuppo.net/blog/vs-code-tips-and-tricks/visual-studio-code-tips-tricks-snippets/llms.txt)) 3. [Part 3: Working with Github from your best editor](https://delpuppo.net/blog/vs-code-tips-and-tricks/working-with-github-from-your-best-editor/) (Nov 3, 2022) — In my daily work routine, many times I have to switch from VsCode and Github to create a PR, review a... ([Article LLMs.txt](https://delpuppo.net/blog/vs-code-tips-and-tricks/working-with-github-from-your-best-editor/llms.txt)) 4. [Part 4: Working with GitHub Actions from your best editor](https://delpuppo.net/blog/vs-code-tips-and-tricks/working-with-github-actions-from-your-best-editor/) (Nov 8, 2022) — Hi folks, today I'm going to speak about another cool VsCode Extension. In many projects, I love... ([Article LLMs.txt](https://delpuppo.net/blog/vs-code-tips-and-tricks/working-with-github-actions-from-your-best-editor/llms.txt)) 5. [Part 5: Visual Studio Code - Tips & Tricks - Profile](https://delpuppo.net/blog/vs-code-tips-and-tricks/visual-studio-code-tips-tricks-profile/) (Jan 10, 2023) — Intro During my daily work, sometimes I have to switch between different projects: backend... ([Article LLMs.txt](https://delpuppo.net/blog/vs-code-tips-and-tricks/visual-studio-code-tips-tricks-profile/llms.txt)) --- ## Full Series Content ### Part 1 of 5: Visual Studio Code - Tips & Tricks - Command Palette and its friends - **URL**: https://delpuppo.net/blog/vs-code-tips-and-tricks/visual-studio-code-tips-tricks-command-palette-and-its-friends/ - **Published**: Feb 21, 2022 - **Tags**: vscode, productivity, programming, webdev Visual Studio Code is one of the best code editors in this moment. Its Palette has many features but probably not all devs know them. Let’s look at the most important, to improve your productivity and use less the mouse. ## Command Palette The Command Palette is the bar that shows up when you use the short-cut `⇧+⌘+P` (on window `Ctrl+Shift+P`). ![Command Palette](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/za16c2phv0e1316bgl0u.gif) This Palette enables you to run commands. Which commands? That depends. VsCode already has many commands out-off the box, like: save file, format file, git commands and many others. But Vscode doesn't end its power here. It allows you to create new ones, and see them in this list of possibile commands. More extensions use this feature to expose their commands and enable their features. The commands typically are grouped by topic, for instance, all the commands that work with the terminal have the prefix Terminal, those that work with git have the prefix Git and so on. This "rule" is a common best practice to improve the search of the commands. It's important to remember that this Palette is working with the command if its first character is `>`. This char indicates you that the palette is in command mode. It goes without saying that for some commands this flow can be a bit boring, but don't worry, the VsCode team took care about that too, they allow us to create short-cuts that run your commands. But we'll see that in another post. ## Search Files and Symbols If you use the short-cut `⌘+P` (on window `Ctrl+P`) the Palette that appears has a different goal. In this case, it's ready to work with the files, or better, it's ready to search your files or to search inside of them. ![Search Palette](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nlwcclhkyeu7flyab6gq.gif) By default when this palette appears it is ready to work with the current opened file, but you can also work with other files. Let's start with the commands to work in the current file. - Go to Line and Column Using the character `:` VsCode is ready to go to a line of the file, for example if you type :39 and you press ENTER, VsCode puts the cursor and focuses at the begin of the line 39. If you know the column of the line, you can indicate it too by adding another `:` and VsCode sets the focus to the column in the chosen line. For instance `:39:3` corresponds to the line 39 at the column 3. - Search Symbols Using the character `@` VsCode is ready to search methods, properties, classes, interfaces inside of the current file. As you can see, when you type the character `@` VsCode tries to help you and it suggests you all the symbols in the file. That helps you to search the symbols and prevent infinitive searches using the scroll. Now let's move on and see how to search files. - Search Files The easy pease way to search a file in VsCode is using the short-cut `⌘+P` (on window `Ctrl+P`), type its name and press `ENTER` when you find it. This search works on the entire project. ![Search File](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lmi0pcjgh27yw5dvhw6n.gif) But sometimes it can be necessary to search only inside of a folder. To make this, you need to start the search with the name of the folder flow by the char `/` and after that the name of the file. ![Search in Folder](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xr6afcu713leysqxn2wx.gif) But this method enables the search only in the first level of this folder and excludes all the subfolders. Thus the VsCode team took care about that too and by using the char `*` you can create a power condition to search your files. This char can be used either lonely or combined with another `*`. If you use the combination, it indicates that you want search both in that folder and in its subfolders. Instead if it is used alone you indicate that the search is only inside of the folder. Let's look at some examples to better understand this. 1. /src/**/File.ts In this case you want to search all the files called `File.ts` inside of the folder `src` and in its subfolders (`***`). 2. /src/***/components/Button.ts In this case you want to search all the files `Button.ts` inside of the folder `src` that it's placed inside of a subfolder called `components`. 3. /src/****/*.ts In this case you want to search all the files with extension `.ts` inside of the folder `src` and in all its subfolder. As you can see, combining the char `*` in different ways you can create a power search term. I hope these notions could improve you daily work with VsCode. That's all Guys. Bye Bye 👋 --- ### Part 2 of 5: Visual Studio Code - Tips & Tricks - Snippets - **URL**: https://delpuppo.net/blog/vs-code-tips-and-tricks/visual-studio-code-tips-tricks-snippets/ - **Published**: Mar 21, 2022 - **Tags**: vscode, productivity, programming, webdev If you used to adopt Visual Studio in the past probably you already know something about Snippets. This feature exists out-of-the-box in VsCode too. If you open a javascript file or a typescript file and you type `log` and after you press TAB you get this result. ![Log Snippet](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cq4brpt9dhgxmi3j54ng.gif) In VsCode there are many others snippets already implemented out-of-the-box but the VsCode's team doesn't stop here. VsCode enables you to create your own snippets, or import them from the extensions. But that's not all, you can create your own snippets available in all your projects, or create snippets for a specific project and accessible by all the team of that project. After all these words, let's see how the snippets work and how you can create your own snippets. First of all, to create a new snippet you have to open the [Command Palette](https://dev.to/this-is-learning/visual-studio-code-tips-tricks-command-palette-and-its-friends-2bhi), type "Configure User snippets" and press ENTER. After that VsCode suggests you some options, two of these are: - New Global snippets file... - New Snippets file for '`name of your project`'... Chose your preference and press ENTER again, type the name of your snippet, and press ENTER for the last time. Voila, your first snippet configuration becomes reality. As you see, you can choose between two types of configuration: Global snippet and Project snippets. It goes without saying that the first one creates a snippet file accessible only by you, the second one instead is accessible by all the project team if you commit the file in the repository. Based on the choice, VsCode creates the snippet file in two different folders. The global snippets are saved in this path `Code/User/snippets/{snippet-name}.code-snippets` and the `Code` folder is different in base of your platform: - Windows `%APPDATA%\Code\User\` - macOS `$HOME/Library/Application\ Support/Code/User/` - Linux `$HOME/.config/Code/User/` _you can find more about that configuration [in this reference](https://code.visualstudio.com/docs/getstarted/settings#_settings-file-locations)_ Instead, the project snippets are saved inside of the `.vscode` folder in the project's root and the snippet file has this form `{snippet-name}.code-snippets`. Apart from this difference between the two choices, after the creation stream VsCode create for file for you with this content ```json { // Place your global snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and // description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope // is left empty or omitted, the snippet gets applied to all languages. The prefix is what is // used to trigger the snippet and the body will be expanded and inserted. Possible variables are: // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. // Placeholders with the same ids are connected. // Example: // "Print to console": { // "scope": "javascript,typescript", // "prefix": "log", // "body": [ // "console.log('$1');", // "$2" // ], // "description": "Log output to console" // } } ``` This is an example of a snippet, particularly this example is the log snippet seen at the beginning of this article. But let's go ahead and create a snippet to generate a fetch request. ```json { "Fetch Request": { "scope": "javascript,typescript", "prefix": "fetch", "body": [ "fetch(\"$1\")", " .then(response => response.json())", " .then(data => $2)", " .catch(error => console.error(error));" ], "description": "Fetch request" } } ``` First of all let's see this snippet at work ![Fetch snippets at work](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7osgayqlfjkq5deykooy.gif) As you can tell, typing `fetch` and pressing ENTER or TAB, VsCode inserts the code of the snippet in the file. But let's take a look at how the snippet file is composed. First and foremost, the snippet file is a JSON file. The first thing to do is to give a name of the snippet, in this case, `Fetch Request` and this is the property that identifies the snippet inside of this file. By here, you have to describe your snippet. The first property described is the `scope`, this property identifies the language relative to this snippet, in this case, the snippet is written for javascript and typescript (if you don't indicate this property your snippet appears in all the files). The `prefix` property identifies the word to type to find the snippet in the VsCode's IntelliSense, `fetch` for this example. The description property is used to describe the reason why of the snippet. The body property instead is the code generated by the snippet. As you can see, this property is an array, where every item is a row of the generated code. There are two "strange" symbols used inside of the body: $1 and $2. This particular syntax helps VsCode to understand that in this snippet the user has to indicate 2 things, the fetch's URL and the function to manipulate the fetch result. _To jump between the parameters during the filling in the editor you have to use the TAB._ As you can tell, it's not so difficult to create your snippets, but let's see another case to example other possibilities exposed by VsCode. In this example, the snippet creates a React Function component with the FC type and Props. ```json { "React Functional Component with Props": { "scope": "typescriptreact", "prefix": "rfcpt", "body": [ "import { FC } from 'react'", "", "type ${1:$TM_FILENAME_BASE}Props = {", " $2", "}", "", "const ${1:$TM_FILENAME_BASE}: FC<${1:$TM_FILENAME_BASE}Props> = (props) => {", " return <>$3", "}", "", "export default ${1:$TM_FILENAME_BASE};" ], "description": "React.FC component with Props in TypeScript" } } ``` ![React FC component snippet](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c0jqaq78qs8l247ko3hj.gif) In this example, one parameter has a special syntax `${1:$TM_FILENAME_BASE}`, which indicates that the first parameter will be compiled only with the name of the file when the snippet appears but the user can edit it if necessary. There are many other special variables that you can indicate at VsCode to pre-fill a parameter and you can find all the possibilities [in this reference](https://code.visualstudio.com/docs/editor/userdefinedsnippets#_variables). _You can indicate multiple snippets inside of a single file. To do that you have to create another section in your file starting from the name and filling this section with the info about another snippet. [in the GitHub repository](https://github.com/Puppo/vscode-tips-and-tricks/blob/02-snippets/.vscode/fetch.code-snippets) an example._ This feature is widely used in extensions, and you can find many extensions that create for you snippets, for instance: [Angular Snippets](https://marketplace.visualstudio.com/items?itemName=johnpapa.Angular2), [ES7+ React/Redux/React-Native snippets](https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets)... Now you know all the notions to create your snippets if it will be necessary. This feature often helps me to generate automatically the structure of some particular repeatable component in the application, for instance, a react component or an angular component or other things like these. I hope this feature can help you too to save time on writing repeatable code. That's all from the snippets guys! Bye Bye! 👋 _N.B. you can find the code relatives of this article [in the GitHub repository](https://github.com/Puppo/vscode-tips-and-tricks/tree/02-snippets)_ --- ### Part 3 of 5: Working with Github from your best editor - **URL**: https://delpuppo.net/blog/vs-code-tips-and-tricks/working-with-github-from-your-best-editor/ - **Published**: Nov 3, 2022 - **Tags**: productivity, vscode, github In my daily work routine, many times I have to switch from [VsCode](https://code.visualstudio.com/) and [Github](https://github.com/) to create a PR, review a PR, check a GitHub Action, and more. Therefore I have decided to google if there is a solution to prevent all these switches. The result of my search terminated with 2 new VsCode Extensions: - [GitHub Pull Requests and Issues](https://marketplace.visualstudio.com/items?itemName=GitHub.vscode-pull-request-github) - [GitHub Actions](https://marketplace.visualstudio.com/items?itemName=cschleiden.vscode-github-actions) Today I'll speak a bit about the first one, and the second will be discovered in another article. ## GitHub Pull Requests and Issues This extension is an official extension created by the GitHub team. This extension allows you to do whatever you want if you are working with a PR and Issues. You can: - Create PR - Edit PR - Delete PR - Review PR - See all PR - Create Issue - Delete Issue - Edit Issue - See all Issues As you can imagine, in our daily work if we are familiar with PRs and we work well with them, creating, editing, or reviewing PRs is a common practice. So let's see better how this extension works. ## Installation Obviously, to install this extension we have to pass by the VsCode MarketPlace. Click the extension button in VsCode menu and in the search bar type "GitHub Pull Requests and Issues". When the search is finished, click the install button on the right, wait some seconds, and voila the extension is installed. ![Extension installation](https://cdn.hashnode.com/res/hashnode/image/upload/v1659106175800/kdi8976io.gif) ## Login It's going without saying that we have to sign in with our credentials to work with GitHub. To do that we have to open the extension and click the SignIn button that appears. After that VsCode asks you permission to open a new browser window to allow you to type your credentials, and at the end a popup browser asks you the permission to reopen VsCode with your credentials so you can begin to use our extensions. Now we are ready to use the extensions. ![Sign In Button](https://cdn.hashnode.com/res/hashnode/image/upload/v1659106725876/LD5i3NsXh.png) ## First Impression When you are logged the extension shows you two sections: - Pull Request - Issues its obvious that each section handles its topic. ![First impression extension](https://cdn.hashnode.com/res/hashnode/image/upload/v1659354191073/es3pZui9Q.png) ### PR To create your first PR you have to click the icon in the top right of the PR section. After that, the extension opens a new window where you can input the data of your PR: - From branch - To branch - Title - Description ![PR creation](https://cdn.hashnode.com/res/hashnode/image/upload/v1659354776587/IO37dNXxD.png) Now, if you work using the review feature, you can add your review/s to your PR and if you want you can edit your PR too, or you can also add labels or milestones. ![PR View](https://cdn.hashnode.com/res/hashnode/image/upload/v1659354977327/rGM98PyNT.png) In the extension panel, under the PR section, you can find your PR and view or edit it if it is necessary. If you select your PR, you can see all the changed files by the PR, and if you want to add some comments you can do that in the file directly. ![Review PR](https://cdn.hashnode.com/res/hashnode/image/upload/v1666534956627/IqkB0PfG0.gif) It is awesome, innit? The flow for your Issues is very similar to the PR flow and in my case doing these kind of stuffs direct in my editor is very useful because Im able to handle my projects direct in VsCode without switching every time from the editor to the browser and vice-versa. Okay, I hope I stimulated your curiosity so what are you waiting for? Open your VsCode and try this fantastic extension. Let me know your impressions and if you wanna other info dont hesitate to ask me anything, you are welcome and for me its a pleasure to help you. Thats all today folks. See you soon to speak about the second extension GitHub Actions. Bye bye --- ### Part 4 of 5: Working with GitHub Actions from your best editor - **URL**: https://delpuppo.net/blog/vs-code-tips-and-tricks/working-with-github-actions-from-your-best-editor/ - **Published**: Nov 8, 2022 - **Tags**: github, code, actions Hi folks, today I'm going to speak about another cool VsCode Extension. In many projects, I love using [GitHub Actions](https://github.com/features/actions) as CI/CD tool, but switching between VsCode and the GitHub website is very boring and frustrating. So, one day I decided to google if there was a way to follow my actions directly in my best Editor, and some minutes later I found this fantastic extension: [GitHub Actions](https://marketplace.visualstudio.com/items?itemName=cschleiden.vscode-github-actions). This extension and that seen in the previous article have changed my way of working, and now I'm almost free from the browser during my coding phase. I say almost because sometimes I have to check my email or scroll the Twitter wall to stay updated and get the last news 🙂 But let's see together what this extension is able to do 🚀 ## Installation As with any other extensions, the installation is a piece of cake, you have to open the extensions tab and in the search box you can type `GitHub Actions`. There are many extensions with this name but you have to choose the extension created by `Christopher Schleiden`, after that, press the install button and wait until the process is ended. ## Getting started After the installation, the extension asks you to sign in with your GitHub account, so it will be able to read the status of your GitHub Actions. ![Permission](https://cdn.hashnode.com/res/hashnode/image/upload/v1666977432634/rogKWu8MX.png) Okay, press the "Allow" button, enter your GitHub credentials in the browser and follow the instructions to permit VsCode to get the access token for your extension. After that, the extension is ready to visualize your actions. ![First Look](https://cdn.hashnode.com/res/hashnode/image/upload/v1666977945249/SZedb7gt4.png) There are 3 main sections to use this extension: 1. The icon to open the extension 2. The current branch section, where we can see all the actions about our current branch 3. The Workflows section, where we can see all our workflows and monitor their execution over time ## Run and Watch your Workflow To see the extension in action you have to push your commits into your repository as usual and when the action starts, you can follow its status directly from your Editor, without moving in your browser. Here is a demo. ![The action execution](https://cdn.hashnode.com/res/hashnode/image/upload/v1666978841467/6ovO95NdO.gif) As shown in the demo, you can see the status of the action, and for each status, there is a specific icon that represents the state. You are also able to watch the logs by clicking the step of your interest. Unfortunately, sometimes opening the browser to see the action on the Github website is necessary, and to do that, there is a fantastic button that opens the browser directly to the action page. ![Open the github action page](https://cdn.hashnode.com/res/hashnode/image/upload/v1666980055740/TYBzZi6Ye.png) ## Conclusion Okay, I hope we had a short but exhaustive trip into this beautiful extension. I hope the combo of this extension with the `GitHub Pull Requests and Issues` extension improves your daily work and I hope they could be useful for you too. If you know other's extensions or you prefer others let me know, I'm curious and open to trying different extensions, especially if they improve my productivity. See you soon with other tricks for our best editor (VsCode) :) _p.s. if you are interested in helping the VsCode team use the [Insider version](https://code.visualstudio.com/insiders/) and test the new features before their release. In this way, you can help the team to release a better stable version_ _p.s.s. if you want to get your hands dirty, you can also contribute to making VsCode better, by implementing new features or fixing bugs. if you are interested in that but don't know where to start, watch this [video](https://www.youtube.com/watch?v=W_xau3w4GJo)_ --- ### Part 5 of 5: Visual Studio Code - Tips & Tricks - Profile - **URL**: https://delpuppo.net/blog/vs-code-tips-and-tricks/visual-studio-code-tips-tricks-profile/ - **Published**: Jan 10, 2023 - **Tags**: vscode, code ## Intro During my daily work, sometimes I have to switch between different projects: backend frontend, nodejs, react, angular etc. etc. I used to think that configuring VsCode in the best way for each project was impossible. In addition, Im a bit drug of extensions in my VsCode, which often causes performance decreases because some unused extensions (not required for the current project) use a lot of RAM or CPU. To go around this problem, typically, I used to disable these extensions but with the cons that I have to reenable them when I need to work with them. It was a bit frustrating, but some days ago, I came across a fantastic feature of VsCode. This feature is called Profile. Currently, the feature is present only in the [Insider](https://code.visualstudio.com/insiders/), but I hope it will become available to all early. ## What is Profile? Profile allows you to create different setups in base on your needs. Using a profile, you can have different setups based on the current language, include or exclude extensions, change shortcuts, etc. etc. ## How can you set up your profile? To work with profiles, you have to make your focus on the bottom-left of your editor. There is an icon where you can handle your profile. The default profile is called, as you can imagine, Default. If you have never heard about Profile before now, it goes without saying that you have the Default profile selected. But now, its time to learn how it works. Its not rocket science, but its very helpful, in my opinion. ![Profile](https://cdn.hashnode.com/res/hashnode/image/upload/v1673357886590/c257a31b-d507-4035-b65f-81c0e141f101.gif) ### Create a new Profile You must click the Profile section and select Create New Profile to create a new one. Now you can choose between two options: an empty configuration or starting from another profile. Now the decision is in your hands. Add, remove, and change your configuration as you want in base on your needs. For instance, I created different setups based on the context: AWS, Azure, Node, Angular, and React. You can find your best solution to improve your productivity. ![Creation](https://cdn.hashnode.com/res/hashnode/image/upload/v1673357886590/c257a31b-d507-4035-b65f-81c0e141f101.gif) ### Delete Profile Delete profile is easy peasy; click on the Profile section and select "Delete Profile", then you have to choose the Profile that you want to delete (one or many) and click the Ok button. Now the game is done, the profile will be removed. ![Delete](https://cdn.hashnode.com/res/hashnode/image/upload/v1673357733889/2541f2a2-0df6-4c05-a2a9-0ebcee9205a2.gif) ## Conclusion In my opinion, this feature is essential. I created my setups, and now VsCode works quickly and without performance problems. I hope it will be the same for you too. Creating different Profiles allows me to create my best experience during my daily routine with VsCode and reduce the possibility of wasting time with performance problems created by extension that are useless at that moment. I hope this content could be helpful for you too. Let me know in the comment if you already know it or if you will be surprised like me when I discovered it. > 🎬 **Watch / View Embedded Resource:** [https://dev.to/puppo](https://dev.to/puppo) ---