Top Related Projects
Prettier is an opinionated code formatter.
Beautifier for javascript
🌟 JavaScript Style Guide, with linter & automatic code fixer
Find and fix problems in your JavaScript code.
JavaScript Style Guide
Quick Overview
JsFormat is a JavaScript formatting plugin for Sublime Text. It provides automatic code formatting and beautification for JavaScript files, helping developers maintain consistent code style and improve readability.
Pros
- Easy to use with a simple keyboard shortcut or command palette
- Customizable formatting options to match personal or team preferences
- Supports both JavaScript and JSON formatting
- Integrates seamlessly with Sublime Text's workflow
Cons
- Limited to Sublime Text editor, not available for other IDEs
- May conflict with other JavaScript-related plugins
- Occasional formatting issues with complex or unconventional code structures
- Requires manual installation and configuration
Getting Started
- Install Package Control in Sublime Text if not already installed.
- Open the Command Palette (Ctrl+Shift+P on Windows/Linux, Cmd+Shift+P on Mac).
- Type "Package Control: Install Package" and press Enter.
- Search for "JsFormat" and press Enter to install.
- To use, open a JavaScript file and press Ctrl+Alt+F (Cmd+Alt+F on Mac) or use the Command Palette and search for "JsFormat: Format JavaScript".
To customize formatting options:
- Go to Preferences > Package Settings > JsFormat > Settings - User
- Add your preferred settings in JSON format, for example:
{
"indent_with_tabs": false,
"indent_size": 2,
"max_preserve_newlines": 2,
"space_in_paren": false
}
- Save the file and restart Sublime Text for changes to take effect.
Competitor Comparisons
Prettier is an opinionated code formatter.
Pros of Prettier
- Supports a wider range of languages and file types
- More actively maintained with frequent updates
- Offers more configuration options for fine-tuning formatting
Cons of Prettier
- Can be more opinionated, potentially leading to unexpected formatting changes
- May require more setup and configuration for specific project needs
Code Comparison
JsFormat:
function example(param1,param2) {
return param1+param2;
}
Prettier:
function example(param1, param2) {
return param1 + param2;
}
Summary
Prettier offers more comprehensive language support and active development compared to JsFormat. It provides greater flexibility in configuration but may require more initial setup. JsFormat is simpler and less opinionated but has limited language support. The code comparison shows that Prettier tends to enforce more consistent spacing and indentation rules.
Beautifier for javascript
Pros of js-beautify
- More actively maintained with frequent updates
- Supports multiple programming languages beyond JavaScript
- Available as a standalone CLI tool and library for various platforms
Cons of js-beautify
- Can be slower for large files due to its comprehensive feature set
- Configuration options may be overwhelming for some users
- Occasionally produces inconsistent results with complex code structures
Code Comparison
JsFormat:
function example(a,b){
return a+b;
}
js-beautify:
function example(a, b) {
return a + b;
}
Additional Notes
JsFormat is primarily a Sublime Text plugin, while js-beautify is a more versatile tool that can be integrated into various environments. js-beautify offers more customization options but may require more setup time. JsFormat is simpler to use within Sublime Text but has limited functionality outside of that environment.
Both tools aim to improve code readability, but js-beautify's broader language support and active development make it a more comprehensive solution for teams working with multiple languages or requiring consistent formatting across different platforms.
🌟 JavaScript Style Guide, with linter & automatic code fixer
Pros of Standard
- Widely adopted and actively maintained with a large community
- Includes a linter and automatic code fixer
- Supports modern JavaScript features and frameworks
Cons of Standard
- Opinionated style guide with limited configuration options
- May require more setup and integration compared to simpler formatters
- Potentially slower performance due to comprehensive linting
Code Comparison
JsFormat:
function example(param1, param2) {
var result = param1 + param2;
return result;
}
Standard:
function example (param1, param2) {
const result = param1 + param2
return result
}
Summary
Standard is a more comprehensive tool that combines linting and formatting, while JsFormat focuses primarily on code formatting. Standard offers a broader set of features and community support but may be less flexible in terms of configuration. JsFormat provides a simpler, more lightweight approach to code formatting but lacks the additional linting capabilities of Standard. The choice between the two depends on project requirements, team preferences, and the desired level of code style enforcement.
Find and fix problems in your JavaScript code.
Pros of ESLint
- More comprehensive: ESLint is a full-featured linting tool that checks for a wide range of code quality issues and style violations
- Highly configurable: Offers extensive customization options through configuration files and plugins
- Active development: Regularly updated with new features and improvements
Cons of ESLint
- Steeper learning curve: Requires more setup and configuration compared to JsFormat
- Resource-intensive: Can be slower to run, especially on larger codebases
Code Comparison
JsFormat (example of formatting):
function example() {
var x = 1;
var y = 2;
return x + y;
}
ESLint (example of linting):
// eslint-disable-next-line no-unused-vars
function example() {
const x = 1;
const y = 2;
return x + y;
}
ESLint not only formats the code but also provides linting suggestions, such as using const
instead of var
and detecting unused variables.
JavaScript Style Guide
Pros of JavaScript
- Comprehensive style guide covering various aspects of JavaScript development
- Widely adopted and maintained by a large community
- Includes explanations and examples for each rule
Cons of JavaScript
- Can be overwhelming for beginners due to its extensive nature
- May require additional tooling or configuration to enforce rules
Code Comparison
JsFormat:
function example(param1, param2) {
var result = param1 + param2;
return result;
}
JavaScript:
function example(param1, param2) {
const result = param1 + param2;
return result;
}
Key Differences
- JsFormat focuses on code formatting and indentation
- JavaScript provides a comprehensive style guide with best practices
- JsFormat is a Sublime Text plugin, while JavaScript is a standalone guide
- JavaScript emphasizes modern JavaScript features and practices
Use Cases
JsFormat:
- Quick code formatting in Sublime Text
- Maintaining consistent indentation across projects
JavaScript:
- Establishing coding standards for teams
- Learning best practices for JavaScript development
- Improving code quality and maintainability
Community and Support
JsFormat:
- Smaller community focused on Sublime Text users
- Limited updates and maintenance
JavaScript:
- Large, active community with regular updates
- Extensive documentation and resources available
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual CopilotREADME
LOOKING FOR AN ADDITIONAL MAINTAINER
I haven't been giving JsFormat the attention it deserves lately, and I'd like to bring on someone else to help maintain the project. Shoot me an email if you are interested.
About the project
JsFormat is a javascript formatting plugin for Sublime Text 2. It uses jsbeautifier to format whole js or json files, or the selected portion(s).
Features
- javascript/json formatting (obviously)
- all settings are customizable (whitespace, formatting style, etc..)
- .jsbeautifyrc settings files support for even more control on a per-project basis
- puts the cursor back in the same location it was before formatting (accounts for whitespace/newline changes)
- Sublime Text 3 support
Settings
JsFormat uses whatever tab/indent settings are configured with the standard translate_tabs_to_spaces
and tab_size
sublime settings.
The following JsBeautifier settings are available in JsFormat/JsFormat.sublime-settings (defaults shown below). Check out the official jsbeautifier documentation for more details on the options:
indent_with_tabs
: falsemax_preserve_newlines
: 4preserve_newlines
: truespace_in_paren
: falsejslint_happy
: falsebrace_style
: "collapse"keep_array_indentation
: falsekeep_function_indentation
: falseeval_code
: false,unescape_strings
: false,break_chained_methods
: false*e4x
: falsewrap_line_length
: 0space_after_anon_function
: false
The following JsFormat specific settings are also exposed:
format_on_save
: false (format files on buffer save)format_on_save_extensions
: [["js", "json"]] (extensions of files that will be formatted on save)jsbeautifyrc_files
: false (see the .jsbeautifyrc files section)
I had temporary lapse of judgment a while back and merged a pull request that modified jsbeautifier. As a result, the functionality that
was added from that pull request has been lost; "ensure_space_before_linestarters"
is no longer supported.
The JsFormat specific ensure_newline_at_eof_on_save
setting has also been removed. This functionality exists in sublime core.
jsbeautifyrc files
JsFormat now supports .jsbeautifyrc
JSON files (disabled by default), which themselves support any of the exposed JsBeautifier options. The option augmentation order is: default options -> user settings -> .jsbeautifyrc
option files.
A hierarchy of .jsbeautifyrc
files is supported, where rc files at the deeper levels override the settings from rc files at higher levels. For example, given the file structure listed below, formatting /home/you/myProject/app.js
would inherit settings from: default -> user settings -> /home/you/myProject/.jsbeautifyrc
, while formatting /home/you/myProject/tests/test.js
would inherit settings from: default -> user settings -> /home/you/myProject/.jsbeautifyrc
-> /home/you/myProject/tests/.jsbeautifyrc
- /home/you/myProject/.jsbeautifyrc
- /home/you/myProject/app.js
- /home/you/myProject/tests/.jsbeautifyrc
- /home/you/myProject/tests/test.js
Installation
Package Control (Recommended)
JsFormat is now included in the default repository channel for Package Control. It should show up in your install list with no changes.
If it does not show up, or you are on an older version of Package Control, add https://github.com/jdavisclark/JsFormat as a Package Control repository. JsFormat will show up in the package install list.
Git Clone
Clone this repository in to the Sublime Text 2 "Packages" directory, which is located where ever the "Preferences" -> "Browse Packages" option in sublime takes you.
Key Bindings
The default key binding is "ctrl+alt+f"
Key Binding Conflicts
Unfortunately there are other plugins that use "ctrl + alt + f", this is a hard problem to solve. If JsFormat works OK via the command palette but does nothing when you use the "ctrl + alt + f" shortcut, you have two options:
- Add
{ "keys": ["ctrl+alt+f"], "command": "js_format", "context": [{"key": "selector", "operator": "equal", "operand": "source.js,source.json"}] }
to your user keybindings file. This will override anything specified by a plugin. - Find the offending plugin, and change the shortcut in its sublime-keymap file (will revert on updates)
Command Palette
Open the command palette via "ctrl + shift + p", Jsformat appears as "Format: Javascript"
License
Copyright (C) 2012 Davis Clark
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
Top Related Projects
Prettier is an opinionated code formatter.
Beautifier for javascript
🌟 JavaScript Style Guide, with linter & automatic code fixer
Find and fix problems in your JavaScript code.
JavaScript Style Guide
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual Copilot