HookyQR / VSCodeBeautify

Enable js-beautify (https://github.com/beautify-web/js-beautify) in VS Code
MIT License
607 stars 178 forks source link

Spaces Added to Escaped Characters #385

Open guitargeek534 opened 3 years ago

guitargeek534 commented 3 years ago

NOTE: Please provide code snippets instead of screen shots. Your issue needs to be replicated, and we need the failing code (text) to do this.

Provide the settings you use: (VS Code workspace and user settings, .jsbeautifyrc, .editorconfig) VS Code Workspace Settings:

{
}

VS Code User Settings:

{
    "workbench.colorTheme": "Material Theme High Contrast",
    "liveSassCompile.settings.formats,": [
        {
            "format": "expanded",
            "extensionName": ".css",
            "savePath": "~\\..\\css"
        }
    ],
    "liveSassCompile.settings.generateMap": false,
    // "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.defaultFormatter": "HookyQR.beautify",
    "[html]": {
        "editor.defaultFormatter": "HookyQR.beautify"
    },
    "window.zoomLevel": 0,
    "bookmarks.wrapNavigation": false,
    "html.format.wrapLineLength": 0,
    "html.format.wrapAttributes": "preserve-aligned",
    "terminal.integrated.shell.windows": "C:\\WINDOWS\\System32\\cmd.exe",
    "prettier.printWidth": 0,
    "prettier.stylelintIntegration": true,
    "[markdown]": {

        "editor.wordWrap": "off",
        "editor.quickSuggestions": false
    },
    "editor.wordWrapColumn": 2000,
    "html.format.indentInnerHtml": true,
    "editor.formatOnPaste": true,
    "editor.formatOnType": true,
    "editor.tabSize": 2,
    "diffEditor.renderSideBySide": true,
    "diffEditor.wordWrap": "off",
    // "beautify.language": {
    //     "html": ["html", "php", "erb"],
    //     "css": [],
    //     "js": []
    // }

}

Action performed

Format html file with HookyQR.beautifyFile command. Software I code in requires && , < , and > characters to be escaped &amp;&amp; , &lt; and &gt;. When I format my code, spaces are added to the escaped characters. example code

<script>
$(document).ready(function () {

/* darkmode */
var darkSwitch = document.getElementById("darkSwitch");
var jswitch = $("#darkSwitch");
console.log(jswitch);
console.log(darkSwitch);
if (darkSwitch) {
function initTheme() {
var darkThemeSelected = localStorage.getItem("darkSwitch") !== null &amp;&amp;
localStorage.getItem("darkSwitch") === "dark";
darkSwitch.checked = darkThemeSelected;
darkThemeSelected ? (
document.body.setAttribute("data-theme", "dark"),
$('table.table').addClass('table-dark'),
$('nav.navbar').removeClass('navbar-light'),
$('nav.navbar').addClass('navbar-dark')
) : (
document.body.removeAttribute("data-theme"),
$('table.table').removeClass('table-dark'),
$('nav.navbar').removeClass('navbar-dark'),
$('nav.navbar').addClass('navbar-light')
);
}

function resetTheme() {
if (darkSwitch.checked) {
$('table.table').addClass('table-dark');
$('nav.navbar').toggleClass('navbar-light navbar-dark');
document.body.setAttribute("data-theme", "dark");
localStorage.setItem("darkSwitch", "dark");
} else {
$('table.table').removeClass('table-dark');
$('nav.navbar').toggleClass('navbar-light navbar-dark');
document.body.removeAttribute("data-theme");
localStorage.removeItem("darkSwitch");
}
}

initTheme();

darkSwitch.addEventListener("click", function (event) {
resetTheme();
});
}
});
/* end darkmode */
</script>

Expected results

Expected to format code normally

<script>
      $(document).ready(function () {

        /* darkmode */
        var darkSwitch = document.getElementById("darkSwitch");
        var jswitch = $("#darkSwitch");
        console.log(jswitch);
        console.log(darkSwitch);
        if (darkSwitch) {
          function initTheme() {
            var darkThemeSelected = localStorage.getItem("darkSwitch") !== null &amp;&amp;
            localStorage.getItem("darkSwitch") === "dark";
            darkSwitch.checked = darkThemeSelected;
            darkThemeSelected ? (
              document.body.setAttribute("data-theme", "dark"),
              $('table.table').addClass('table-dark'),
              $('nav.navbar').removeClass('navbar-light'),
              $('nav.navbar').addClass('navbar-dark')
            ) : (
              document.body.removeAttribute("data-theme"),
              $('table.table').removeClass('table-dark'),
              $('nav.navbar').removeClass('navbar-dark'),
              $('nav.navbar').addClass('navbar-light')
            );
          }

          function resetTheme() {
            if (darkSwitch.checked) {
              $('table.table').addClass('table-dark');
              $('nav.navbar').toggleClass('navbar-light navbar-dark');
              document.body.setAttribute("data-theme", "dark");
              localStorage.setItem("darkSwitch", "dark");
            } else {
              $('table.table').removeClass('table-dark');
              $('nav.navbar').toggleClass('navbar-light navbar-dark');
              document.body.removeAttribute("data-theme");
              localStorage.removeItem("darkSwitch");
            }
          }

          initTheme();

          darkSwitch.addEventListener("click", function (event) {
            resetTheme();
          });
        }
      });
      /* end darkmode */
</script>

Actual results

Beautify does a wonderful job of formatting the code but adds spaces to the escaped characters which causes an error in the software I work with. Is there a way to create an exception for these characters in the settings? Every time I format my code I always have to do a find and replace for the escaped characters which takes a lot of time.


<script>
      $(document).ready(function () {

        /* darkmode */
        var darkSwitch = document.getElementById("darkSwitch");
        var jswitch = $("#darkSwitch");
        console.log(jswitch);
        console.log(darkSwitch);
        if (darkSwitch) {
          function initTheme() {
            var darkThemeSelected = localStorage.getItem("darkSwitch") !== null & amp; & amp;
            localStorage.getItem("darkSwitch") === "dark";
            darkSwitch.checked = darkThemeSelected;
            darkThemeSelected ? (
              document.body.setAttribute("data-theme", "dark"),
              $('table.table').addClass('table-dark'),
              $('nav.navbar').removeClass('navbar-light'),
              $('nav.navbar').addClass('navbar-dark')
            ) : (
              document.body.removeAttribute("data-theme"),
              $('table.table').removeClass('table-dark'),
              $('nav.navbar').removeClass('navbar-dark'),
              $('nav.navbar').addClass('navbar-light')
            );
          }

          function resetTheme() {
            if (darkSwitch.checked) {
              $('table.table').addClass('table-dark');
              $('nav.navbar').toggleClass('navbar-light navbar-dark');
              document.body.setAttribute("data-theme", "dark");
              localStorage.setItem("darkSwitch", "dark");
            } else {
              $('table.table').removeClass('table-dark');
              $('nav.navbar').toggleClass('navbar-light navbar-dark');
              document.body.removeAttribute("data-theme");
              localStorage.removeItem("darkSwitch");
            }
          }

          initTheme();

          darkSwitch.addEventListener("click", function (event) {
            resetTheme();
          });
        }
      });
      /* end darkmode */
</script>