JavaScript Visual Studio Code - Excel with JavaScript

Excel with JavaScript

You can use the Yeoman Generator to create an Excel Add-in project using VS Code with JavaScript
The link above displays the contents of the following files:

package.json 
manifest.xml 
webpack.config.js 
src/taskpane.html 
src/taskpane.js

Other Project Files

These files are displayed below for reference because they have not been included in the link above:

src\commands\commands.html 
src\commands\commands.js 
src\taskpane\taskpane.css

src\commands\commands.html

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="UTF-8" /> 
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" /> 
    <script type="text/javascript" src="https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js"></script> 
</head> 
<body> 
</body> 
</html>

src\commands\commands.js

Office.onReady(info => { 
  // If needed, Office.js is ready to be called 
}); 

function action(event) { 
  const message = { 
    type: Office.MailboxEnums.ItemNotificationMessageType.InformationalMessage, 
    message: "Performed action.", 
    icon: "Icon.80x80", 
    persistent: true 
  } 
  
  Office.context.mailbox.item.notificationMessages.replaceAsync("action", message); 
  event.completed(); 
} 

function getGlobal() { 
  return (typeof self !== "undefined") ? self : 
    (typeof window !== "undefined") ? window : 
    (typeof global !== "undefined") ? global : 
    undefined; 
} 

const g = getGlobal(); 
g.action = action;

src\taskpane\taskpane.css

html, 
 body { 
     width: 100%; 
     height: 100%; 
     margin: 0; 
     padding: 0; 
 } 
 
 ul { 
     margin: 0; 
     padding: 0; 
 } 
 
 .ms-welcome__header { 
    padding: 20px; 
    padding-bottom: 30px; 
    padding-top: 100px; 
    display: -webkit-flex; 
    display: flex; 
    -webkit-flex-direction: column; 
    flex-direction: column; 
    align-items: center; 
 } 

 .ms-welcome__main { 
    display: -webkit-flex; 
    display: flex; 
    -webkit-flex-direction: column; 
    flex-direction: column; 
    -webkit-flex-wrap: nowrap; 
    flex-wrap: nowrap; 
    -webkit-align-items: center; 
    align-items: center; 
    -webkit-flex: 1 0 0; 
    flex: 1 0 0; 
    padding: 10px 20px; 
 } 
 
 .ms-welcome__main > h2 { 
     width: 100%; 
     text-align: center; 
 } 
 
 .ms-welcome__features { 
     list-style-type: none; 
     margin-top: 20px; 
 } 
 
 .ms-welcome__features.ms-List .ms-ListItem { 
     padding-bottom: 20px; 
     display: -webkit-flex; 
     display: flex; 
 } 
 
 .ms-welcome__features.ms-List .ms-ListItem > .ms-Icon { 
     margin-right: 10px; 
 } 
 
 .ms-welcome__action.ms-Button--hero { 
     margin-top: 30px; 
 } 
 
.ms-Button.ms-Button--hero .ms-Button-label { 
  color: #0078d7; 
} 

.ms-Button.ms-Button--hero:hover .ms-Button-label, 
.ms-Button.ms-Button--hero:focus .ms-Button-label{ 
  color: #005a9e; 
  cursor: pointer; 
} 

b { 
    font-weight: bold; 
}