visual studio

VSCode Extensions for React

Recently I’ve been learning how to develop user interfaces using React on VSCode. And one of the things I liked about it are the available extensions that makes development easier. Now this list contains an extension that is specific to React but the others are mostly extensions that, in my opinion, enhances the overall experience while using VSCode.

So far, here’s the list of extensions that I found very useful:

ES7 React/Redux/GraphQL/React-Native snippets

As the (lengthy) name suggests, this is a collection of ES7-compliant code snippets for React, Redux, GraphQL and React Native. Yes, I just re-stated what the name said. It basically saves a whole bunch of keystrokes which is why this is helpful when developing React UIs.

Instead of typing out import React from 'react';, I would just need to type imr then hit tab.

Instead of typing out import PropTypes from 'prop-types';, I just type in impt then hit tab.

For importing other modules like custom ones or from third-parties, instead of typing out import customModuleName from 'customModule';, I just type imp then hit tab, type in whatever is the actual name of customModule is then hit tab again to type in the corresponding customModuleNamethen another tab which brings me to the end of the line for the ;

You call it lazy, I call it productive! Potayto, potahto.

 

ESLint

This extension integrates ECMAScript (ES) standards and code linting (Lint) into VSCode. It checks your code as you type it and generates suggestions if it finds some patterns of code that does not follow the (coding) standards set.

Without being technical about it and its origin, ECMAScript is a standard that is followed by scripting languages which includes JavaScript.

Code Linting on the other hand is a type of static code analysis that finds pieces of code that does not adhere to the standards and/or is problematic from the point of view of certain coding guidelines.

There’s a wide range of configurable settings that can be fine-tuned to fit your coding style or just follow the default. What I like about this is that it give suggestions on how to fix your code and is also non-obtrusive.

eslint-href

 

Prettier – Code Formatter

This extension re-writes your code based on a specific set of (configurable) rules which then forces a consistent coding style. This actually works hand-in-hand with ESLint – at least with how I configured my VSCode settings.

Are you using tabs or spaces? What tab size are you using for JS? How about your brackets, are they inline or next line? When will we start wrapping code when a one-liner is too long?

The code re-write can be triggered manually for the whole file or for a code selection via key bindings. It can also be triggered for the whole file before committing code in your repository using pre-commit hooks or automatically upon saving the changes you made in VSCode.

 

IntelliSense for CSS Class Names in HTML

When you have bootstrap, material design, font awesome, themes and other custom styles for your UI, CSS class names can sometimes be hard to remember. With the IntelliSense for CSS Class Names in HTML extension, you get an auto-suggested class name once you start typing on the class or className attribute. It also throws in auto-completion for added laziness productivity. It caches the CSS class definitions on your workspace and on files referenced through the link element in the html header.

 

Bracket Pair Colorizer

Have you ever wasted time looking for that missing closing bracket because of your elegantly copy-pasted written code? Fear no more as Bracket Pair Colorizer …erm… colorizes your bracket pairs!

Angle brackets/chevrons requires a bit of tinkering as well as custom character brackets but works well with square brackets and round brackets/parenthesis and curly brackets/braces/handlebars/mustache. Unless of course if you are color blind… wait, I think this can be configured for that too.

 

Honorable Mentions

JavaScript Console Utils

CTRL+SHIFT+L gives you console.log();

Select a variable then CTRL+SHIFT+L gives you console.log('variable_name: ', variable_name);

CTRL+SHIFT+D removes all console.log statements in the current document.

Code Spell Checker

Because who wants to read code AND comments with wrong spelling, right? Yeah right, comments on your code. Haha.

 

 

How To: Execute Liquibase Database Change Log file (a.k.a. "driver file") from Visual Studio

The Liquibase Database Change Log file or as we refer to it, the “driver” file, is the root of all changesets. This is the file that is passed to Liquibase during execution as the changeLogFile parameter which lists all changesets that needs to be executed in order. And because we love Visual Studio, we’d like to execute the driver file right from the IDE.

First step is to create a batch file with the following contents. Place this file in a folder that you can easily remember (c:\Dev\Liquibase\LBUpdateSQL.bat):

C:\Dev\liquibase-3.3.3-bin\liquibase ^
--classpath="C:\Dev\liquibase-3.3.3-bin\lib\sqljdbc41.jar" ^
--driver="com.microsoft.sqlserver.jdbc.SQLServerDriver" ^
--url=jdbc:"sqlserver://127.0.0.1;databaseName=TARGET_DB" ^
--defaultSchemaName=dbo ^
--username=******** ^
--password=******** ^
--changeLogFile=%1 ^
--logLevel=info ^
--logFile="C:\Dev\LiquiBase\logs\output.log" ^
update

Don’t forget to change the values for TARGET_DB, username and password. Also make sure that the paths are valid and appropriate (lines 1, 2 and 10).

Next step is to open Visual Studio and click on TOOLS > External Tools… and click the Add button. Fill-out all the fields as in below and make sure Close on exit is not checked:

liquibase-external-tool

Now this part is important. Make sure that the Initial directory points to the location of the driver file (in this case its C:\Dev\git-repos\DatabaseScripts\(project_name)\updates). This will ensure that the filename field in the DATABASECHANGELOG table only contains the filename of the changeset and not the full path. To understand why this is important, read more here.

Click on Ok to close the External Tools window.

Lastly,open the driver file in Visual Studio and click on TOOLS > Liquibase (this is what you placed in the Title field in the screenshot above).

run-driver-run

There should be a command window that pops up that shows if the execution has failed or succeeded. The equivalent of all of this is like executing the batch file via command window while on the folder that contains the driver file with the driver file as an argument.