Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ghaschel/eslint-plugin-js-beautify-html
JS Beautify formatting through ESLint
https://github.com/ghaschel/eslint-plugin-js-beautify-html
Last synced: 2 months ago
JSON representation
JS Beautify formatting through ESLint
- Host: GitHub
- URL: https://github.com/ghaschel/eslint-plugin-js-beautify-html
- Owner: ghaschel
- License: mit
- Created: 2022-11-24T15:31:47.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-03-18T20:24:15.000Z (9 months ago)
- Last Synced: 2024-09-19T20:12:11.486Z (3 months ago)
- Language: JavaScript
- Size: 761 KB
- Stars: 2
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# eslint-plugin-js-beautify-html
[](https://www.npmjs.com/package/eslint-plugin-js-beautify-html)
[](https://img.shields.io/github/tag/ghaschel/eslint-plugin-js-beautify-html.svg)
[](https://github.com/ghaschel/eslint-plugin-js-beautify-html/issues)
[](https://github.com/ghaschel/eslint-plugin-js-beautify-html/blob/main/LICENSE)
[](https://snyk.io/test/github/ghaschel/eslint-plugin-js-beautify-html)
[](http://commitizen.github.io/cz-cli/)
JS Beautify formatting through ESLint
This is an effort to provide an ESLint-integrated alternative to Prettier for HTML formatting.
## Table of contents
- [eslint-plugin-js-beautify-html](#eslint-plugin-js-beautify-html)
- [Table of contents](#table-of-contents)
- [Installation](#installation)
- [Configuration](#configuration)
- [.jsbeautifyrc file](#jsbeautifyrc-file)
- [.eslintrc.js file](#eslintrcjs-file)
- [ESLint's autofix](#eslints-autofix)
- [Rules](#rules)
## Installation
Run the following command:
```shell
npm install --save-dev eslint-plugin-js-beautify-html
```
## Configuration
The configuration is divided in two parts:
- JS-Beautify formatting rules: see [.jsbeautifyrc file](#jsbeautifyrc-file) and [.eslintrc.js file](#eslintrcjs-file)
- Enabling ESLint's autofix
### .jsbeautifyrc file
Simply create a `.jsbeautifyrc` file in the root of your project
```json
{
"html": {
"indent_with_tabs": false,
"indent_size": 2,
"max_preserve_newlines": 1,
"preserve_newlines": true,
"indent_inner_html": true,
"wrap_attributes": "force-expand-multiline",
"wrap_line_length": 120,
"end_with_newline": true,
"indent_scripts": "normal"
}
}
```
And set this to your `eslintrc.js`
```javascript
module.exports = {
...
overrides: [
{
files: ['*.html'],
plugins: ['js-beautify-html'],
rules: {
...
'js-beautify-html/format': ['error', { useJsBeautifyRc: true }],
},
},
]
}
```
### .eslintrc.js file
This could also be done using only the `.eslintrc.js` file by setting this into your `.eslintrc.js` file:
```javascript
module.exports = {
...
overrides: [
{
files: ['*.html'],
plugins: ['js-beautify-html'],
rules: {
...
'js-beautify-html/format': [
'error',
{
'indent_with_tabs': false,
'indent_size': 2,
'max_preserve_newlines': 1,
'preserve_newlines': true,
'indent_inner_html': true,
'wrap_attributes': 'force-expand-multiline',
'wrap_line_length': 120,
'end_with_newline': true,
'indent_scripts': 'normal'
},
],
},
},
]
}
```
### ESLint's autofix
Insert the following configurations into your VSCode's `settings.json` file:
```json
{
...
"eslint.options": {
"extensions": [
".ts",
".html"
]
},
"eslint.validate": [
"html",
"javascript",
"typescript",
"javascriptreact",
"typescriptreact"
],
"[html]": {
"editor.formatOnSave": false,
"editor.codeActionsOnSave": {
"source.fixAll": true
}
},
}
```
## Rules
The only available rule is: `js-beautify-html/format` and it is only a placeholder rule in order for JS-Beautify to format the HTML code on source fix.
Please bear in mind, that while the code is not formatted, an error will be displayed in the first character of the file (also in the problems tab if you're using ESLint's VSCode extension), with the description: `Code not formatted`.