SP Formatter is a Chromium (supports Chrome and Edge) extension, which makes SharePoint Column, View and Form Layout JSON formatting a lot easier and faster. 

The most notable features: 

• Live Preview as you type
• Rich Intellisense (suggestions) based on JSON schema, including CSS styles, "@" tokens (@currentField, etc.), "$" (to insert field values)
• VSCode integration mode - see the live preview of your formatting JSON as you type in VSCode
• Easy and fun to use

Recently SP Formatter was updated and received Form Layouts support. More...

At the end of 2020, I worked on a bunch of new features for SP Formatter. SP Formatter is a web extension (supports Chrome and Edge), which transforms the out-of-the-box SharePoint Column (View) Formatting experience and makes JSON editing a lot more convenient. You can watch a short demonstration video on youtube here.  This post covers changes I added in some details. More...

I had a need to hide all documents, which were checked out by users. With help of Column Formatting. When you check out documents, SharePoint sets a special field called CheckoutUser to be equal to a person, who checked out the document. The idea is to check if this field is null and hide a row in a view. 

However, the idea didn't work for some reason. The problem is, that CheckoutUser is a people field. In other words, it's a "complex" field and contains additional properties, like the user's email, id, etc. 

The trick was to use the email property of that field, to check if it's empty or not. In short:

"display": "=if([$CheckoutUser.email] != '', 'block', 'none')"  

Having below full formatting JSON:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
  "debugMode": true,
  "hideSelection": true,
  "hideColumnHeader": true,
  "rowFormatter": {
    "elmType": "div",
    "attributes": {
      "class": "ms-borderColor-neutralLight"
    },
    "style": {
      "box-sizing": "border-box",
      "display": "=if([$CheckoutUser.email] == '', 'block', 'none')",
      "width": "100%",
      "border-width": "1px",
      "border-style": "solid",
      "padding": "0 0 0 20px",
      "margin-bottom": "10px",
      "align-items": "stretch"
    },
    "children": [
      {
        "elmType": "div",
        "style": {
          "flex": "1 0 300px",
          "display": "flex",
          "flex-wrap": "wrap"
        },
        "children": [
          {
            "elmType": "div",
            "style": {
              "flex": "1 0 300px",
              "box-sizing": "border-box",
              "padding": "10px"
            },
            "children": [
              {
                "elmType": "button",
                "attributes": {
                  "class": "ms-fontSize-xl"
                },
                "style": {
                  "line-height": "1.5em",
                  "margin-bottom": "1em",
                  "border": "0",
                  "padding": "0px",
                  "color": "#0077ff",
                  "background-color": "transparent",
                  "cursor": "pointer"
                },
                "txtContent": "[$FileLeafRef]",
                "customRowAction": {
                  "action": "defaultClick"
                }
              },
              {
                "elmType": "div",
                "attributes": {
                  "class": "ms-fontSize-s"
                },
                "style": {
                  "line-height": "1.5em",
                  "margin-bottom": "8px"
                },
                "txtContent": "='Modified by ' + [$Editor.title] + ', ' + toLocaleString([$Modified])"
              }
            ]
          },
          {
            "elmType": "div",
            "style": {
              "flex": "0 0 170px",
              "display": "flex",
              "flex-direction": "column"
            },
            "children": [
              {
                "elmType": "button",
                "customRowAction": {
                  "action": "editProps"
                },
                "txtContent": "Edit Properties",
                "attributes": {
                  "class": "sp-row-button ms-bgColor-neutralLighter ms-fontWeight-semibold"
                },
                "style": {
                  "width": "145px",
                  "height": "32px",
                  "margin": "20px 0 10px 0"
                }
              }
            ]
          }
        ]
      }
    ]
  }
}

When applied, one checked out document was hidden:

Hope this little trick will help you build a little bit better column/view formatting experience. 

Title image credits - Solution Vectors by Vecteezy

Column formatting allows you to customize look and feel for columns and views in modern SharePoint. That's a cool feature and gives you a lot of space for applying nice styling for your SharePoint data. It's called column formatting despite that you can customize views as well. You do not have to be a developer to use column formatting, yet you should have some knowledge of CSS and HTML. To learn more about this feature please read Use column formatting to customize SharePoint and check out an awesome list of community samples around column formatting.

To apply formatting, you should enter a special JSON into the textarea on a SharePoint list page. There is one thing here which I don't like very much. As a developer, I expect that column formatting experience provides code suggestions (also called intellisense in developer world), live preview, search and replace, brace matching and some other things available in a normal integrated development environment. You can partially improve the situation if you edit your formatting JSON in Visual Studio Code with custom JSON schema applied. However even in that case, if you want to see how your column formatting looks like in SharePoint, you have to copy-paste it into SharePoint and click Preview, which is inconvenient. Also, the schema in Visual Studio Code lacks some additional features available in SP Formatter. 

Of course, default SharePoint column formatting experience doesn't provide rich editing features, because it's simply a textarea element. To improve it I created SP Formatter - a Google Chrome extension which transforms default column formatting into the full-featured editor. More...