VSCode RMMV ES6 Babel Project Setup


Introduction

Visual studio code has become my new favorite text editor; I can run ES6 compliant code and have it converted to all browsers using Babel. Today, we’re going to setup Babel in VSCode for plugin creation in RMMV.

What Is Babel?

Babel is a JavaScript compiler that converts JavaScript code (ES6, ES7, etc) to code that is compatible with most browsers (mobile, chrome, safari, etc). How it’s compiled is fairly complex, but it’s the most popular JavaScript compiler to date. Check out the website here: https://babeljs.io/

Now, let’s setup Babel in VSCode for our RMMV project.

Downloads

NodeJS (Install this on your computer)

Files

Click view raw, then right click ‘save as’ and don’t change the name.

Task File

.babelrc

Instructions

  1. Open your RMMV Project in Visual Studio Code
    CodeTutorial1.png
  2. Click on workspace settings (File -> Preferences -> Workspace Settings)
    VSCode2.png
    This will create a new .vscode folder.
    VSCode3.png
  3. Place the task file in your .vscode folder.
    VSCode4.png
    VSCode5.png
  4. Place the .babelrc file in your project root directory.
  5. Create a folder inside of your js folder named “plugins_dev“.
    VSCode6.pngVSCode7.png
  6. Open the integrated terminal (View -> Integrated Terminal)
    VSCode9.png
  7. Run the node package manager (npm) command :  npm install –save-dev babel-cliVSCode8.png
    This command will install babel in your project folder.
  8. Install the ‘env’ babel preset; the command is: npm install babel-preset-env –save-dev
    VSCode10.png
  9.  Start the task designated in the tasks.json file with the ‘Run Build Task’ command.
    VSCode11.png

Leave a Reply

Your email address will not be published.