LET'S LEARN TOGETHER. THE BEAUTIFUL THING ABOUT LEARNING IS NOBODY CAN TAKE IT AWAY FROM YOU.

Showing posts with label VS Code. Show all posts
Showing posts with label VS Code. Show all posts

Configure Parcel in VS Code for JavaScript Development


In my previous posts, I have written down the steps which will help you to configure ESLint, Prettier, and Husky in Visual Studio Code to make your JavaScript development easy and making sure code syntax, as well as best practices, are being followed. 

If you haven't seen that post, I highly recommend you go through that at - 

Configure ESLint and Prettier in VS Code for JavaScript Development

Configure Husky in VS Code for JavaScript Development

Today I am going to talk about another important tool when you are dealing with creating packages for your JavaScripts project. It's called Parcel.

From this post, you can expect -
  • Quick introduction of Parcel
  • Configure Parcel in Visual Studio Code
  • Examples


Quick Introduction of Parcel

Parcel is a web application bundler. It's an alternative of webpack and comes with some different value propositions.
The main features which come with Parcel are - 

Parcel makes sure to perform all the above without any configurations with speed. Pretty impressive, right. 

Configure Parcel in Visual Studio Code

Step 1 - Initiate npm

We can initiate npm by executing the command "npm init" from the terminal section of the Visual Studio Code. This will ask for a few questions which are very self-explanatory, but we can ignore them by just typing enter. Once the command executes, it will create the file package.json in the workspace.


Step 2 - Install Parcel

We can install parcel as dev dependency by executing the command "npm install -D parcel-bundler" from the terminal section of the Visual Studio Code. Once done, the package.json should add parcel as dev dependency like shown below - 
{
"name": "parcel-laerning",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"parcel-bundler": "^1.12.4"
}
}


Step 3 - Update Scripts

In this step, we need to write the scripts which will execute parcel. With the assumption that index.html is the starting point of our application and it is inside a folder named src, we can write down the below two scripts. Dev script is for the development environment and prod is for your prod environment. 
{
"name": "parcel-laerning",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "parcel src/index.html",
"prod": "parcel build src/index.html"
},
"author": "",
"license": "ISC",
"devDependencies": {
"parcel-bundler": "^1.12.4"
}
}
Parcel comes with a built-in development server, which is a big advantage as we no longer needed to set up our local server to run your project. Different scripts for dev and prod will make sure that we will do all our testing in development environment first and when things look good, then only we will create your production bundle. Production bundle will disable hot module replacements and also doesn't watch for the changes in real-time

We can get all the parcel CLI commands at https://parceljs.org/cli.html

Basically, that's all we need to start using Parcel.

Examples

We will create below files (contents of each file will be given) as shown in the picture below -


main.css

body {
background-color: yellow;
}


calculate.js

const doAddition = (x, y) => {
var result = x + y;
console.log("Addition : " + result);
};

const doMultiplication = (x, y) => {
var result = x * y;
console.log("Multiplication : " + result);
};

export { doAddition, doMultiplication };


main.js

import "./../css/main.css";
import { doAddition, doMultiplication } from "./calculate.js";

doAddition(10, 20);
doMultiplication(10, 5);


index.html

<!DOCTYPE html>
<html lang="en">
<head>
<title>Testing Parcel</title>
<script src="js/main.js" defer></script>
</head>

<body>
Hello from Sudipta
</body>
</html>

Now we can execute the below command from the terminal which will create the server and if you inspect then we will see the result of addition and multiplication function being printed in the console.

We can see the result by typing the URL (highlighted above) [Note - URL can be different for you] in the browser window and by console should display the result as shown below -

In my next post, I am going to share how we can configure jest and perform testing of our JavaScript code. Till then happy learning.
Share:

Configure Husky in VS Code for JavaScript Development


In my previous post, I have written down the steps which will help you to configure ESLint and Prettier in Visual Studio Code to make your JavaScript development easy and making sure code syntax, as well as best practices, are being followed. If you haven't seen that post, I highly recommend you go through that at - Configure ESLint and Prettier in VS Code for JavaScript Development.

Today I am going to talk about another important tool when you are dealing with committing your JavaScript code in Git repository. It's called Husky. 

From this post, you can expect -
  • Problems that Husky can solve
  • Quick introduction of husky
  • Configure Husky in Visual Studio Code
  • Examples

Problems that Husky can solve

So far by installing ESLint and Prettier we have the option to run the script which will check for syntax and best practices in our JavaScript code. But what about if we forget to execute this script before committing our changes to the GitHub repository? We will be then committing poorly written code into our repo. We can always run ESLing and Prettier as part of our continuous integration, but having a problem identified at that stage is kind of late in the game. We need to fix now and do another commit. 

So it will be good if we can identify these problems even before we do the first commit. And here comes the power of Husky.

Quick Introduction of Husky

Husky is responsible for creating git hooks. Git hooks are scripts that git will execute before or after the events as per your configuration. So in our situation, we will be writing git hooks with husky which will execute eslint before every commit.

Configure Husky in Visual Studio Code

Step 1 - Install Husky

The first thing we need to do is to install Husky as dev dependencies. You can do that by executing the below command from your terminal.
"npm i -D husky".
Once the command executes successfully, husky will be added as a dev dependency in the package.json file.

Step 2 - Create git hook

You can create git hooks for husky by adding the below stuffs in your package.json.
"husky": {
"hooks": {
"pre-commit": "npm run lint -- -- src"
}
}

Basically, you are telling husky to run lint on the src folder before every commit. So if there is any complaint by lint, the actual commit will not happen.

You can get the full husky git options here.

Examples

Now let's create a new JavaScript file called HelloCanada.js and make sure ESLint through error message for that file. Here is the file -
var HelloCanada

console.log('Hello from Canada')

When we try to commit the file, the error will appear and the actual commit will fail. Below is the screenshot of the error message -

As you can see, husky ran the lint command and as it found some error, the actual commit stopped.


 

Share:

Follow Me

Enter your email address:

Delivered by FeedBurner

Labels

Salesforce (105) Apex (47) admin (27) visualforce (21) ADM (20) dev 501 (19) integration (18) learn salesforce (18) 501 (16) lightning (16) javascript (14) SOAP (13) tutorial (11) Certification. (10) Kitchener Developer Group (8) Certification (7) Trigger (7) security (7) test class (7) unit testing (7) Advanced Admin (6) Advanced Apex (6) Sharing and Visibility (6) design pattern (6) developer (6) report (6) salesforce release (6) service cloud (6) trailhead (6) Lightning Experience (5) New Features (5) SOQL (5) css (5) dashboard (5) debug (5) formula (5) mobile (5) solution management (5) use case (5) JSON (4) Kitchener User Group (4) Lightning Web Component (4) Sales Cloud (4) Salesforce DX (4) Tips (4) WebSphere (4) best practice (4) cast iron (4) component (4) deployment (4) event (4) github (4) html (4) polymer (4) profiles (4) responsive (4) tdd (4) ui (4) visual studio code (4) Architect (3) Live Chat (3) Online Event (3) Opportunity (3) Performance (3) Products (3) REST (3) Role (3) Salesforce Certification (3) Scratch Org (3) Study Notes. (3) Summer15 (3) Web Technology (3) automation tool (3) dynamic apex (3) license (3) map (3) mapbox (3) release (3) singleton (3) version controlling (3) Asynchronous callout (2) Aura Framework (2) Bulkify (2) Community (2) Data Architecture and Management Certification (2) Devops (2) Distributed Version Controlling (2) ES6 (2) Eclipse (2) Einstein (2) Enterprise Territory Management (2) Financial Services Cloud (2) Force.com IDE (2) Governor Limit (2) Groups (2) IBM (2) Implicit Sharing (2) JourneyToCTA (2) LWC (2) Lightning Design System (2) Lightning Feature (2) Live Agent (2) Metadata (2) PD II (2) Price Book (2) SOSL (2) Sharing (2) Spring 15 (2) Summer17 (2) Territory (2) VS Code (2) Virtual Event (2) ant (2) basic (2) chatter (2) coding (2) communication (2) configuration (2) console (2) controller (2) documentation (2) dreamforce (2) flow (2) git (2) jquery (2) logging (2) object (2) permission (2) process builder (2) salesforce1 (2) strategy (2) xml (2) Action Plan (1) Action Plan Template (1) Activity Timeline (1) Advanced Currency (1) Agent Productivity (1) Analytics (1) Apex Sharing (1) AppExchange (1) Arrow (1) Article (1) Asynchronous Apex (1) Batch (1) Bots (1) Browser (1) Bulk data load (1) CTA (1) Calendar (1) Canon (1) Case Management (1) Celebration (1) Cheat Sheet (1) Classic (1) Compare (1) Confetti (1) Constructor (1) Contact Center (1) Continuation (1) Continuous Integration (1) Convert (1) Cookie (1) CumulusCI (1) Custom Metadata (1) Custom Object (1) Custom Permission (1) Customer (1) Dated Exchange Rate (1) Decorator Design Pattern (1) Dev Hub (1) Development (1) Diwali (1) EDA (1) ESLint (1) Education Cloud (1) Email (1) FSC (1) Function (1) Future (1) Global Gathering (1) Goals (1) Guest Access (1) Guest Profile (1) Guest User Sharing Rule (1) Guide (1) HEDA (1) Higher Education (1) Household (1) Husky (1) IDE (1) Ideas (1) Improvement (1) KPIs (1) Knowledge Management (1) Large Data Volume (1) LastModifiedDate (1) Manage Currencies (1) Manual Sharing (1) Metrics (1) Multi Currency (1) New (1) New Feature (1) OOPS (1) OWD (1) Omni-Channel (1) Partner (1) Permission Set (1) Person Account (1) Photo (1) Pipeline (1) Platform Developer I (1) Platform Developer II (1) Presentation (1) Prettier (1) Product Schedule (1) Profile (1) Promise (1) Prototype (1) Public Site (1) Query Plan (1) Queueable (1) QuickReference (1) Related records (1) Reports (1) Retrieve (1) Role Hierarchy (1) SAL (1) SFDX (1) Salesfor (1) Salesforce Advisor Link (1) Salesforce Labs (1) Salesforce Optimizer (1) SalesforceDx (1) Schedule (1) Session (1) Sharing Rule (1) Sharing Sets (1) Site (1) Skills (1) Snap-ins (1) Spring 17 (1) Spring 20 (1) Summer14 (1) Summer16 (1) Summer19 (1) Switch (1) SystemModStamp (1) Timeline (1) Unauthorized Access (1) User License (1) Users (1) Validation Rule (1) Web (1) Webservice (1) Winter'15 (1) Winter'17 (1) access (1) actionFunction (1) actionPoller (1) actionRegion (1) actionSupport (1) agile (1) app (1) approval process (1) aura (1) awesome (1) backup (1) bitbucket (1) book (1) campaign (1) change set (1) code (1) code coverage (1) csv (1) custom button (1) custom settings (1) customization (1) data loader (1) database (1) delegate Admin (1) describe (1) dom (1) duplicate (1) dynamic (1) equals (1) error (1) field-level security (1) folder (1) ftp (1) generic (1) gift (1) global describe (1) hashcode (1) import wizard (1) jenkins (1) keynote (1) long running requests (1) monitoring (1) mysql (1) page layout (1) personal (1) power of one (1) record type (1) relationship (1) request (1) review (1) sub-tab (1) tab (1) username (1) visual workflow (1) workflow (1)

Popular Posts

Total Subscribers

Total Pageviews

Contact Me

Name

Email *

Message *