Recently, I revisited a React side project that I had abandoned last year. In doing so, I discovered some essential VSCode extensions that have significantly enhanced my productivity as a React developer. The only rule for this list is that all these extensions are React specific. While they might be useful for other purposes, their main focus is React.

So, let’s dive in.

These extensions will help by providing you with snippets. Snippets are predefined pieces of code that can expand into a complete code block with a single keystroke (pressing the tab key in most cases). These snippets can range from a single line to an entire file. By using snippets, you can condense whole files into a short abbreviation, making your coding experience much smoother.

1. ES7 React/Redux/GraphQL/React-Native Snippets

This extension provides a comprehensive collection of snippets for React, Redux, GraphQL, and React Native. These snippets can significantly speed up your development process by allowing you to quickly generate commonly used code structures. For example:

• rcc creates a React class component skeleton.
• rfc generates a React functional component.
• rnfce snippets help you quickly set up React Native component with default export.
• The list is endless . Explore here

These snippets are highly customizable and cover a wide range of use cases, making your development more efficient.

2. React Hooks Snippets

The React Hooks snippet extension simplifies the addition of hooks in React by providing specific abbreviations:

• ush for useState initializes a state variable.
• ueh for useEffect sets up a side effect.
• uch for useContext accesses a context.

This extension is particularly useful because it focuses on React’s hooks API, which is a core feature for functional components. It helps you quickly implement hooks without having to remember the exact syntax every time.

3. VSCode React Refactor

VSCode React Refactor allows you to refactor your code by extracting parts of it into separate components. This can be particularly useful when your component becomes too large and you want to break it down into smaller, more manageable pieces. For example:

• Select a piece of JSX code.
• Right-click and choose “Refactor”.
• Extract it into a new component.

This extension supports TypeScript and ensures that your extracted components are correctly imported and used, streamlining your refactoring process.

4. Paste JSON as Code

Paste JSON as Code allows you to convert JSON objects into code. This is especially useful when dealing with APIs that return JSON responses. For instance:

• Copy a JSON object.
• Use the command palette to choose “Paste JSON as Code”.
• Convert the JSON into JavaScript or TypeScript code with type definitions.

This extension helps in quickly transforming JSON data into usable code structures, saving time and reducing errors.

5. SVG Gallery

SVG Gallery is an excellent tool for managing SVG files in your projects. It allows you to preview SVG files directly in VSCode, which can be particularly handy when dealing with multiple SVG assets. Features include:

• Preview SVGs within the editor.
• Copy SVG content as React components.
• Organize and manage your SVG assets efficiently.

This extension simplifies the process of working with SVG files, making it easier to integrate and manage vector graphics in your React projects.

While the above recommendations come from my subjective point of view and personal experience with these extensions, I urge you to install and experience them yourself. Each developer has unique needs and workflows, and these extensions might fit differently into your projects.

I encourage you to share some of the cool extensions that have enhanced your productivity. Remember, these are not the only extensions out there, and I’m always on the lookout for new tools to improve my workflow.

This brings us to a thought-provoking question: Are we creating lazy programmers by relying heavily on these extensions, or are we genuinely enhancing productivity and efficiency? Share your thoughts and experiences. Let’s discuss whether these tools are crutches or catalysts for better development.

Until next time!……

The post Cool VSCode Extensions that that I’ve discovered appeared first on ProdSens.live.

Most of the tools we use daily in the Node.js ecosystem utilize config files that support various formats such as .js/cjs/mjs, .yaml/toml, or .json. I usually prefer to work with simple text formats like JSON over JavaScript because it spares me the hassle of navigating the ESM vs. CJS battle for the correct file extension and export specifier. Even better, if the config publishes a JSON schema, then you get type safety without having to rely on JSDoc or TypeScript types.

The biggest downside to using JSON for config files is, in my opinion, its lack of support for comments. I want to explain why I enabled a certain feature or disabled a certain rule. I know most tools still accept comments in JSON files because they don’t use the native JSON.parse function, which errors on comments, but instead use custom packages like JSON5 that support comments.

My new go-to linter, Biome.js, solves this by accepting a biome.jsonc (JSON with Comments) as a config file. However, other build tools like Turbo only accept a plain turbo.json file, even though they allow for comments embedded in the JSON. When you open this file in VSCode, you will encounter numerous errors because of the comments.

VSCode opens this file based on its file extension in JSON language mode (see the language indicator in the bottom bar). Interestingly, if you open a tsconfig.json, you will notice that VSCode interprets this file as JSON with Comments even if it doesn’t contain any comments.

VSCode allows you to associate a file name with a certain language. These file associations are defined in the .vscode/settings.json file:

// .vscode/settings.json
{
  "files.associations": {
    "turbo.json": "jsonc"
  }
}

Now opening the turbo.json file again will automatically use the right language (JSON with Comments). However, keep in mind that you should verify if your tool actually supports JSON with comments. For example, Node.js doesn’t support comments in package.json, and doing so will break your package and potentially all dependent packages.

The post How To Use JSON with Comments for Configs appeared first on ProdSens.live.

Olá devs! Este artigo é resultado de um dos bate-papos que fizemos lá na nossa comunidade no Discord, onde conversamos sobre algumas ferramentas que são “uma mão na roda” para uma pessoa dev no processo de desenvolvimento de algum projeto.

Aqui vamos listar várias ferramentas que os devs da comunidade usam no dia a dia ou já utilizaram por um tempo. Nesta lista existem tanto ferramentas para dev front-end quanto para dev back-end ou dev de qualquer outra área que considere algumas dessas ferramentas úteis.

Índice

• Desktop
• Terminal
• Extensões do Chrome
• REST Clients
• Extensões do VSCode

Desktop

Aqui vão alguns softwares Desktop que incluem diversas ferramentas internamente as quais você geralmente precisa utilizar no dia a dia como dev.

DevToys

O DevToys contém ferramentas como geração de QRCode, geração de UUIDs, formatação para base64, transformação de JSON para Yaml, etc.

Raycast (usuários MacOS)

O Raycast é como o Sotlight do Mac, mas que permite instalar vários plugins diferentes que incluem ferramentas como chat com o ChatGPT da OpenAI, geração de UUIDs, transformações de strings, color picker, dentre várias outras. Você pode encontrar os plugins disponíveis na loja deles.

Terminal

Algumas ferramentas que customizam o seu terminal para ficar mais agradável e trazer mais algumas funcionalidades como, por exemplo, integração com Git sendo possível visualizar a branch a qual você está trabalhando.

Oh My Zsh

Muito utilizado por usuários Linux ou MacOS. Se você for utilizar no Windows, você vai precisar utilizar o WSL ou se você quer utilizar o PowerShell, você pode utilizar a próxima opção.

Oh My Posh

Pode ser utilizado tanto por usuários Linux, MacOS ou PowerShell no Windows.

Extensões do Chrome

Color picker

Uma extensão que permite você capturar cores de componentes do site que está acessando. Muito utilizado por devs front-end. Este é só um exemplo, existem vários outros semelhantes dentro da loja do Chrome, escolha o que mais você se adequa.

JSON Viewer

Sabe quando você vai rodar uma rota GET da sua API no navegador e ela retorna um JSON todo misturado e sem condições de leitura? O JSON Viewer resolve esse problema para você indentando o JSON retornado na página.

React Developer Tools

Adiciona algumas ferramentas de debugs no “inspect” do navegador que facilita quando você for inspecionar componentes do react pelo navegador.

Web Apps by 123apps

Uma extensão que você pode não precisar no seu projeto como dev, mas pode precisar no seu dia a dia. Esta extensão e também o side do 123Apps apresenta ferramentas de edição de vídeo, edição de áudio, formatação de PDF (transformar imagens em PDF, dividir PDF, mesclar PDF, PDF to Word, etc), e mais alguns outros utilitários.

REST Clients

Quando você está construindo APIs, você provavelmente vai precisar de um cliente REST para executar suas rotas não é mesmo? Aqui vão alguns muito utilizados pela comunidade.

Postman

Um dos mais utilizados. Nele além de você gerenciar suas rotas, você consegue criar workspaces, compartilhar com outras pessoas e criar uma documentação dentro da própria ferramenta.

Insomnia

O Insomnia é um pouco mais simples do que o Postman, mas também permite criar workspaces, criar times, etc.

Hoppscotch

O Hoppscotch é bem prático pois ao acessar o site, você já pode passar a utilizar a ferramenta sem precisar realizar login ou instalar a ferramenta como no Postman e Insomnia.

Bruno

Bem semelhante ao Insomnia, mas traz algumas diferenças como armazenar as suas collections das rotas diretamente numa pasta do seu sistema de arquivos, utiliza o Git para versionamento, e algumas outras funcionalidades.

REST Client (VSCode extension)

Esse é na verdade uma extensão do VSCode que permite você pode criar seu cliente REST apenas criando um arquivo na pasta do seu projeto que vai conter todas as chamadas das suas rotas utilizando uma formatação específica da ferramenta.

Extensões do VSCode

Better Comments

Permite você inserir comentários destacados com cores específicas, assim, você pode destacar, por exemplo, algum ponto no código que você precisa voltar em algum momento e revisar.

IntelliCode

O Intellicode utiliza IA para te ajudar com alguns insights de código enquanto você está codando.

IntelliCode API Usage Examples

Inclui exemplos de código dentro das documentações de funções no VSCode de alguma lib que você está utilizando.

Path Intellisense

Te ajuda a encontrar os arquivos que você está importando dentro do código quando você está fazendo aquele famoso "../../......." para encontrar o arquivo.

ESLint

O ESLint é utilizado para ajudar na formatação automática do seu código JavaScript. Você pode customizar como quiser a formatação que você quer fazer no seu código, com ou sem ;, com aspas simples ' ou aspas duplas ", etc.

Prettier – Code Formatter

Funciona como o ESLint, mas pode ser utilizado para várias outras linguagens como JavaScript, TypeScript, JSON, CSS, HTML, Vue, Angular, etc.

Markdown All in One

Te ajuda na formatação de arquivos .md, como, por exemplo, os arquivos README.md que você cria para colocar no GitHub.

Markdown Preview Github Styling

Permite você visualizar seu arquivo .md dentro do VSCode na forma como vai aparecer no GitHub. É bem útil para você verificar se você não errou em alguma formatação no Markdown ou quer melhorar alguma informação antes de subir para o GitHub, por exemplo.

Polacode

Sabe quando você quer tirar uma foto do seu código para postar em algum lugar? O polacode te ajuda a fazer isso de forma rápida, sem precisar sair do VSCode ou lembrar o comando para dar screenshot. Você só seleciona o código que deve ser fotografado e manda o Polacode tirar a foto, que inclusive já sai formatada do jeito que você quer.

Rainbow CSV

Formata os arquivos CSV que você abrir no VSCode.

Regex Previewer

Permite você testar o regex que você criou. Ele abre uma tela de preview onde você pode ir escrevendo palavras diferentes a fim de testar seu regex selecionado.

DotENV (for .env environment variables)

Algumas linguagens utilizam o arquivo .env para guardar variáveis de ambiente. Esta extensão do VSCode te ajuda na formatação desses arquivos.

Front-End

Algumas extensões para a galera front-end.

Auto Rename Tag

Quando você troca o nome de uma tag HTML, essa extensão já altera automaticamente o nome na tag de abertura e na tag de fechamento.

Auto Close Tag

Quando você abre uma tag HTML, essa extensão já cria também uma tag de fechamento automaticamente para você não esquecer.

Color Picker

Mostra um ícone para abrir um color picker em cada cor hexadecimal que você inserir no seu HTML ou CSS. Assim, você pode abrir o color picker, selecionar a cor que você quer e ele vai alterar automaticamente o hexadecimal da cor selecionada.

Customização de ícones de arquivos

Algumas extensões que formatam os ícones das pastas e arquivos do seu projeto dentro do VSCode.

Nos dois exemplos abaixo você consegue personalizar os ícones da forma que você quiser utilizando sua configuração de usuário do VSCode, basta olhar a documentação da ferramenta para verificar como fazer isso.

Symbols

Material Icon Theme

Spell Checker

O Spell Checker te corrige quando você digita qualquer palavra de forma errada. Quando você digita uma palavra errada, a extensão passa um traço azul abaixo da palavra e você também pode pedir dicas de correções. Isso é bem útil para quando vamos nomear variáveis ou funções, com essa ferramenta podemos sempre ficar atentos(as) para escrever a palavra da forma correta e evitar erros mais tarde.

Code Spell Checker

Corrige palavras escritas em inglês.

Brazilian Portuguese – Code Spell Checker

Corrige palavras escritas em Português Brasileiro. Existem Spell Checkers para várias outras linguagens, caso precise para alguma outra, é só pesquisar nas extensões do VSCode que você acha.

Bom, essas foram algumas ferramentas que listamos na comunidade do Discord. E você tem alguma que você utiliza muito e não está listada aqui? Então comenta aqui e compartilha com a gente!

The post Ferramentas que não podem faltar no setup de um(a) dev appeared first on ProdSens.live.

Ever wondered how to view log files in real time without downloading them? I recently needed it, as I was tired of downloading the log files from the server and then inspecting them. Traditionally, accessing the server directory, downloading the log file, and then examining them can be a cumbersome and time-consuming process. But what if there is a way to streamline this task directly within your favorite code editor, Visual Studio Code (VS Code)?

In this blog post, I’ll guide you through the process of using an extension called Logtail available in the VS Code Marketplace. This tool allows developers to view server log files in real time, making the development process more productive by removing unnecessary steps.

Step 1: Installing Logtail in VS Code

1. Open VS Code and navigate to the Extensions view by clicking on the Extensions icon in the Activity Bar on the side of the window.
2. In the Extensions view search bar, type Logtail and press Enter.
3. Find the Logtail extension in the list and click the Install button.

Step 2: Configuring Logtail

After installing Logtail, you’ll need to configure it to connect to your server logs.

Add the below code to your vs code settings.json file.

"log-tail.channel": "document",       //Configuring the log printout channel
// make sure to update remote object with your server ssh details
"log-tail.remote": {
    "host": "localhost",
    "port": 22,
    "username": "root",
    "password": ""
},
//Configure a list of log file paths, followed by selective monitoring.
"log-tail.logsPath": [
    "https://dev.to/home/dev/main/log/12-02-2024.log",
    "https://dev.to/home/qa/main/log/12-02-2024.log",
]

1. Open the Command Palette with Ctrl+Shift+P (Windows/Linux) or Cmd+Shift+P (macOS).
2. Type Logtail: Start and select the command to activate the extension.
3. Enter/Select the path to your server’s log file when prompted. For example, /home/dev/main/log/12-02-2024.log.
4. The extension will now start tailing the log file, displaying updates in real time within VS Code.

Output File

Example Usage

Let’s say you’re monitoring logs for a web application and want to focus on error messages. You could set up a filter for the word “error” to only display relevant entries. If an error occurs, you’ll see it immediately in the Logtail output, allowing you to quickly jump into action and address the issue.

Conclusion

The Logtail extension for VS Code is a powerful tool that enhances productivity by allowing developers to view server logs in real time. By following the steps outlined above, you can set up Logtail and start monitoring your logs more efficiently, saving time and hassle in your development workflow.

Happy coding!

The post How to view server logs in real-time in VS Code appeared first on ProdSens.live.

Introduction

Databases from an on-premises SQL Server instance can be moved to an Azure SQL Database (offline) using SQL Server Management Studio (SSMS). We will learn how to use SQL Server Management Studio to move the sample AdventureWorksLT2022 database from an on-premises SQL Server instance to an Azure SQL Database instance.

Needed Tools

• Download and install SQL Server Management Studio (SSMS) with this link: https://learn.microsoft.com/en-us/sql/ssms/download-sql-server-management-studio-ssms?view=sql-server-ver16
• Download and install SQL server 2022 with this link https://www.microsoft.com/en-us/evalcenter/download-sql-server-2022
• Create Azure Database instance in Azure portal.

How to create Azure SQL Database instance

• Log into Azure portal, search for SQL Database in the market place and click SQL Database
  
• Click create SQL Database
  
• Fill the project details by selecting the right subscription and resource group.
  
• Fill the database details by supplying a name to your database and click create server if you have not configured a server before.
  
• In the Create SQL Database Server pane choose a name and location for your server. It is important to make sure that the location of your resource group and server are the same.
  
  Under authentication, choose use sql authentication and supply the username and password. Click Ok after.
  
• Click configure database in compute + storage section
  
• Change the service tier to basic, leave other settings as default and click Apply
  
• Leave other settings under Create SQL Database as default and click Review + create
  
• Click Create after passing validation
  
• Wait for it to deploy
  
• Click Go to resource once deployment is complete
  
• Click on the server name to open the server
  
• Select the Networking blade and change Public network access to Selected network
  
• Tick allow Azure services and resources…and click save.
  
• We need to register Microsoft.DataMigration in the resource provider of our subscription by searching for subscription in the market place
  
• Select your subscription
  
• Search for Datamigration in the filter and click register
  
• We are through with configuring Azure SQL Database.

Migrating SQL server to Azure SQL database

• After installing SQL Server Management Studio (SSMS), Launch it. The Server name will be the name of the local SQL server installed and click connect
  
• After connecting, expand the database folder by clicking on it, right click on the database we want to migrate, click Tasks and select Deploy Database to Microsoft Azure SQL Database
  
• Click Next
  
• Click connect to put the Server name which is the name of the the server created in Azure portal
  
• Change Authentication to SQL Server authentication, put the Log in and password details. Click connect after
  
• It will require you to sign in
  
• Leave the settings as default and click Next
  
• Click Finish
  
• Wait for it to finish
  
• Once the import is complete, click Close
  
• To check if the database has been moved successfully, navigate to Azure portal and open the resource group for our database.
  
• Click to open it and select Query editor. Put the Password and press Ok
  

The post Migrating SQL Server to Azure SQL Database with SQL Server Management Studio (SSMS) appeared first on ProdSens.live.

Visual Studio Code (VS Code) is an open-source code editor developed by Microsoft.

It has been my favorite code editor since 2018, while previously I was using Sublime Text.

The set of features of VS Code and the deep integration with TypeScript (from Microsoft too) made it my favorite and daily choice.

I can confirm that is currently broadly adopted by the community of frontend developers (React, Vue, Angular, but not only).

The different story is for the backend developers, who usually prefer IntelliJ products.

Considering VS Code is the editor we use daily, we want to select the best theme possible for some reasons:

• nice color scheme (aesthetics is important)
• improve the readability of the code
• reduce eye strain
• increase productivity

Follows a selection of 23 themes, some of them very popular, others not that much.

Scroll the list until the end, you never know when you can find the theme you’ll fall in love with.

I won’t tell you which is my favorite theme to avoid influencing you

Before the list, let’s discover how to install a new theme on VS Code.

How to install a theme in VS Code

• Open the Extension tab (Shift + Cmd + X)
• Type the theme name
• Click on Install
• Select and Set the Color Theme

Let’s get started with the themes.

Themes

1. One Dark Pro

Installs: 8,878,463

Widely used theme, which is the Atom’s dark theme with a black background.

2. Dracula Official

Installs: 6,678,172

One of the most popular themes in the development space.

3. GitHub Theme Dark

Installs: 11,813,086

Designed by GitHub, this theme replicates the UI of the GitHub’s website.

4. GitHub Theme Light

Installs: 11,813,086

Light variant of the GitHub website theme.

5. Winter Is Coming

Installs: 2,707,566

This theme mixes pleasant and high-contrast colors, with font styles, like italics.

6. Night Owl

Installs: 2,443,039

This theme has a dark blue background, with contrasting text colors. It has a light variant called Light Owl.

7. Monokai Pro

Installs: 2,711,098

One of the most known themes (I remember using it with Sublime Text).

It’s made of three main colors, dark red, yellow and light blue.

8. One Monokai

Installs: 2,117,317

This theme is a spin-off of Monokai Pro.

9. Shades of Purple

Installs: 1,756,519

If you like purple, you’ll love this theme.

10. Ayu

Installs: 2,331,017

Highly contrasted theme with pleasant text colours, orange, green, and light blue.

11. Palenight

Installs: 639,141

This theme is on the shades of purple, but not as heavily purple as Shades of Purple.

12. Cobalt2

Installs: 1,436,181

Super high contrast theme, with almost fluorescent colors.

13. SynthWave ’84

Installs: 1,743,153

Iconic theme if you like the 80s and the synthwave style.

14. Noctis

Installs: 1,004,008

Theme designed on the shades of green.

15. Panda

Installs: 928,562

If you like pandas and the Japanese world, you’ll love Panda.

16. Nord

Installs: 905,995

The theme Nord wasn’t to bring you the colors or a nordic landscape into your code editor.

Soft and cold colors are making this theme very stylish.

17. Sublime Material

Installs: 821,819

18. Slack Theme

Installs: 395,047

If you want to keep using the Slack theme in your code editor, this is the perfect theme for you.

It comes in many variants.

19. Tokyo Night

Installs: 1,359,936

Popular theme that reminds me of movies like Ghost in the Shell. So stylish.

20. Rouge

Installs: 34,931

VSCode theme created for a dark, material feel with a flushed color palette. Inspiration was drawn from Atom’s Material.

21. Poimandres

Installs: 52,108

Poimandres is a minimal, frameless dark-theme inspired mostly by blueberry. This theme tries to focus on semantic meaning instead of color variety. You’ll find that it colors things like errors, voids, throws and deletes in red, types are slighty darker so that the spotlight is on the code, green new’s, etc.

22. Flate

Installs: 15,435

Colorful and dark theme. I love the contrast between the syntax keywords like import and from and the variables names.

23. Bluloco Dark

Installs: 337,834

A fancy but yet sophisticated dark designer color scheme / theme for Visual Studio Code.

This theme features a much more comprehensive usage of syntax scopes and color consistency, with due regard to aesthetics, contrast, and readability. Originally forked from the beautiful One Dark Theme, enhanced with the meaningful intuitive Bluloco color palette.

Conclusion

That’s all for this sequence of great themes for Visual Studio Code.

If you liked them, or you want to suggest more themes, feel free to reach out to me via email or on Twitter/X.

The post 23 Best VS Code Themes in 2024 appeared first on ProdSens.live.

Hi fellow devs,

For my first post, I’m just documenting my VSCode configurations here for posterity’s sake or just for my reference later. Keep in mind that this list is going to be language agnostic and more so utility/aesthetic suggestions (though these are inevitably tied to what languages I work with, so take that as you will). Please feel free to suggest any good extensions that I’ve missed out on or your absolute must-haves!

Extensions

1. Duplicate selection or line – keyboard shortcut for duplication (cmd/ctrl+d)
2. GitLens – essential when working with teams
3. Error Lens – inlines errors for better dev experience
4. Import Cost – tells you the size of imported package, pretty useful for performance improvements
5. Kill Process – kill a process from vscode menu
6. Project Dashboard – quick overview of all your projects for easy navigation
7. Decompiler – decompiles stuff, useful for debugging
8. Toggle Zen Mode – adds a button for enabling zen mode so you don’t have to remember the shortcut
9. Bracket Select – quickly select code in between brackets
10. Auto Rename Tag – rename pair of tags automatically
11. vscode-icons – icons for most file extensions you can think of
12. Dracula Official – my preferred VSCode theme

Now, on to aliases. This isn’t part of VSCode; it’s git. But I’ve included it here anyway as the two do complement each other. Here’s the alias section of my .gitconfig file.

[alias]
    ac = !git add -A && git commit -m
    cd = !git checkout develop
    cm = !git checkout master
    pd = !git pull origin develop
    pm = !git pull origin master
    cn = !git checkout -b

That’s all for my first post folks. Thanks for reading and have a nice day!

The post My VSCode Config appeared first on ProdSens.live.

A couple of times, we spend time tweaking VScode themes. It could be fun but sometimes tiring and time-consuming. I have travelled this road many times but went a little over the board this time, and why would I do that?

The need for a suitable theme

I have had the pleasure of using wonderful themes from Material theme to Monokai and on. I always wanted to change something in every theme, especially the colours to resonate with me and the comfort of my eyes.

A little adventure wouldn’t hurt

During the close of the year, 2023 I decided to do something a little different from my usual development. I considered doing some design tasks, colour combinations and colour effects. It was nice to put it into practice.

The need to give back to the community

The tech community has always been awesome in open-source and sacrificial endeavours. Almost everyone has it in mind to give back to this wonderful community of love.

Final note

I enjoyed designing the theme. Some other time I will write about the process.
Thanks for reading and hope you enjoyed this episode . To install on Vscode, search for Dukana.
Or check the marketplace.
Be kind to support my endeavours.

The post Why I Built a Vscode Extension appeared first on ProdSens.live.

Switching to a different theme in VS Code can often lead to a mismatch in personal preferences. I enjoy personalizing themes with subtle modifications, especially when I find one theme that suits my taste.

I recently started using Digi-Angler Dark theme, a variant of the renowned Dracula color scheme. Returning to a dark theme after a while felt like familiar territory, reminiscent of my years using the Dracula theme in VS Code.

The issue with the comment color

Using Digi-Angler, one thing that is a bit too much for me is the color value used for code comments. I prefer comment colors that blend into the background, a preference shaped by my experiences across various code editors, terminal apps, and even while reading code on documentation sites. The sharp, eye-catching color used for comments in this theme didn’t sit well with me.

Customizing comment color in VS Code

To address this, I stumbled upon editor.tokenColorCustomizations in VS Code. It is a feature that allows altering specific color values in the active theme. You add this property to your editor’s settings.json file and specify the scope for the desired change.

Using textMateRules for Token Customization

VS Code’s tokenization engine is based on TextMate grammars, and the customization is done within textMateRules. Here’s how you can change the comment color:

{
  "editor.tokenColorCustomizations": {
    "textMateRules": [
      {
        "scope": "comment",
        "settings": {
          "foreground": "#9c9c9c"
        }
      }
    ]
  }
}

The above code snippet applies the comment color #9c9c9c to all themes you use inside VS Code. It also means when you switch from one theme to another, this comment will remain consistent.

Theme specific customization

To tweak the token value for a particular theme, wrap textMateRules with the theme name. The following examples demonstrate defining the name of the [theme] only applies the comment color #9c9c9c for that theme.

{
  "editor.tokenColorCustomizations": {
    "[Digi-Angler Dark Theme]": {
      "textMateRules": [
        {
          "scope": "comment",
          "settings": {
            "foreground": "#9c9c9c"
          }
        }
      ]
    }
  }
}

Conclusion

VS Code’s flexibility in customization is a significant advantage. It allows you to tailor any theme to your liking. To learn more about syntax highlighting, tokens, and scopes, see VS Code documentation.

The post Change comment color visibility in a VS Code theme appeared first on ProdSens.live.

Introduction:

As Developers, we always prefer not to write the same code again and again. Snippets solve this problem by making repetitive tasks simpler and quicker.

There are thousands of pre-built snippets on VS code to make our work easy. We can also create our own custom Snippet according to our preferences. In this article, we’ll discuss How to create our own custom VS Code snippet.

So, Without delaying further, Let’s START!!!

What is Sippets?

A snippet is a template that can be inserted into a document. It is inserted by a command or through some trigger text.

In simple words, with snippets we create a boilerplate file, and insert commonly used blocks of text.

Types of Code Snippets in VS Code:

In VS Code Snippets are scoped into 3 types. They are:

1. Language Specific (Only specific language can access).

2. Global Snippets (Every language can access).

3. Project Scoped (Restricted to project).

Why to use Snippets?

Before creating our custom snippets, let’s see why we need snippets.

• It reduces repetitive work.

• Adds more reusability by allowing you to reuse the same code in multiple places.

• Reduces the chances of errors when copy-pasting.

• Increase the speed of your development.

• It makes your code consistent

Creating Snippets:

Now we have an understanding of what is snippets and why we need them. So let’s start creating our own custom VS Code Snippets.

1. At first, click on the settings icon at the bottom left of the VS code. It will open this kind of pop-up.

1. Now Click on User Snippets. Now we can choose which kind of snippets we want to create. For this example, we’ll choose the Global Snippets file.

1. Now we have to give the name of that file. Here, we’ll be giving the name as custom_snippets.json.

1. After that, It should look something like this if you have not set up any snippets yet.

1. We’ll be creating a console.log snippet for logging a string. Here’s the code for that:

{
    "console.log string": {
        "prefix": "cls",
        "body": "console.log("$1");",
        "description": "Custom snippet for logging a string"
    }
}

If you would prefer to write a snippet in a GUI, you can use the snippet generator web app.

If you want to know more about the Syntax, Check this.

1. Now we have created our Snippet! Let’s see if it works or not!

Yay! It works!

Now we have created our first custom VS Code snippets.

Amazing! Now you can create your own custom snippets according to your requirements!

Conclusion:

If you found this blog post helpful, please consider sharing it with others who might benefit. You can also follow me for more content on Javascript and other web development topics.

To sponsor my work, please visit: Arindam’s Sponsor Page and explore the various sponsorship options.

Connect with me on Twitter, LinkedIn, Youtube and GitHub.

Thank you for Reading

The post Create a Custom VS Code Snippet appeared first on ProdSens.live.