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

Showing posts with label visual studio code. Show all posts
Showing posts with label visual studio 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:

Configure ESLint and Prettier in VS Code for JavaScript Development



ESLint and Prettier are a great combination when it comes to doing JavaScript development work in Visual Studio Code. From this post, you can expect -
  • Quick Introduction of ESLint
  • Quick Introduction of Prettier
  • Configure ESLint and Prettier in Visual Studio Code
  • Example


Quick Introduction of ESLint

Writing JavaScript codes with clear coding conventions with automated enforcement is always the practice that every developer should follow. ESLint is that tool for linting Node.js packages, JavaScript files and can be easily configured to enforce many coding styles. Here is what mentioned in the ESLit website -

"ESLint is a static code analysis tool for identifying problematic patterns found in JavaScript code".


Quick Introduction of Prettier

Prettier is an opinionated code formatter. It is highly recommended when comes to making code formatted consistently for you and your team. Prettier supports many languages out of the box.


Configure ESLint and Prettier in Visual Studio Code

Step 1 - Install ESLint and Prettier from the VS Studio Marketplace

We can search for them in VS Studio Marketplace and Install from there.

Step 2 - Global Settings 

I have enable Editor: Format On Save. We can open settings from Ctrl + p and then type > Preferences: Open User Settings. Once opened check the box as shown below -

Step 3 - Initiate npm and create package.json

Execute the command "npm init -y" in the terminal and it will create package.json. Screenshot below


Step 4 - Install ESLint and Prettier as dev dependencies

Execute the command "npm i -D eslint prettier" and it will install the ESLint and Prettier as dev dependencies. Once installed, it will update package.json as -

Step 5 - Install ESLint-Plugin-Prettier and ESLint-Config-Prettier as dev dependencies

Installing this dependency will allow us to run prettier as eslint rules and report any issues. To install execute the command "npm i -D eslint-plugin-prettier eslint-config-prettier".

Step 6 - Install ESLint globally

We have to generate ESLint config files. Definitely we can generate the file manually, but I prefer generating the file through command. In order to generate ESLint config file through command line, we need to install ESLint globally. We can execute the command "sudo npm i -g eslint"

Step 7 - Generate the ESLint config file

We can execute the command "eslint --init" and then answer the questions asked there. This will create the config file named ".eslintrc.json".

Step 8 - Update ESLint configuration 

All the ESLint configurations are listed here.
ESLint-plugin-prettier configurations are listed here.
This is what I recommend for ESLint config -
{
"env": {
"browser": true,
"node": true,
"es6": true
},
"extends": [
"eslint:recommended",
"plugin:prettier/recommended"
],
"plugins": ["prettier"],
"rules": {
"prettier/prettier": "error"
}
}

 

Step 9: Update scripts in package.json

We can write below two lines/scripts in package.json which will help us to run javascript files and also execute eslint.
"start": "node",
"lint": "eslint",

Here is the final package.json file
{
"name": "JavaScriptSetup",
"version": "1.0.0",
"description": "",
"main": "HelloWorld.js",
"scripts": {
"start": "node",
"lint": "eslint",
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "Sudipta Deb",
"license": "ISC",
"devDependencies": {
"@typescript-eslint/eslint-plugin": "^3.6.1",
"@typescript-eslint/parser": "^3.6.1",
"eslint": "^7.4.0",
"eslint-config-prettier": "^6.11.0",
"eslint-plugin-prettier": "^3.1.4",
"prettier": "^2.0.5"
}
}

Step 10: Execute JavaScript 

Let's create HelloWorld.js under src folder with simple statement console.log("Hello World");
From the terminal, execute the below command to execute HelloWorld.js

Note - In the command, I have passed the file name "src/HelloWorld.js" but I have used -- twice in the command. The reason for that to make sure letting npm know that the parameters are not for npm, rather this parameter is for the node so that it understands which file to execute.

Step 11: Execute ESLint and fix errors if needed

Execute the below command "npm run lint -- -- src" which will execute eslint in all the files present src folder. If there is no error, it will just show nothing. In case of error, it will show something like this -

The reason for this error is that Hello World is mentioned with single quotes and ESLint is recommending double quotes. You can fix these problems by executing "npm run lint -- --fix src".

I have shared this initial project in my Github Repo - ESLint-Prettier-VSCode-Setup

Below is the youtube video:



Share:

How to configure Visual Studio Code (IDE) for JavaScript Development



New to JavaScript development? Thinking about which IDE should you use and how to configure your IDE? How to test JavaScript code? How to debug JavaScript Code?

All these are valid and important questions to ask. I am going to create three posts covering each of these above three important points. Today's post is all about answering the first question. From this post, you can expect -
  • How to configure Visual Studio Code (IDE) for JavaScript Development

Configuring Visual Studio Code (IDE) for JavaScript Development

I personally like using Visual Studio Code for all my development work including JavaScript development. It is a very powerful source code editor. It is available for Windows, macOS and Linux. 
You can install it from here.

Once you install it, launch the application. Open the Command Palette and type 'shell command' to execute Shell Command: Install 'code' command in PATH.
Restart VS Code and that makes your editor ready to be configured for JavaScript. Pretty quick, right? Trust me this editor is also very lightweight.

Now to develop JavaScript and execute JavaScript, all you need is node.js. Installing node.js is very simple. You can refer this link

I personally prefer installing node through Brew. To do that, execute the below command from terminal in macOS.
brew install node
You can verify whether node is installed correct by doing this -

 [email protected]  ~/Documents/JavaScript node --version

v14.5.0


With that launch Visual Studio code and open Extension. Search for Babel ES6 and install the same. You can also open Babel ES6/ES7 from here. I highly recommend this as this will help you in coloring your JavaScript code and also highlight any syntax error. That's all you need to configure your IDE (Visual Studio Code) for JavaScript development.

With your Visual Studio code configured, you can execute your JavaScript code from Visual Studio code's terminal by executing node <JavaScript File Name>. Refer the below screenshot -


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 *