### Install js-beautify Locally (Node.js) Source: https://github.com/beautifier/js-beautify/blob/main/README.md Install the js-beautify NPM package locally for use as a Node.js library. This is the default installation method. ```bash npm install js-beautify ``` -------------------------------- ### Install Beta/RC Versions (Node.js) Source: https://github.com/beautifier/js-beautify/blob/main/README.md Install beta or release candidate versions of js-beautify by specifying the `@next` tag. ```bash npm install js-beautify@next ``` -------------------------------- ### Install css-beautify (Python) Source: https://github.com/beautifier/js-beautify/blob/main/README.md Install the css-beautify package for reformatting CSS files using Python. ```bash pip install cssbeautifier ``` -------------------------------- ### Install js-beautify Globally (Node.js) Source: https://github.com/beautifier/js-beautify/blob/main/README.md Install the js-beautify NPM package globally to use the `js-beautify` executable. The beautified output is sent to stdout by default. ```bash npm -g install js-beautify js-beautify foo.js ``` -------------------------------- ### Install jsbeautifier (Python) Source: https://github.com/beautifier/js-beautify/blob/main/README.md Install the Python version of the beautifier using pip. Note that this version only reformats JavaScript. ```bash pip install jsbeautifier ``` -------------------------------- ### Example HTML with js-beautify CDN Source: https://github.com/beautifier/js-beautify/blob/main/README.md An example of how to include the js-beautify minified JavaScript file in an HTML document and link to your own script. ```html . . . ``` -------------------------------- ### Manually Test JavaScript Changes Locally Source: https://github.com/beautifier/js-beautify/blob/main/CONTRIBUTING.md Start a local development server to manually test changes to the JavaScript beautifier. Access the beautifier at the specified URL. ```bash make serve ``` -------------------------------- ### Example Configuration Tree for js-beautify Source: https://github.com/beautifier/js-beautify/blob/main/README.md This JSON configuration demonstrates how to set global defaults and override them for specific languages like HTML, CSS, and JavaScript. It shows inheritance of settings like indent_size and specific overrides. ```json { "indent_size": 4, "html": { "end_with_newline": true, "js": { "indent_size": 2 }, "css": { "indent_size": 2 } }, "css": { "indent_size": 1 }, "js": { "preserve-newlines": true } } ``` -------------------------------- ### Format JavaScript File via CLI Source: https://github.com/beautifier/js-beautify/blob/main/README.md Command-line usage for beautifying a JavaScript file using the globally installed js-beautify executable. Output is sent to stdout. ```bash $ js-beautify foo.js ``` -------------------------------- ### Beautify JavaScript with Python Library and Options Source: https://github.com/beautifier/js-beautify/blob/main/README.md Example of using the jsbeautifier Python library with custom options. Options are set on a default options object before beautifying. ```python opts = jsbeautifier.default_options() opts.indent_size = 2 opts.space_in_empty_paren = True res = jsbeautifier.beautify('some JavaScript', opts) ``` -------------------------------- ### Beautify JavaScript, HTML, CSS with ESM Imports Source: https://github.com/beautifier/js-beautify/blob/main/README.md Example of using js-beautify with ESM imports in Node.js. Allows beautifying JavaScript, HTML, and CSS code using dedicated methods. ```javascript // 'beautify' can be any name here. import beautify from 'js-beautify'; beautify.js(data, options); beautify.html(data, options); beautify.css(data, options); ``` -------------------------------- ### Format JavaScript File via Python CLI Source: https://github.com/beautifier/js-beautify/blob/main/README.md Command-line usage for beautifying a JavaScript file using the js-beautify executable, typically installed via Python. Output is sent to stdout. ```bash $ js-beautify file.js ``` -------------------------------- ### Beautify JSON String in Browser Source: https://github.com/beautifier/js-beautify/blob/main/README.md Example of beautifying a JSON string using the js_beautify function exposed by the web library. Requires embedding script tags in HTML. ```javascript const options = { indent_size: 2, space_in_empty_paren: true } const dataObj = {completed: false,id: 1,title: "delectus aut autem",userId: 1,} const dataJson = JSON.stringify(dataObj) js_beautify(dataJson, options) /* OUTPUT { "completed": false, "id": 1, "title": "delectus aut autem", "userId": 1, } */ ``` -------------------------------- ### Beautify JavaScript Code as Node.js Library Source: https://github.com/beautifier/js-beautify/blob/main/README.md Using js-beautify as a Node.js library to beautify JavaScript code read from a file. Requires local installation and importing the 'js' beautifier. ```javascript var beautify = require('js-beautify/js').js, fs = require('fs'); fs.readFile('foo.js', 'utf8', function (err, data) { if (err) { throw err; } console.log(beautify(data, { indent_size: 2, space_in_empty_paren: true })); }); ``` -------------------------------- ### Build and Test JavaScript Implementation Source: https://github.com/beautifier/js-beautify/blob/main/CONTRIBUTING.md Run this command to build the JavaScript code and execute its unit tests. This is part of the local development workflow. ```bash make js ``` -------------------------------- ### Build and Test Python Implementation Source: https://github.com/beautifier/js-beautify/blob/main/CONTRIBUTING.md Run this command to build the Python code and execute its unit tests. This is part of the local development workflow for the Python implementation. ```bash make py ``` -------------------------------- ### Run Tests on Both Implementations Source: https://github.com/beautifier/js-beautify/blob/main/CONTRIBUTING.md Execute this command to run style checks and generate/run tests for both the JavaScript and Python implementations. This ensures consistency across both codebases. ```bash make ``` -------------------------------- ### Run CI Checks Locally Before PR Source: https://github.com/beautifier/js-beautify/blob/main/CONTRIBUTING.md Execute this command to perform local checks that mimic the Continuous Integration pipeline before submitting a pull request. Fix any reported errors to ensure smooth integration. ```bash make ci ``` -------------------------------- ### Load Debug Version of Beautifier Source: https://github.com/beautifier/js-beautify/blob/main/CONTRIBUTING.md Open this URL in a browser to load a human-readable debug version of the beautifier source code. Useful for inspecting behavior during local testing. ```bash http://localhost:8080/?debug ``` -------------------------------- ### Include js-beautify via CDN (Web Library) Source: https://github.com/beautifier/js-beautify/blob/main/README.md Include the js-beautify library in your HTML document using script tags from a CDN. Separate scripts are available for JavaScript, CSS, and HTML beautification, as well as minified versions. ```html ``` -------------------------------- ### JavaScript Bookmarklet for Code Beautification Source: https://github.com/beautifier/js-beautify/wiki/js-beautify-bookmarklet Use this bookmarklet to format JavaScript code displayed on a web page. Create a new bookmark, set the URL to 'javascript:' followed by this code. It dynamically loads js-beautify.js and applies it to the content of the first `body > pre` element. ```javascript function loadJS(url, callback) { var s = document.createElement('script'); s.src = url; if (s.addEventListener) { s.addEventListener('load', callback, false); } else { s.onreadystatechange = function () { if (this.readyState == 'complete') { callback(); s = null; } } } s.type = 'text/javascript'; document.getElementsByTagName('head')[0].appendChild(s); }; loadJS("https://raw.githubusercontent.com/beautify-web/js-beautify/master/js/lib/beautify.js", function() { var pre = document.querySelector("body > pre"); var text = pre.textContent; var fmt = js_beautify(text); pre.textContent = fmt; }); ``` -------------------------------- ### CSS Beautifier Options Source: https://github.com/beautifier/js-beautify/blob/main/README.md Lists the available options for the CSS beautifier, including indentation, line endings, brace style, and rule formatting. These options can be passed as an object to the beautifier function. ```text CSS Beautifier Options: -s, --indent-size Indentation size [4] -c, --indent-char Indentation character [" "] -t, --indent-with-tabs Indent with tabs, overrides -s and -c -e, --eol Character(s) to use as line terminators. (default newline - "\n") -n, --end-with-newline End output with newline -b, --brace-style [collapse|expand] ["collapse"] -L, --selector-separator-newline Add a newline between multiple selectors -N, --newline-between-rules Add a newline between CSS rules --indent-empty-lines Keep indentation on empty lines ``` -------------------------------- ### Importing CSS and HTML Beautifiers Source: https://github.com/beautifier/js-beautify/blob/main/README.md Demonstrates how to import the CSS and HTML beautifier functions programmatically from the 'js-beautify' package. These functions can also be accessed via the 'css' and 'html' exports. ```javascript var beautify_js = require('js-beautify'); // also available under "js" export var beautify_css = require('js-beautify').css; var beautify_html = require('js-beautify').html; // All methods accept two arguments, the string to be beautified, and an options object. ``` -------------------------------- ### HTML Beautifier Options Source: https://github.com/beautifier/js-beautify/blob/main/README.md Details the extensive options available for the HTML beautifier, covering indentation, line wrapping, attribute formatting, and handling of unformatted content. These options control how HTML code is parsed and reformatted. ```text HTML Beautifier Options: -s, --indent-size Indentation size [4] -c, --indent-char Indentation character [" "] -t, --indent-with-tabs Indent with tabs, overrides -s and -c -e, --eol Character(s) to use as line terminators. (default newline - "\n") -n, --end-with-newline End output with newline -p, --preserve-newlines Preserve existing line-breaks (--no-preserve-newlines disables) -m, --max-preserve-newlines Maximum number of line-breaks to be preserved in one chunk [10] -I, --indent-inner-html Indent and sections. Default is false. -b, --brace-style [collapse-preserve-inline|collapse|expand|end-expand|none] ["collapse"] -S, --indent-scripts [keep|separate|normal] ["normal"] -w, --wrap-line-length Maximum characters per line (0 disables) [250] -A, --wrap-attributes Wrap attributes to new lines [auto|force|force-aligned|force-expand-multiline|aligned-multiple|preserve|preserve-aligned] ["auto"] -M, --wrap-attributes-min-attrs Minimum number of html tag attributes for force wrap attribute options [2] -i, --wrap-attributes-indent-size Indent wrapped attributes to after N characters [indent-size] (ignored if wrap-attributes is "aligned") -d, --inline List of tags to be considered inline tags --inline_custom_elements Inline custom elements [true] -U, --unformatted List of tags (defaults to inline) that should not be reformatted -T, --content_unformatted List of tags (defaults to pre) whose content should not be reformatted -E, --extra_liners List of tags (defaults to [head,body,/html] that should have an extra newline before them. --editorconfig Use EditorConfig to set up the options --indent_scripts Sets indent level inside script tags ("normal", "keep", "separate") --unformatted_content_delimiter Keep text content together between this string [""] --indent-empty-lines Keep indentation on empty lines --templating List of templating languages (auto,none,django,erb,handlebars,php,smarty,angular) ["auto"] auto = none in JavaScript, all in html ``` -------------------------------- ### Beautify JavaScript String with Python Library Source: https://github.com/beautifier/js-beautify/blob/main/README.md Using the jsbeautifier Python library to beautify a JavaScript string. Provides simple function calls for beautification. ```python import jsbeautifier res = jsbeautifier.beautify('your JavaScript string') res = jsbeautifier.beautify_file('some_file.js') ``` -------------------------------- ### JavaScript Bookmarklet for Beautifying Page Scripts Source: https://github.com/beautifier/js-beautify/blob/main/index.html Drag this bookmarklet to your bookmarks to view and beautify all scripts used on the current page. It extracts inline scripts and external script sources. ```javascript javascript:(function(){s=document.getElementsByTagName('SCRIPT');tx='';sr=[];for(i=0;i'+(sr.join("\n"))+"\n\n-----\n\n"+tx+'');document.close();}})(); ``` -------------------------------- ### Preserve Code Formatting in JavaScript Source: https://github.com/beautifier/js-beautify/blob/main/README.md Use the preserve directive to maintain the existing formatting of a code section within JavaScript files. The beautifier will parse the code but keep its original layout. ```javascript // Use preserve when the content is valid syntax in the current language, JavaScript in this case. // This will parse the code and preserve the existing formatting. /* beautify preserve:start */ { browserName: 'internet explorer', platform: 'Windows 7', version: '8' } /* beautify preserve:end */ ``` -------------------------------- ### Ignore Code Section in JavaScript Source: https://github.com/beautifier/js-beautify/blob/main/README.md Use the ignore directive to prevent the beautifier from parsing and formatting specific parts of a JavaScript file. This is useful for sections containing non-JavaScript syntax. ```javascript // Use ignore when the content is not parsable in the current language, JavaScript in this case. var a = 1; /* beautify ignore:start */ {This is some strange{template language{using open-braces? /* beautify ignore:end */ ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.