Make JavaScript Code prettier | Format your JS or Typescript Code with Prettier in IntelliJ IDEA or Webstorm

Java Developers know it as Checkstyle – JavaScript has similar things, one of them I highly recommend is prettier.

From the Marketplace PlugIns, just install Node and the Prettier PlugIn.

In your terminal or shell, type:

  • npm install --save-dev --save-exact prettier
  • npm install --global prettier
  1. In the Settings/Preferences dialog Ctrl+Alt+S
  2. go to Languages and Frameworks | JavaScript | Prettier.
  3. Choose the Node.js interpreter to use.
  4. From the Prettier package list, select the prettier installation to use.
  5. IntelliJ IDEA will locate the prettier package itself and the field is filled in automatically.
  6. To run Prettier automatically against specific files every time such file is changed and saved, select the Run on save for files checkbox.
  7. Provide a pattern that defines the set of files to be reformatted every timeon save.

Prettier will now also format your files on save.

In you package.json you can specify prettier:

In the project where Prettier is enabled, open package.json and click Yes in the pane at the top of the tab. Sometimes it is shown in the context menu, right click and bottom of the options in the list.

Config File

Example of a .prettierrc.json:

{
"trailingComma": "es5",
"tabWidth": 4,
"semi": false,
"singleQuote": true,
"overrides": [
{
"files": "*.test.js",
"options": {
"semi": true
}
},
{
"files": ["*.html", "legacy/**/*.js", "*.tsx"],
"options": {
"tabWidth": 4
}
}
]
}

Format inline

I select the lines of Code and just press CMD+ALT+SHIFT+P
The Code will be reformatted instantly.

Link to Prettier: https://prettier.io/docs/en/configuration.html

React – use CSS depending on states (change class according to a variable’s state)

For this example I use React Hooks and a Component with a stateful variable.
When the variable is changed, the CSS class is changed accordingly.
The part in the component is automatically re-rendered on the fly.

//The variable is called 'active'. 
//This is an example. Choose any name.
const [active, setActive] = useState(0);

We use the constant #getStyle to return a CSS class name based on the variable.

    const getStyle = (input) => {
        if (input === active){
            // This example is freely chosen. 
            //button-active is the CSS class' name
            return "button-active";
        } else {
            return "button-inactive";
        }
    };

The return statement returns rendered HTML.

//The hard coded value 0 can be any dynamic 
//variable from JS or React, like one from the 
//props (Properties) object
return (
  <div className={getStyle(0)}>
  </div>
);
  • Stateful variable called ‚active‘
  • Const named #getStyle with an input parameter
  • render method returning HTML with a css class name
  • Input is provided to the #getStyle const
  • If the variable ‚active‘ is changed by the application somewhere, the HTML is re-rendered
  • The input is compared to the variable and the name of the CSS class returned

CSS Grid Layout Example – Visible Structure – Easy Tutorial

4 Items, stretched with different sizes across a Matrix 4×4 grid.

You can see the Grid structure in the CSS in this example.

Picture:

CSS:

.item-a {
    grid-area: itemA;
    border: 1px solid violet;
}
.item-b {
    grid-area: itemB;
    border: solid 1px cyan;
}
.item-c {
    grid-area: itemC;
    border: solid 1px yellow;
}
.item-d {
    grid-area: itemD;
    border: solid 1px red;
}

.container {
    height: 100%;
    border: solid 1px green;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr;
    grid-template-areas:
            "itemA itemA itemC itemC"
            "itemA itemA itemC itemC"
            "itemA itemA itemD itemD"
            "itemA itemA itemD itemD";

HTML (in this example a React JS Grid):

return (
        <Grid className={"container"}>
            <Grid item className={"item-a"}></Grid>
            <Grid item className={"item-b"}></Grid>
            <Grid item className={"item-c"}></Grid>
            <Grid item className={"item-d"}></Grid>
        </Grid>
    );

React – stateful variables and objects (State) & Hooks & Components

Imagine you want to re-render a Component when a variable changes its state.

Your Component:

function MyComponent(props) {

Your variable, a name:

const [name, setName] = useState("OLD NAME");

A #useEffect method to react to changes of that specific variable:

useEffect(()=>{
    alert('new name!');//a small alert to show you the effect immediately
    setName('NEW NAME');
}, [name]);

…and a return with that name being rendered:

return (
    <div className={"someFancyCssClass"}>{name}</div>            
);

Note that, in this example, the initial OLD NAME is immediately replaced.
Reason for it: we set the name during initialization in the const.

How to fill display with CSS – determine display size

Usually, when using percentage values, CSS will always refer to the parent container (DIV).

If you want to set the size according to the overall display, the area in which the client and browser displays your content, use vh.

An example CSS class:

.myCssClass {
height: 100vh /*vh resolves to the display size, not the parent container size. It will now fill the screen 100%*/
}

How to debug a React Application in Webstorm

In Webstorm, start your application. I prefer the command line:
$ npm start

Then create a new JavaScript debug configuration:

Run – Edit configurations … add JavaScript Debug.

Choose your project path (because we are Harder IT Consulting, our nickname is HIT – C:\HIT\<application>)

Paste the URL http://localhost:3000 (or the URL you have configured your React Application to run on, 3000 is the default).

Press the DEBUG button at the top right corner with your Debug configuration selected.