Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add config to ignore formatting #72

Merged
merged 16 commits into from
Aug 31, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
109 changes: 75 additions & 34 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,73 +4,114 @@
 
[![Release](https://github.com/aliariff/vscode-erb-beautify/actions/workflows/release.yaml/badge.svg)](https://github.com/aliariff/vscode-erb-beautify/actions/workflows/release.yaml)

Most of solution that exist in the internet is tell you to create a task and call it using ctrl-shift-p menu.
## Overview

This extension basically using [htmlbeautifier](https://github.com/threedaymonk/htmlbeautifier) to format your file using the Formatter API from the vscode, so no need to create a hack using Task, etc.
The **ERB Formatter/Beautify** extension for Visual Studio Code uses the [htmlbeautifier](https://github.com/threedaymonk/htmlbeautifier) gem to format ERB files, providing a seamless experience with the VS Code Formatter API. Unlike other solutions that require setting up tasks or manual formatting, this extension integrates directly with VS Code to format your ERB files automatically.

## Features

- Formats ERB files using `htmlbeautifier`.
- Works with the VS Code Formatter API for a native experience.
- Supports custom configuration options for indentation, blank lines, and error handling.
- Ability to ignore specific files or patterns.

![Demo GIF](./images/demo.gif)

## Requirements
## Installation

```
### Requirements

To use this extension, you must have `htmlbeautifier` installed on your system. You can install it globally or add it to your project's Gemfile.

#### Install Globally

```bash
gem install htmlbeautifier
```

or
#### Install with Bundler

To use the gem with Bundler, add to your `Gemfile`:
Add the following to your `Gemfile`:

```ruby
gem 'htmlbeautifier'
```

NOTE: For you that have a filename with extension `.html.erb`, your file might be recognized as `html` file, not as `erb` file. In that case, add a setting in your `settings.json` like below:
Then run:

```bash
bundle install
```

## Configuration

### Resolving File Recognition Issues

If `.html.erb` files are recognized as HTML instead of ERB, add the following to your `settings.json` to associate `.html.erb` files with the ERB language:

```json
"files.associations": {
"*.html.erb": "erb"
}
```

### Setting Default Formatter and Enabling Format-on-Save

To set the default formatter for ERB files and enable format-on-save, add the following to your `settings.json`:

```json
"[erb]": {
"editor.defaultFormatter": "aliariff.vscode-erb-beautify",
"editor.formatOnSave": true
},
"files.associations": {
"*.html.erb": "erb"
}
```

## Known Issues
This ensures that the extension formats ERB files automatically whenever they are saved.

- `invalid byte sequence in US-ASCII`
### Disabling Formatting for Specific Files

Add below setting. [Reference](https://github.com/aliariff/vscode-erb-beautify/issues/47)
To disable formatting for specific ERB files, such as email templates, use the `ignoreFormatFilePatterns` setting. Add the following to your `settings.json`:

```json
"vscode-erb-beautify.customEnvVar": {
"LC_ALL": "en_US.UTF-8"
}
```
```json
"vscode-erb-beautify.ignoreFormatFilePatterns": ["**/email_templates/**/*.erb"]
```

## Settings
This configuration ignores all `.erb` files inside the `email_templates` directory.

| Setting | Description | Default |
| ------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------- | -------------- |
| `vscode-erb-beautify.executePath` | Path to the htmlbeautifier executable, set this to absolute path when you have different htmlbeautifier location | htmlbeautifier |
| `vscode-erb-beautify.useBundler` | Execute htmlbeautifier using bundler (ie 'bundle exec htmlbeautifier'). If this true, vscode-erb-beautify.executePath is ignored | false |
| `vscode-erb-beautify.bundlerPath` | Path to the bundler executable, set this to absolute path when you have different bundler location | bundle |
| `vscode-erb-beautify.tabStops` | Set number of spaces per indent | 2 |
| `vscode-erb-beautify.tab` | Indent using tabs | false |
| `vscode-erb-beautify.indentBy` | Indent the output by NUMBER steps | 0 |
| `vscode-erb-beautify.stopOnErrors` | Stop when invalid nesting is encountered in the input | false |
| `vscode-erb-beautify.keepBlankLines` | Set number of consecutive blank lines | 0 |
| `vscode-erb-beautify.customEnvVar` | Custom environment variables to pass to the htmlbeautifier | {} |
### Fixing Encoding Issues

## References
If you encounter the `Invalid byte sequence in US-ASCII` error, add the following setting to your `settings.json` to set the correct locale:

[Issue](https://github.com/threedaymonk/htmlbeautifier/issues/49)
```json
"vscode-erb-beautify.customEnvVar": {
"LC_ALL": "en_US.UTF-8"
}
```

For more details, see the [related issue](https://github.com/aliariff/vscode-erb-beautify/issues/47).

[Issue](https://github.com/rubyide/vscode-ruby/issues/56)
## Settings

Below is a list of settings you can configure in your `settings.json` file:

| Setting | Description | Default |
| ---------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------- | ---------------- |
| `vscode-erb-beautify.executePath` | Path to the `htmlbeautifier` executable. Set this to an absolute path if `htmlbeautifier` is installed in a non-standard location. | `htmlbeautifier` |
| `vscode-erb-beautify.useBundler` | Execute `htmlbeautifier` using Bundler (e.g., `bundle exec htmlbeautifier`). If true, `vscode-erb-beautify.executePath` is ignored. | `false` |
| `vscode-erb-beautify.bundlerPath` | Path to the Bundler executable. Set this to an absolute path if Bundler is installed in a non-standard location. | `bundle` |
| `vscode-erb-beautify.tabStops` | Number of spaces per indent. | `2` |
| `vscode-erb-beautify.tab` | Indent using tabs instead of spaces. | `false` |
| `vscode-erb-beautify.indentBy` | Indent the output by a specified number of steps. | `0` |
| `vscode-erb-beautify.stopOnErrors` | Stop formatting when invalid nesting is encountered in the input. | `false` |
| `vscode-erb-beautify.keepBlankLines` | Number of consecutive blank lines to keep in the formatted output. | `0` |
| `vscode-erb-beautify.customEnvVar` | Custom environment variables to pass to `htmlbeautifier`. | `{}` |
| `vscode-erb-beautify.ignoreFormatFilePatterns` | Glob patterns for files to ignore during formatting. | `[]` |

## References

[Ref](https://medium.com/@costa.alexoglou/enable-formatting-with-erb-files-in-vscode-d4b4ff537017)
- [Issue on `htmlbeautifier`](https://github.com/threedaymonk/htmlbeautifier/issues/49)
- [VS Code Ruby Extension Issue](https://github.com/rubyide/vscode-ruby/issues/56)
- [Enable Formatting with ERB Files in VS Code](https://medium.com/@costa.alexoglou/enable-formatting-with-erb-files-in-vscode-d4b4ff537017)

## Credits

Expand Down
27 changes: 20 additions & 7 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

12 changes: 11 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -82,6 +82,14 @@
"type": "object",
"default": {},
"description": "Custom environment variables to pass to the htmlbeautifier"
},
"vscode-erb-beautify.ignoreFormatFilePatterns": {
"type": "array",
"default": [],
"items": {
"type": "string"
},
"description": "Ignore formatting for files matching these patterns"
}
}
}
Expand All @@ -97,6 +105,7 @@
"devDependencies": {
"@semantic-release/changelog": "^6.0.3",
"@semantic-release/git": "^10.0.1",
"@types/micromatch": "^4.0.9",
"@types/mocha": "^10.0.7",
"@types/node": "20.x",
"@types/vscode": "^1.80.0",
Expand All @@ -110,6 +119,7 @@
"typescript": "^5.4.5"
},
"dependencies": {
"is-wsl": "^2.2.0"
"is-wsl": "^2.2.0",
"micromatch": "^4.0.8"
}
}
Loading