Prettier

Below you will find a code that is unreasonably formatted and seems to be a mess. In this lesson, we’ll set up prettier and see how to fix this up!

Press + to interact
function HelloWorld({greeting = "hello", greeted = '"World"', silent = false, onMouseOver,}) {
    if(!greeting){return null}
  
       // TODO: Don't use random in render
    let num = Math.floor (Math.random() * 1E+7).toString().replace(/\.\d+/ig, "")
  
    return <div className='HelloWorld' title={`You are visitor number ${ num }`} onMouseOver={onMouseOver}>
  
      <strong>{ greeting.slice( 0, 1 ).toUpperCase() + greeting.slice(1).toLowerCase() }</strong>
      {greeting.endsWith(",") ? " " : <span style={{color: '\grey'}}>", "</span> }
      <em>
      { greeted }
      </em>
      { (silent)
        ? "."
        : "!"}
  
      </div>}

Adding a Docker Job

Note: you can make as many jobs as you want to using the above plus button.

Prettier Docker Job

Our Docker job looks like the following:

widget

Let’s see what each field in the above job means:

Job Name

This is just a job name for reference. You can use any name you want to specify for this job.

Press + to interact
prettier

Input File Name

Name of the input file you want to run in code widget. In our case, it is file1.js.

Press + to interact
file1.js

Input File Name is the name of the file that will compile or run. The one the user will write their code in. Once its name is set that file shows up in the code widget and is used by default.

Build Script

Build script compiles before the run script and it is optional.

Run Script

This script runs when we execute the code in the code widget. It is mandatory.

Press + to interact
prettier --single-quote --trailing-comma es5 --write file1.js && cp file1.js /usercode/output

Note that the Run Script contains the following command:

cp file1.js /usercode/output

This makes the formatted file1.js available for download for the user.

All our code/files seen on the user end are held in the /usercode directory

Now that our Prettier environment is all setup, we make a code widget, and select the job name set for prettier as illustrated below:

The file named file1.js automatically appears as specified in the InputFileName field in our docker job. This file will be run, so put any code you want to execute here.

Go ahead and Run the below code. You should see a file named as file1.js in the output window, available for download. This will contain the formatter “prettier” code :)

Press + to interact
function HelloWorld({greeting = "hello", greeted = '"World"', silent = false, onMouseOver,}) {
    if(!greeting){return null}
  
       // TODO: Don't use random in render
    let num = Math.floor (Math.random() * 1E+7).toString().replace(/\.\d+/ig, "")
  
    return <div className='HelloWorld' title={`You are visitor number ${ num }`} onMouseOver={onMouseOver}>
  
      <strong>{ greeting.slice( 0, 1 ).toUpperCase() + greeting.slice(1).toLowerCase() }</strong>
      {greeting.endsWith(",") ? " " : <span style={{color: '\grey'}}>", "</span> }
      <em>
      { greeted }
      </em>
      { (silent)
        ? "."
        : "!"}
  
      </div>}

In the next lesson, we’ll set up Eslint in a similar manner.