Convert Figma logo to code with AI

jdavisclark logoJsFormat

Javascript formatting for Sublime Text 2 & 3

1,419
222
1,419
11

Top Related Projects

49,268

Prettier is an opinionated code formatter.

Beautifier for javascript

29,086

🌟 JavaScript Style Guide, with linter & automatic code fixer

24,981

Find and fix problems in your JavaScript code.

144,559

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

  1. Install Package Control in Sublime Text if not already installed.
  2. Open the Command Palette (Ctrl+Shift+P on Windows/Linux, Cmd+Shift+P on Mac).
  3. Type "Package Control: Install Package" and press Enter.
  4. Search for "JsFormat" and press Enter to install.
  5. 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:

  1. Go to Preferences > Package Settings > JsFormat > Settings - User
  2. Add your preferred settings in JSON format, for example:
{
  "indent_with_tabs": false,
  "indent_size": 2,
  "max_preserve_newlines": 2,
  "space_in_paren": false
}
  1. Save the file and restart Sublime Text for changes to take effect.

Competitor Comparisons

49,268

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.

29,086

🌟 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.

24,981

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.

144,559

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 Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

FOSSA Status

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: false
  • max_preserve_newlines: 4
  • preserve_newlines: true
  • space_in_paren: false
  • jslint_happy: false
  • brace_style: "collapse"
  • keep_array_indentation: false
  • keep_function_indentation: false
  • eval_code: false,
  • unescape_strings: false,
  • break_chained_methods: false*
  • e4x: false
  • wrap_line_length: 0
  • space_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:

  1. 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.
  2. 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.

FOSSA Status