diff --git a/changelog_unreleased/html/11006.md b/changelog_unreleased/html/11006.md
new file mode 100644
index 000000000..ec31be784
--- /dev/null
+++ b/changelog_unreleased/html/11006.md
@@ -0,0 +1,35 @@
+#### Replace `jsxBracketSameLine` option with `bracketSameLine` option (#11006 by @kurtztech)
+
+Deprecate the `jsxBracketSameLine` option in favour of new `bracketSameLine` option that will work for HTML, Angular, Vue, and JSX.
+
+<!-- prettier-ignore -->
+```html
+<!-- Input -->
+<div id="foo-bar-baz"
+  class="bar-foo-baz"
+  title="a sample title"
+  data-foo="bar"
+  data-bar="baz">lorem ipsum dolor sit amet</div>
+
+<!-- Prettier stable -->
+<div
+  id="foo-bar-baz"
+  class="bar-foo-baz"
+  title="a sample title"
+  data-foo="bar"
+  data-bar="baz"
+>
+  lorem ipsum dolor sit amet
+</div>
+
+<!-- Prettier main -->
+<!-- Options: `{bracketSameLine: true}` -->
+<div
+  id="foo-bar-baz"
+  class="bar-foo-baz"
+  title="a sample title"
+  data-foo="bar"
+  data-bar="baz">
+  lorem ipsum dolor sit amet
+</div>
+```
diff --git a/docs/option-philosophy.md b/docs/option-philosophy.md
index a1966fd53..fd3da01d0 100644
--- a/docs/option-philosophy.md
+++ b/docs/option-philosophy.md
@@ -29,7 +29,7 @@ Options that are easier to motivate include:
 - `--end-of-line` makes it easier for teams to keep CRLFs out of their git repositories.
 - `--quote-props` is important for advanced usage of the Google Closure Compiler.
 
-But other options are harder to motivate in hindsight: `--arrow-parens`, `--jsx-single-quote`, `--jsx-bracket-same-line` and `--no-bracket-spacing` are not the type of options we’re happy to have. They cause a lot of [bike-shedding](https://en.wikipedia.org/wiki/Law_of_triviality) in teams, and we’re sorry for that. Difficult to remove now, these options exist as a historical artifact and should not motivate adding more options (“If _those_ options exist, why can’t this one?”).
+But other options are harder to motivate in hindsight: `--arrow-parens`, `--jsx-single-quote`, `--bracket-same-line` and `--no-bracket-spacing` are not the type of options we’re happy to have. They cause a lot of [bike-shedding](https://en.wikipedia.org/wiki/Law_of_triviality) in teams, and we’re sorry for that. Difficult to remove now, these options exist as a historical artifact and should not motivate adding more options (“If _those_ options exist, why can’t this one?”).
 
 For a long time, we left option requests open in order to let discussions play out and collect feedback. What we’ve learned during those years is that it’s really hard to measure demand. Prettier has grown a lot in usage. What was “great demand” back in the day is not as much today. GitHub reactions and Twitter polls became unrepresentative. What about all silent users? It looked easy to add “just one more” option. But where should we have stopped? When is one too many? Even after adding “that one final option”, there would always be a “top issue” in the issue tracker.
 
diff --git a/docs/options.md b/docs/options.md
index 447bfecce..80faff1e6 100644
--- a/docs/options.md
+++ b/docs/options.md
@@ -135,7 +135,44 @@ Valid options:
 | ------- | ---------------------- | ------------------------ |
 | `true`  | `--no-bracket-spacing` | `bracketSpacing: <bool>` |
 
-## JSX Brackets
+## Bracket Line
+
+Put the `>` of a multi-line HTML (HTML, JSX, Vue, Angular) element at the end of the last line instead of being alone on the next line (does not apply to self closing elements).
+
+Valid options:
+
+- `true` - Example:
+
+<!-- prettier-ignore -->
+```html
+<button
+  className="prettier-class"
+  id="prettier-id"
+  onClick={this.handleClick}>
+  Click Here
+</button>
+```
+
+- `false` - Example:
+
+<!-- prettier-ignore -->
+```html
+<button
+  className="prettier-class"
+  id="prettier-id"
+  onClick={this.handleClick}
+>
+  Click Here
+</button>
+```
+
+| Default | CLI Override          | API Override              |
+| ------- | --------------------- | ------------------------- |
+| `false` | `--bracket-same-line` | `bracketSameLine: <bool>` |
+
+## [Deprecated] JSX Brackets
+
+_This option has been deprecated in v2.4.0, use --bracket-same-line instead_
 
 Put the `>` of a multi-line JSX element at the end of the last line instead of being alone on the next line (does not apply to self closing elements).
 
diff --git a/src/common/common-options.js b/src/common/common-options.js
index db53d344b..b01ed6a80 100644
--- a/src/common/common-options.js
+++ b/src/common/common-options.js
@@ -46,4 +46,12 @@ module.exports = {
       },
     ],
   },
+  bracketSameLine: {
+    since: "2.4.0",
+    category: CATEGORY_COMMON,
+    type: "boolean",
+    default: false,
+    description:
+      "Put > of opening tags on the last line instead of on a new line.",
+  },
 };
diff --git a/src/language-html/options.js b/src/language-html/options.js
index 22285b34f..724f7884f 100644
--- a/src/language-html/options.js
+++ b/src/language-html/options.js
@@ -1,9 +1,12 @@
 "use strict";
 
+const commonOptions = require("../common/common-options.js");
+
 const CATEGORY_HTML = "HTML";
 
 // format based on https://github.com/prettier/prettier/blob/main/src/main/core-options.js
 module.exports = {
+  bracketSameLine: commonOptions.bracketSameLine,
   htmlWhitespaceSensitivity: {
     since: "1.15.0",
     category: CATEGORY_HTML,
diff --git a/src/language-html/printer-html.js b/src/language-html/printer-html.js
index 7ef8de4a4..4ac116c27 100644
--- a/src/language-html/printer-html.js
+++ b/src/language-html/printer-html.js
@@ -706,7 +706,15 @@ function printAttributes(path, options, print) {
   ) {
     parts.push(node.isSelfClosing ? " " : "");
   } else {
-    parts.push(node.isSelfClosing ? line : softline);
+    parts.push(
+      options.bracketSameLine
+        ? node.isSelfClosing
+          ? " "
+          : ""
+        : node.isSelfClosing
+        ? line
+        : softline
+    );
   }
 
   return parts;
diff --git a/src/language-js/options.js b/src/language-js/options.js
index e04541f06..e30178eba 100644
--- a/src/language-js/options.js
+++ b/src/language-js/options.js
@@ -26,13 +26,14 @@ module.exports = {
       },
     ],
   },
+  bracketSameLine: commonOptions.bracketSameLine,
   bracketSpacing: commonOptions.bracketSpacing,
   jsxBracketSameLine: {
     since: "0.17.0",
     category: CATEGORY_JAVASCRIPT,
     type: "boolean",
-    default: false,
     description: "Put > on the last line instead of at a new line.",
+    deprecated: "2.4.0",
   },
   semi: {
     since: "1.0.0",
diff --git a/src/language-js/print/jsx.js b/src/language-js/print/jsx.js
index 4c4df813c..4d7f2d021 100644
--- a/src/language-js/print/jsx.js
+++ b/src/language-js/print/jsx.js
@@ -576,9 +576,11 @@ function printJsxOpeningElement(path, options, print) {
 
   const bracketSameLine =
     // Simple tags (no attributes and no comment in tag name) should be
-    // kept unbroken regardless of `jsxBracketSameLine`
+    // kept unbroken regardless of `bracketSameLine`.
+    // jsxBracketSameLine is deprecated in favour of bracketSameLine,
+    // but is still needed for backwards compatibility.
     (node.attributes.length === 0 && !nameHasComments) ||
-    (options.jsxBracketSameLine &&
+    ((options.bracketSameLine || options.jsxBracketSameLine) &&
       // We should print the bracket in a new line for the following cases:
       // <div
       //   // comment
diff --git a/tests/format/angular/bracket-same-line/__snapshots__/jsfmt.spec.js.snap b/tests/format/angular/bracket-same-line/__snapshots__/jsfmt.spec.js.snap
new file mode 100644
index 000000000..334314719
--- /dev/null
+++ b/tests/format/angular/bracket-same-line/__snapshots__/jsfmt.spec.js.snap
@@ -0,0 +1,128 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`angularjs.html - {"bracketSameLine":false} format 1`] = `
+====================================options=====================================
+bracketSameLine: false
+parsers: ["angular"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<div ng-if="$ctrl .shouldShowWarning&&!$ctrl.loading"
+    bindon-target=" a | b : c "
+    (event)="  foo == $event  "
+    *ngIf=" something?true:false    " [(ngModel)]="canSave">Warning!</div>
+<span ng-if="$ctrl .shouldShowWarning&&!$ctrl.loading"
+    bindon-target=" a | b : c "
+    (event)="  foo == $event  "
+    *ngIf=" something?true:false    " [(ngModel)]="canSave">Warning!</span>
+<img ng-if="$ctrl .shouldShowWarning&&!$ctrl.loading"
+    bindon-target=" a | b : c "
+    (event)="  foo == $event  "
+    *ngIf=" something?true:false    " [(ngModel)]="canSave"/>
+<script long-attribute="long_long_long_long_long_long_long_long_long_long_long_long_long_value">alert(1)</script>
+<div (event)="  foo == $event  ">Warning!</div>
+<span (event)="  foo == $event  ">Warning!</span>
+<img (event)="  foo == $event  "/>
+<script>alert(1)</script>
+
+=====================================output=====================================
+<div
+  ng-if="$ctrl.shouldShowWarning && !$ctrl.loading"
+  bindon-target="a | b: c"
+  (event)="(foo == $event)"
+  *ngIf="something ? true : false"
+  [(ngModel)]="canSave"
+>
+  Warning!
+</div>
+<span
+  ng-if="$ctrl.shouldShowWarning && !$ctrl.loading"
+  bindon-target="a | b: c"
+  (event)="(foo == $event)"
+  *ngIf="something ? true : false"
+  [(ngModel)]="canSave"
+  >Warning!</span
+>
+<img
+  ng-if="$ctrl.shouldShowWarning && !$ctrl.loading"
+  bindon-target="a | b: c"
+  (event)="(foo == $event)"
+  *ngIf="something ? true : false"
+  [(ngModel)]="canSave"
+/>
+<script
+  long-attribute="long_long_long_long_long_long_long_long_long_long_long_long_long_value"
+>
+  alert(1);
+</script>
+<div (event)="(foo == $event)">Warning!</div>
+<span (event)="(foo == $event)">Warning!</span>
+<img (event)="(foo == $event)" />
+<script>
+  alert(1);
+</script>
+
+================================================================================
+`;
+
+exports[`angularjs.html - {"bracketSameLine":true} format 1`] = `
+====================================options=====================================
+bracketSameLine: true
+parsers: ["angular"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<div ng-if="$ctrl .shouldShowWarning&&!$ctrl.loading"
+    bindon-target=" a | b : c "
+    (event)="  foo == $event  "
+    *ngIf=" something?true:false    " [(ngModel)]="canSave">Warning!</div>
+<span ng-if="$ctrl .shouldShowWarning&&!$ctrl.loading"
+    bindon-target=" a | b : c "
+    (event)="  foo == $event  "
+    *ngIf=" something?true:false    " [(ngModel)]="canSave">Warning!</span>
+<img ng-if="$ctrl .shouldShowWarning&&!$ctrl.loading"
+    bindon-target=" a | b : c "
+    (event)="  foo == $event  "
+    *ngIf=" something?true:false    " [(ngModel)]="canSave"/>
+<script long-attribute="long_long_long_long_long_long_long_long_long_long_long_long_long_value">alert(1)</script>
+<div (event)="  foo == $event  ">Warning!</div>
+<span (event)="  foo == $event  ">Warning!</span>
+<img (event)="  foo == $event  "/>
+<script>alert(1)</script>
+
+=====================================output=====================================
+<div
+  ng-if="$ctrl.shouldShowWarning && !$ctrl.loading"
+  bindon-target="a | b: c"
+  (event)="(foo == $event)"
+  *ngIf="something ? true : false"
+  [(ngModel)]="canSave">
+  Warning!
+</div>
+<span
+  ng-if="$ctrl.shouldShowWarning && !$ctrl.loading"
+  bindon-target="a | b: c"
+  (event)="(foo == $event)"
+  *ngIf="something ? true : false"
+  [(ngModel)]="canSave"
+  >Warning!</span
+>
+<img
+  ng-if="$ctrl.shouldShowWarning && !$ctrl.loading"
+  bindon-target="a | b: c"
+  (event)="(foo == $event)"
+  *ngIf="something ? true : false"
+  [(ngModel)]="canSave" />
+<script
+  long-attribute="long_long_long_long_long_long_long_long_long_long_long_long_long_value">
+  alert(1);
+</script>
+<div (event)="(foo == $event)">Warning!</div>
+<span (event)="(foo == $event)">Warning!</span>
+<img (event)="(foo == $event)" />
+<script>
+  alert(1);
+</script>
+
+================================================================================
+`;
diff --git a/tests/format/angular/bracket-same-line/angularjs.html b/tests/format/angular/bracket-same-line/angularjs.html
new file mode 100644
index 000000000..b4eb21952
--- /dev/null
+++ b/tests/format/angular/bracket-same-line/angularjs.html
@@ -0,0 +1,17 @@
+<div ng-if="$ctrl .shouldShowWarning&&!$ctrl.loading"
+    bindon-target=" a | b : c "
+    (event)="  foo == $event  "
+    *ngIf=" something?true:false    " [(ngModel)]="canSave">Warning!</div>
+<span ng-if="$ctrl .shouldShowWarning&&!$ctrl.loading"
+    bindon-target=" a | b : c "
+    (event)="  foo == $event  "
+    *ngIf=" something?true:false    " [(ngModel)]="canSave">Warning!</span>
+<img ng-if="$ctrl .shouldShowWarning&&!$ctrl.loading"
+    bindon-target=" a | b : c "
+    (event)="  foo == $event  "
+    *ngIf=" something?true:false    " [(ngModel)]="canSave"/>
+<script long-attribute="long_long_long_long_long_long_long_long_long_long_long_long_long_value">alert(1)</script>
+<div (event)="  foo == $event  ">Warning!</div>
+<span (event)="  foo == $event  ">Warning!</span>
+<img (event)="  foo == $event  "/>
+<script>alert(1)</script>
diff --git a/tests/format/angular/bracket-same-line/jsfmt.spec.js b/tests/format/angular/bracket-same-line/jsfmt.spec.js
new file mode 100644
index 000000000..ddbb32302
--- /dev/null
+++ b/tests/format/angular/bracket-same-line/jsfmt.spec.js
@@ -0,0 +1,2 @@
+run_spec(__dirname, ["angular"], { bracketSameLine: true });
+run_spec(__dirname, ["angular"], { bracketSameLine: false });
diff --git a/tests/format/html/bracket-same-line/__snapshots__/jsfmt.spec.js.snap b/tests/format/html/bracket-same-line/__snapshots__/jsfmt.spec.js.snap
new file mode 100644
index 000000000..942275b95
--- /dev/null
+++ b/tests/format/html/bracket-same-line/__snapshots__/jsfmt.spec.js.snap
@@ -0,0 +1,275 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`block.html - {"bracketSameLine":false} format 1`] = `
+====================================options=====================================
+bracketSameLine: false
+parsers: ["html"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<div long_long_attribute="long_long_long_long_long_long_long_long_long_long_long_value">
+text
+</div>
+<div long_long_attribute="long_long_long_long_long_long_long_long_long_long_long_value"></div>
+<div class="a">
+text
+</div>
+<div class="a">text</div>
+
+=====================================output=====================================
+<div
+  long_long_attribute="long_long_long_long_long_long_long_long_long_long_long_value"
+>
+  text
+</div>
+<div
+  long_long_attribute="long_long_long_long_long_long_long_long_long_long_long_value"
+></div>
+<div class="a">text</div>
+<div class="a">text</div>
+
+================================================================================
+`;
+
+exports[`block.html - {"bracketSameLine":true} format 1`] = `
+====================================options=====================================
+bracketSameLine: true
+parsers: ["html"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<div long_long_attribute="long_long_long_long_long_long_long_long_long_long_long_value">
+text
+</div>
+<div long_long_attribute="long_long_long_long_long_long_long_long_long_long_long_value"></div>
+<div class="a">
+text
+</div>
+<div class="a">text</div>
+
+=====================================output=====================================
+<div
+  long_long_attribute="long_long_long_long_long_long_long_long_long_long_long_value">
+  text
+</div>
+<div
+  long_long_attribute="long_long_long_long_long_long_long_long_long_long_long_value"></div>
+<div class="a">text</div>
+<div class="a">text</div>
+
+================================================================================
+`;
+
+exports[`embed.html - {"bracketSameLine":false} format 1`] = `
+====================================options=====================================
+bracketSameLine: false
+parsers: ["html"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<script long_long_attribute="long_long_long_long_long_long_long_long_long_long_long_value">
+alert(1)</script>
+<style long_long_attribute="long_long_long_long_long_long_long_long_long_long_long_value">
+.a{color: #f00}</style>
+<script>
+alert(1)</script>
+<style>
+.a{color: #f00}</style>
+
+=====================================output=====================================
+<script
+  long_long_attribute="long_long_long_long_long_long_long_long_long_long_long_value"
+>
+  alert(1);
+</script>
+<style
+  long_long_attribute="long_long_long_long_long_long_long_long_long_long_long_value"
+>
+  .a {
+    color: #f00;
+  }
+</style>
+<script>
+  alert(1);
+</script>
+<style>
+  .a {
+    color: #f00;
+  }
+</style>
+
+================================================================================
+`;
+
+exports[`embed.html - {"bracketSameLine":true} format 1`] = `
+====================================options=====================================
+bracketSameLine: true
+parsers: ["html"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<script long_long_attribute="long_long_long_long_long_long_long_long_long_long_long_value">
+alert(1)</script>
+<style long_long_attribute="long_long_long_long_long_long_long_long_long_long_long_value">
+.a{color: #f00}</style>
+<script>
+alert(1)</script>
+<style>
+.a{color: #f00}</style>
+
+=====================================output=====================================
+<script
+  long_long_attribute="long_long_long_long_long_long_long_long_long_long_long_value">
+  alert(1);
+</script>
+<style
+  long_long_attribute="long_long_long_long_long_long_long_long_long_long_long_value">
+  .a {
+    color: #f00;
+  }
+</style>
+<script>
+  alert(1);
+</script>
+<style>
+  .a {
+    color: #f00;
+  }
+</style>
+
+================================================================================
+`;
+
+exports[`inline.html - {"bracketSameLine":false} format 1`] = `
+====================================options=====================================
+bracketSameLine: false
+parsers: ["html"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+
+<span long_long_attribute="long_long_long_long_long_long_long_long_long_long_long_value">
+text
+</span>
+<span long_long_attribute="long_long_long_long_long_long_long_long_long_long_long_value"></span>
+<span  class="a">text</span>
+<span long_long_attribute="long_long_long_long_long_long_long_long_long_long_long_value">
+text
+</span>
+<span  class="a">text</span><span long_long_attribute="long_long_long_long_long_long_long_long_long_long_long_value">
+text
+</span>
+<span  class="a">text</span><span  class="a">text</span><span  class="a">text</span><span  class="a">text</span><span  class="a">text</span>
+
+=====================================output=====================================
+<span
+  long_long_attribute="long_long_long_long_long_long_long_long_long_long_long_value"
+>
+  text
+</span>
+<span
+  long_long_attribute="long_long_long_long_long_long_long_long_long_long_long_value"
+></span>
+<span class="a">text</span>
+<span
+  long_long_attribute="long_long_long_long_long_long_long_long_long_long_long_value"
+>
+  text
+</span>
+<span class="a">text</span
+><span
+  long_long_attribute="long_long_long_long_long_long_long_long_long_long_long_value"
+>
+  text
+</span>
+<span class="a">text</span><span class="a">text</span><span class="a">text</span
+><span class="a">text</span><span class="a">text</span>
+
+================================================================================
+`;
+
+exports[`inline.html - {"bracketSameLine":true} format 1`] = `
+====================================options=====================================
+bracketSameLine: true
+parsers: ["html"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+
+<span long_long_attribute="long_long_long_long_long_long_long_long_long_long_long_value">
+text
+</span>
+<span long_long_attribute="long_long_long_long_long_long_long_long_long_long_long_value"></span>
+<span  class="a">text</span>
+<span long_long_attribute="long_long_long_long_long_long_long_long_long_long_long_value">
+text
+</span>
+<span  class="a">text</span><span long_long_attribute="long_long_long_long_long_long_long_long_long_long_long_value">
+text
+</span>
+<span  class="a">text</span><span  class="a">text</span><span  class="a">text</span><span  class="a">text</span><span  class="a">text</span>
+
+=====================================output=====================================
+<span
+  long_long_attribute="long_long_long_long_long_long_long_long_long_long_long_value">
+  text
+</span>
+<span
+  long_long_attribute="long_long_long_long_long_long_long_long_long_long_long_value"></span>
+<span class="a">text</span>
+<span
+  long_long_attribute="long_long_long_long_long_long_long_long_long_long_long_value">
+  text
+</span>
+<span class="a">text</span
+><span
+  long_long_attribute="long_long_long_long_long_long_long_long_long_long_long_value">
+  text
+</span>
+<span class="a">text</span><span class="a">text</span><span class="a">text</span
+><span class="a">text</span><span class="a">text</span>
+
+================================================================================
+`;
+
+exports[`void-elements.html - {"bracketSameLine":false} format 1`] = `
+====================================options=====================================
+bracketSameLine: false
+parsers: ["html"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<img long_long_attribute="long_long_long_long_long_long_long_long_long_long_long_value" src="./1.jpg"/>
+<img src="./1.jpg"/><img src="./1.jpg"/><img src="./1.jpg"/><img src="./1.jpg"/><img src="./1.jpg"/>
+
+=====================================output=====================================
+<img
+  long_long_attribute="long_long_long_long_long_long_long_long_long_long_long_value"
+  src="./1.jpg"
+/>
+<img src="./1.jpg" /><img src="./1.jpg" /><img src="./1.jpg" /><img
+  src="./1.jpg"
+/><img src="./1.jpg" />
+
+================================================================================
+`;
+
+exports[`void-elements.html - {"bracketSameLine":true} format 1`] = `
+====================================options=====================================
+bracketSameLine: true
+parsers: ["html"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<img long_long_attribute="long_long_long_long_long_long_long_long_long_long_long_value" src="./1.jpg"/>
+<img src="./1.jpg"/><img src="./1.jpg"/><img src="./1.jpg"/><img src="./1.jpg"/><img src="./1.jpg"/>
+
+=====================================output=====================================
+<img
+  long_long_attribute="long_long_long_long_long_long_long_long_long_long_long_value"
+  src="./1.jpg" />
+<img src="./1.jpg" /><img src="./1.jpg" /><img src="./1.jpg" /><img
+  src="./1.jpg" /><img src="./1.jpg" />
+
+================================================================================
+`;
diff --git a/tests/format/html/bracket-same-line/block.html b/tests/format/html/bracket-same-line/block.html
new file mode 100644
index 000000000..2aef91d72
--- /dev/null
+++ b/tests/format/html/bracket-same-line/block.html
@@ -0,0 +1,8 @@
+<div long_long_attribute="long_long_long_long_long_long_long_long_long_long_long_value">
+text
+</div>
+<div long_long_attribute="long_long_long_long_long_long_long_long_long_long_long_value"></div>
+<div class="a">
+text
+</div>
+<div class="a">text</div>
diff --git a/tests/format/html/bracket-same-line/embed.html b/tests/format/html/bracket-same-line/embed.html
new file mode 100644
index 000000000..08a1aab7c
--- /dev/null
+++ b/tests/format/html/bracket-same-line/embed.html
@@ -0,0 +1,8 @@
+<script long_long_attribute="long_long_long_long_long_long_long_long_long_long_long_value">
+alert(1)</script>
+<style long_long_attribute="long_long_long_long_long_long_long_long_long_long_long_value">
+.a{color: #f00}</style>
+<script>
+alert(1)</script>
+<style>
+.a{color: #f00}</style>
diff --git a/tests/format/html/bracket-same-line/inline.html b/tests/format/html/bracket-same-line/inline.html
new file mode 100644
index 000000000..7da285d9a
--- /dev/null
+++ b/tests/format/html/bracket-same-line/inline.html
@@ -0,0 +1,13 @@
+
+<span long_long_attribute="long_long_long_long_long_long_long_long_long_long_long_value">
+text
+</span>
+<span long_long_attribute="long_long_long_long_long_long_long_long_long_long_long_value"></span>
+<span  class="a">text</span>
+<span long_long_attribute="long_long_long_long_long_long_long_long_long_long_long_value">
+text
+</span>
+<span  class="a">text</span><span long_long_attribute="long_long_long_long_long_long_long_long_long_long_long_value">
+text
+</span>
+<span  class="a">text</span><span  class="a">text</span><span  class="a">text</span><span  class="a">text</span><span  class="a">text</span>
diff --git a/tests/format/html/bracket-same-line/jsfmt.spec.js b/tests/format/html/bracket-same-line/jsfmt.spec.js
new file mode 100644
index 000000000..fdc42ac3f
--- /dev/null
+++ b/tests/format/html/bracket-same-line/jsfmt.spec.js
@@ -0,0 +1,2 @@
+run_spec(__dirname, ["html"], { bracketSameLine: true });
+run_spec(__dirname, ["html"], { bracketSameLine: false });
diff --git a/tests/format/html/bracket-same-line/void-elements.html b/tests/format/html/bracket-same-line/void-elements.html
new file mode 100644
index 000000000..7485a593d
--- /dev/null
+++ b/tests/format/html/bracket-same-line/void-elements.html
@@ -0,0 +1,2 @@
+<img long_long_attribute="long_long_long_long_long_long_long_long_long_long_long_value" src="./1.jpg"/>
+<img src="./1.jpg"/><img src="./1.jpg"/><img src="./1.jpg"/><img src="./1.jpg"/><img src="./1.jpg"/>
diff --git a/tests/format/jsx/comments/__snapshots__/jsfmt.spec.js.snap b/tests/format/jsx/comments/__snapshots__/jsfmt.spec.js.snap
index a703688af..498158e46 100644
--- a/tests/format/jsx/comments/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/format/jsx/comments/__snapshots__/jsfmt.spec.js.snap
@@ -1,8 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`eslint-disable.js - {"jsxBracketSameLine":true} format 1`] = `
+exports[`eslint-disable.js - {"bracketSameLine":true} format 1`] = `
 ====================================options=====================================
-jsxBracketSameLine: true
+bracketSameLine: true
 parsers: ["flow", "babel", "typescript"]
 printWidth: 80
                                                                                 | printWidth
@@ -27,7 +27,7 @@ const render = (items) => (
 ================================================================================
 `;
 
-exports[`in-end-tag.js - {"jsxBracketSameLine":true} [typescript] format 1`] = `
+exports[`in-end-tag.js - {"bracketSameLine":true} [typescript] format 1`] = `
 "Identifier expected. (2:6)
   1 | /* =========== before slash =========== */
 > 2 | <a><// line
@@ -37,9 +37,9 @@ exports[`in-end-tag.js - {"jsxBracketSameLine":true} [typescript] format 1`] = `
   5 | /a>;"
 `;
 
-exports[`in-end-tag.js - {"jsxBracketSameLine":true} format 1`] = `
+exports[`in-end-tag.js - {"bracketSameLine":true} format 1`] = `
 ====================================options=====================================
-jsxBracketSameLine: true
+bracketSameLine: true
 parsers: ["flow", "babel", "typescript"]
 printWidth: 80
                                                                                 | printWidth
@@ -155,9 +155,9 @@ a>;
 ================================================================================
 `;
 
-exports[`in-tags.js - {"jsxBracketSameLine":true} format 1`] = `
+exports[`in-tags.js - {"bracketSameLine":true} format 1`] = `
 ====================================options=====================================
-jsxBracketSameLine: true
+bracketSameLine: true
 parsers: ["flow", "babel", "typescript"]
 printWidth: 80
                                                                                 | printWidth
@@ -223,9 +223,9 @@ printWidth: 80
 ================================================================================
 `;
 
-exports[`jsx-tag-comment-after-prop.js - {"jsxBracketSameLine":true} format 1`] = `
+exports[`jsx-tag-comment-after-prop.js - {"bracketSameLine":true} format 1`] = `
 ====================================options=====================================
-jsxBracketSameLine: true
+bracketSameLine: true
 parsers: ["flow", "babel", "typescript"]
 printWidth: 80
                                                                                 | printWidth
@@ -259,9 +259,9 @@ const pure = () => {
 ================================================================================
 `;
 
-exports[`like-a-comment-in-jsx-text.js - {"jsxBracketSameLine":true} format 1`] = `
+exports[`like-a-comment-in-jsx-text.js - {"bracketSameLine":true} format 1`] = `
 ====================================options=====================================
-jsxBracketSameLine: true
+bracketSameLine: true
 parsers: ["flow", "babel", "typescript"]
 printWidth: 80
                                                                                 | printWidth
diff --git a/tests/format/jsx/comments/jsfmt.spec.js b/tests/format/jsx/comments/jsfmt.spec.js
index 39e36879a..6e860881f 100644
--- a/tests/format/jsx/comments/jsfmt.spec.js
+++ b/tests/format/jsx/comments/jsfmt.spec.js
@@ -1,5 +1,5 @@
 run_spec(__dirname, ["flow", "babel", "typescript"], {
-  jsxBracketSameLine: true,
+  bracketSameLine: true,
   errors: {
     typescript: ["in-end-tag.js"],
   },
diff --git a/tests/format/jsx/deprecated-jsx-bracket-same-line-option/__snapshots__/jsfmt.spec.js.snap b/tests/format/jsx/deprecated-jsx-bracket-same-line-option/__snapshots__/jsfmt.spec.js.snap
new file mode 100644
index 000000000..a5b442f62
--- /dev/null
+++ b/tests/format/jsx/deprecated-jsx-bracket-same-line-option/__snapshots__/jsfmt.spec.js.snap
@@ -0,0 +1,132 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`jsx.js - {"jsxBracketSameLine":false,"bracketSameLine":true} format 1`] = `
+====================================options=====================================
+bracketSameLine: true
+jsxBracketSameLine: false
+parsers: ["babel", "flow", "typescript"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<SomeHighlyConfiguredComponent
+  onEnter={this.onEnter}
+  onLeave={this.onLeave}
+  onChange={this.onChange}
+  initialValue={this.state.initialValue}
+  ignoreStuff={true}
+>
+  <div>and the children go here</div>
+  <div>and here too</div>
+</SomeHighlyConfiguredComponent>
+
+=====================================output=====================================
+<SomeHighlyConfiguredComponent
+  onEnter={this.onEnter}
+  onLeave={this.onLeave}
+  onChange={this.onChange}
+  initialValue={this.state.initialValue}
+  ignoreStuff={true}>
+  <div>and the children go here</div>
+  <div>and here too</div>
+</SomeHighlyConfiguredComponent>;
+
+================================================================================
+`;
+
+exports[`jsx.js - {"jsxBracketSameLine":false} format 1`] = `
+====================================options=====================================
+jsxBracketSameLine: false
+parsers: ["babel", "flow", "typescript"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<SomeHighlyConfiguredComponent
+  onEnter={this.onEnter}
+  onLeave={this.onLeave}
+  onChange={this.onChange}
+  initialValue={this.state.initialValue}
+  ignoreStuff={true}
+>
+  <div>and the children go here</div>
+  <div>and here too</div>
+</SomeHighlyConfiguredComponent>
+
+=====================================output=====================================
+<SomeHighlyConfiguredComponent
+  onEnter={this.onEnter}
+  onLeave={this.onLeave}
+  onChange={this.onChange}
+  initialValue={this.state.initialValue}
+  ignoreStuff={true}
+>
+  <div>and the children go here</div>
+  <div>and here too</div>
+</SomeHighlyConfiguredComponent>;
+
+================================================================================
+`;
+
+exports[`jsx.js - {"jsxBracketSameLine":true,"bracketSameLine":false} format 1`] = `
+====================================options=====================================
+bracketSameLine: false
+jsxBracketSameLine: true
+parsers: ["babel", "flow", "typescript"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<SomeHighlyConfiguredComponent
+  onEnter={this.onEnter}
+  onLeave={this.onLeave}
+  onChange={this.onChange}
+  initialValue={this.state.initialValue}
+  ignoreStuff={true}
+>
+  <div>and the children go here</div>
+  <div>and here too</div>
+</SomeHighlyConfiguredComponent>
+
+=====================================output=====================================
+<SomeHighlyConfiguredComponent
+  onEnter={this.onEnter}
+  onLeave={this.onLeave}
+  onChange={this.onChange}
+  initialValue={this.state.initialValue}
+  ignoreStuff={true}>
+  <div>and the children go here</div>
+  <div>and here too</div>
+</SomeHighlyConfiguredComponent>;
+
+================================================================================
+`;
+
+exports[`jsx.js - {"jsxBracketSameLine":true} format 1`] = `
+====================================options=====================================
+jsxBracketSameLine: true
+parsers: ["babel", "flow", "typescript"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<SomeHighlyConfiguredComponent
+  onEnter={this.onEnter}
+  onLeave={this.onLeave}
+  onChange={this.onChange}
+  initialValue={this.state.initialValue}
+  ignoreStuff={true}
+>
+  <div>and the children go here</div>
+  <div>and here too</div>
+</SomeHighlyConfiguredComponent>
+
+=====================================output=====================================
+<SomeHighlyConfiguredComponent
+  onEnter={this.onEnter}
+  onLeave={this.onLeave}
+  onChange={this.onChange}
+  initialValue={this.state.initialValue}
+  ignoreStuff={true}>
+  <div>and the children go here</div>
+  <div>and here too</div>
+</SomeHighlyConfiguredComponent>;
+
+================================================================================
+`;
diff --git a/tests/format/jsx/deprecated-jsx-bracket-same-line-option/jsfmt.spec.js b/tests/format/jsx/deprecated-jsx-bracket-same-line-option/jsfmt.spec.js
new file mode 100644
index 000000000..83b7f2546
--- /dev/null
+++ b/tests/format/jsx/deprecated-jsx-bracket-same-line-option/jsfmt.spec.js
@@ -0,0 +1,14 @@
+run_spec(__dirname, ["babel", "flow", "typescript"], {
+  jsxBracketSameLine: true,
+});
+run_spec(__dirname, ["babel", "flow", "typescript"], {
+  jsxBracketSameLine: false,
+});
+run_spec(__dirname, ["babel", "flow", "typescript"], {
+  jsxBracketSameLine: false,
+  bracketSameLine: true,
+});
+run_spec(__dirname, ["babel", "flow", "typescript"], {
+  jsxBracketSameLine: true,
+  bracketSameLine: false,
+});
diff --git a/tests/format/jsx/deprecated-jsx-bracket-same-line-option/jsx.js b/tests/format/jsx/deprecated-jsx-bracket-same-line-option/jsx.js
new file mode 100644
index 000000000..2417fa94b
--- /dev/null
+++ b/tests/format/jsx/deprecated-jsx-bracket-same-line-option/jsx.js
@@ -0,0 +1,10 @@
+<SomeHighlyConfiguredComponent
+  onEnter={this.onEnter}
+  onLeave={this.onLeave}
+  onChange={this.onChange}
+  initialValue={this.state.initialValue}
+  ignoreStuff={true}
+>
+  <div>and the children go here</div>
+  <div>and here too</div>
+</SomeHighlyConfiguredComponent>
diff --git a/tests/format/jsx/last-line/__snapshots__/jsfmt.spec.js.snap b/tests/format/jsx/last-line/__snapshots__/jsfmt.spec.js.snap
index f4939db02..dd4ea5312 100644
--- a/tests/format/jsx/last-line/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/format/jsx/last-line/__snapshots__/jsfmt.spec.js.snap
@@ -1,8 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`last_line.js - {"jsxBracketSameLine":false} format 1`] = `
+exports[`last_line.js - {"bracketSameLine":false} format 1`] = `
 ====================================options=====================================
-jsxBracketSameLine: false
+bracketSameLine: false
 parsers: ["flow", "typescript"]
 printWidth: 80
                                                                                 | printWidth
@@ -33,9 +33,9 @@ printWidth: 80
 ================================================================================
 `;
 
-exports[`last_line.js - {"jsxBracketSameLine":true} format 1`] = `
+exports[`last_line.js - {"bracketSameLine":true} format 1`] = `
 ====================================options=====================================
-jsxBracketSameLine: true
+bracketSameLine: true
 parsers: ["flow", "typescript"]
 printWidth: 80
                                                                                 | printWidth
@@ -65,9 +65,9 @@ printWidth: 80
 ================================================================================
 `;
 
-exports[`single_prop_multiline_string.js - {"jsxBracketSameLine":false} format 1`] = `
+exports[`single_prop_multiline_string.js - {"bracketSameLine":false} format 1`] = `
 ====================================options=====================================
-jsxBracketSameLine: false
+bracketSameLine: false
 parsers: ["flow", "typescript"]
 printWidth: 80
                                                                                 | printWidth
@@ -96,9 +96,9 @@ printWidth: 80
 ================================================================================
 `;
 
-exports[`single_prop_multiline_string.js - {"jsxBracketSameLine":true} format 1`] = `
+exports[`single_prop_multiline_string.js - {"bracketSameLine":true} format 1`] = `
 ====================================options=====================================
-jsxBracketSameLine: true
+bracketSameLine: true
 parsers: ["flow", "typescript"]
 printWidth: 80
                                                                                 | printWidth
diff --git a/tests/format/jsx/last-line/jsfmt.spec.js b/tests/format/jsx/last-line/jsfmt.spec.js
index ae9790a61..dc0c7e6d7 100644
--- a/tests/format/jsx/last-line/jsfmt.spec.js
+++ b/tests/format/jsx/last-line/jsfmt.spec.js
@@ -1,2 +1,2 @@
-run_spec(__dirname, ["flow", "typescript"], { jsxBracketSameLine: true });
-run_spec(__dirname, ["flow", "typescript"], { jsxBracketSameLine: false });
+run_spec(__dirname, ["flow", "typescript"], { bracketSameLine: true });
+run_spec(__dirname, ["flow", "typescript"], { bracketSameLine: false });
diff --git a/tests/format/vue/bracket-same-line/__snapshots__/jsfmt.spec.js.snap b/tests/format/vue/bracket-same-line/__snapshots__/jsfmt.spec.js.snap
new file mode 100644
index 000000000..623280a03
--- /dev/null
+++ b/tests/format/vue/bracket-same-line/__snapshots__/jsfmt.spec.js.snap
@@ -0,0 +1,359 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`vue.html - {"bracketSameLine":false} format 1`] = `
+====================================options=====================================
+bracketSameLine: false
+parsers: ["vue"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Document</title>
+</head>
+<body>
+<template>
+  <div id="js-app">
+<div :click="long_long_long_long_long_long_long_long_long_long_long_long_long_long_value">
+text
+</div>
+<div :click="long_long_long_long_long_long_long_long_long_long_long_long_long_long_value"></div>
+<span :click="long_long_long_long_long_long_long_long_long_long_long_long_long_long_value">
+text
+</span>
+<span :long_long_attribute="long_long_long_long_long_long_long_long_long_long_long_value"></span>
+<img :long_long_attribute="long_long_long_long_long_long_long_long_long_long_long_value"/>
+<div class="a">
+text
+</div>
+<span  class="a">
+text
+</span>
+<img class="a"/>
+  </div>
+</template>
+
+<script long_long_attribute="long_long_long_long_long_long_long_long_long_long_long_value">new Vue({el: '#js-app'})</script>
+<style  long_long_attribute="long_long_long_long_long_long_long_long_long_long_long_value">.a {color: #f00}</style>
+</body>
+</html>
+
+=====================================output=====================================
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+  </head>
+  <body>
+    <template>
+      <div id="js-app">
+        <div
+          :click="
+            long_long_long_long_long_long_long_long_long_long_long_long_long_long_value
+          "
+        >
+          text
+        </div>
+        <div
+          :click="
+            long_long_long_long_long_long_long_long_long_long_long_long_long_long_value
+          "
+        ></div>
+        <span
+          :click="
+            long_long_long_long_long_long_long_long_long_long_long_long_long_long_value
+          "
+        >
+          text
+        </span>
+        <span
+          :long_long_attribute="
+            long_long_long_long_long_long_long_long_long_long_long_value
+          "
+        ></span>
+        <img
+          :long_long_attribute="
+            long_long_long_long_long_long_long_long_long_long_long_value
+          "
+        />
+        <div class="a">text</div>
+        <span class="a"> text </span>
+        <img class="a" />
+      </div>
+    </template>
+
+    <script
+      long_long_attribute="long_long_long_long_long_long_long_long_long_long_long_value"
+    >
+      new Vue({ el: "#js-app" });
+    </script>
+    <style
+      long_long_attribute="long_long_long_long_long_long_long_long_long_long_long_value"
+    >
+      .a {
+        color: #f00;
+      }
+    </style>
+  </body>
+</html>
+
+================================================================================
+`;
+
+exports[`vue.html - {"bracketSameLine":true} format 1`] = `
+====================================options=====================================
+bracketSameLine: true
+parsers: ["vue"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Document</title>
+</head>
+<body>
+<template>
+  <div id="js-app">
+<div :click="long_long_long_long_long_long_long_long_long_long_long_long_long_long_value">
+text
+</div>
+<div :click="long_long_long_long_long_long_long_long_long_long_long_long_long_long_value"></div>
+<span :click="long_long_long_long_long_long_long_long_long_long_long_long_long_long_value">
+text
+</span>
+<span :long_long_attribute="long_long_long_long_long_long_long_long_long_long_long_value"></span>
+<img :long_long_attribute="long_long_long_long_long_long_long_long_long_long_long_value"/>
+<div class="a">
+text
+</div>
+<span  class="a">
+text
+</span>
+<img class="a"/>
+  </div>
+</template>
+
+<script long_long_attribute="long_long_long_long_long_long_long_long_long_long_long_value">new Vue({el: '#js-app'})</script>
+<style  long_long_attribute="long_long_long_long_long_long_long_long_long_long_long_value">.a {color: #f00}</style>
+</body>
+</html>
+
+=====================================output=====================================
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+  </head>
+  <body>
+    <template>
+      <div id="js-app">
+        <div
+          :click="
+            long_long_long_long_long_long_long_long_long_long_long_long_long_long_value
+          ">
+          text
+        </div>
+        <div
+          :click="
+            long_long_long_long_long_long_long_long_long_long_long_long_long_long_value
+          "></div>
+        <span
+          :click="
+            long_long_long_long_long_long_long_long_long_long_long_long_long_long_value
+          ">
+          text
+        </span>
+        <span
+          :long_long_attribute="
+            long_long_long_long_long_long_long_long_long_long_long_value
+          "></span>
+        <img
+          :long_long_attribute="
+            long_long_long_long_long_long_long_long_long_long_long_value
+          " />
+        <div class="a">text</div>
+        <span class="a"> text </span>
+        <img class="a" />
+      </div>
+    </template>
+
+    <script
+      long_long_attribute="long_long_long_long_long_long_long_long_long_long_long_value">
+      new Vue({ el: "#js-app" });
+    </script>
+    <style
+      long_long_attribute="long_long_long_long_long_long_long_long_long_long_long_value">
+      .a {
+        color: #f00;
+      }
+    </style>
+  </body>
+</html>
+
+================================================================================
+`;
+
+exports[`vue.vue - {"bracketSameLine":false} format 1`] = `
+====================================options=====================================
+bracketSameLine: false
+parsers: ["vue"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<template>
+  <div>
+<div :long_long_attribute="long_long_long_long_long_long_long_long_long_long_long_value">
+text
+</div>
+<div v-on:long_long_attribute="long_long_long_long_long_long_long_long_long_long_long_value"></div>
+<span long_long_attribute="long_long_long_long_long_long_long_long_long_long_long_value">
+text
+</span>
+<span long_long_attribute="long_long_long_long_long_long_long_long_long_long_long_value"></span>
+<img long_long_attribute="long_long_long_long_long_long_long_long_long_long_long_value"/>
+<div class="a">
+text
+</div>
+<span  class="a">
+text
+</span>
+<img class="a"/>
+  </div>
+</template>
+
+<script long_long_attribute="long_long_long_long_long_long_long_long_long_long_long_value">export default {}</script>
+<style  long_long_attribute="long_long_long_long_long_long_long_long_long_long_long_value">.a {color: #f00}</style>
+
+=====================================output=====================================
+<template>
+  <div>
+    <div
+      :long_long_attribute="
+        long_long_long_long_long_long_long_long_long_long_long_value
+      "
+    >
+      text
+    </div>
+    <div
+      v-on:long_long_attribute="
+        long_long_long_long_long_long_long_long_long_long_long_value
+      "
+    ></div>
+    <span
+      long_long_attribute="long_long_long_long_long_long_long_long_long_long_long_value"
+    >
+      text
+    </span>
+    <span
+      long_long_attribute="long_long_long_long_long_long_long_long_long_long_long_value"
+    ></span>
+    <img
+      long_long_attribute="long_long_long_long_long_long_long_long_long_long_long_value"
+    />
+    <div class="a">text</div>
+    <span class="a"> text </span>
+    <img class="a" />
+  </div>
+</template>
+
+<script
+  long_long_attribute="long_long_long_long_long_long_long_long_long_long_long_value"
+>
+export default {};
+</script>
+<style
+  long_long_attribute="long_long_long_long_long_long_long_long_long_long_long_value"
+>
+.a {
+  color: #f00;
+}
+</style>
+
+================================================================================
+`;
+
+exports[`vue.vue - {"bracketSameLine":true} format 1`] = `
+====================================options=====================================
+bracketSameLine: true
+parsers: ["vue"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<template>
+  <div>
+<div :long_long_attribute="long_long_long_long_long_long_long_long_long_long_long_value">
+text
+</div>
+<div v-on:long_long_attribute="long_long_long_long_long_long_long_long_long_long_long_value"></div>
+<span long_long_attribute="long_long_long_long_long_long_long_long_long_long_long_value">
+text
+</span>
+<span long_long_attribute="long_long_long_long_long_long_long_long_long_long_long_value"></span>
+<img long_long_attribute="long_long_long_long_long_long_long_long_long_long_long_value"/>
+<div class="a">
+text
+</div>
+<span  class="a">
+text
+</span>
+<img class="a"/>
+  </div>
+</template>
+
+<script long_long_attribute="long_long_long_long_long_long_long_long_long_long_long_value">export default {}</script>
+<style  long_long_attribute="long_long_long_long_long_long_long_long_long_long_long_value">.a {color: #f00}</style>
+
+=====================================output=====================================
+<template>
+  <div>
+    <div
+      :long_long_attribute="
+        long_long_long_long_long_long_long_long_long_long_long_value
+      ">
+      text
+    </div>
+    <div
+      v-on:long_long_attribute="
+        long_long_long_long_long_long_long_long_long_long_long_value
+      "></div>
+    <span
+      long_long_attribute="long_long_long_long_long_long_long_long_long_long_long_value">
+      text
+    </span>
+    <span
+      long_long_attribute="long_long_long_long_long_long_long_long_long_long_long_value"></span>
+    <img
+      long_long_attribute="long_long_long_long_long_long_long_long_long_long_long_value" />
+    <div class="a">text</div>
+    <span class="a"> text </span>
+    <img class="a" />
+  </div>
+</template>
+
+<script
+  long_long_attribute="long_long_long_long_long_long_long_long_long_long_long_value">
+export default {};
+</script>
+<style
+  long_long_attribute="long_long_long_long_long_long_long_long_long_long_long_value">
+.a {
+  color: #f00;
+}
+</style>
+
+================================================================================
+`;
diff --git a/tests/format/vue/bracket-same-line/jsfmt.spec.js b/tests/format/vue/bracket-same-line/jsfmt.spec.js
new file mode 100644
index 000000000..09150d449
--- /dev/null
+++ b/tests/format/vue/bracket-same-line/jsfmt.spec.js
@@ -0,0 +1,2 @@
+run_spec(__dirname, ["vue"], { bracketSameLine: true });
+run_spec(__dirname, ["vue"], { bracketSameLine: false });
diff --git a/tests/format/vue/bracket-same-line/vue.html b/tests/format/vue/bracket-same-line/vue.html
new file mode 100644
index 000000000..40b08f887
--- /dev/null
+++ b/tests/format/vue/bracket-same-line/vue.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Document</title>
+</head>
+<body>
+<template>
+  <div id="js-app">
+<div :click="long_long_long_long_long_long_long_long_long_long_long_long_long_long_value">
+text
+</div>
+<div :click="long_long_long_long_long_long_long_long_long_long_long_long_long_long_value"></div>
+<span :click="long_long_long_long_long_long_long_long_long_long_long_long_long_long_value">
+text
+</span>
+<span :long_long_attribute="long_long_long_long_long_long_long_long_long_long_long_value"></span>
+<img :long_long_attribute="long_long_long_long_long_long_long_long_long_long_long_value"/>
+<div class="a">
+text
+</div>
+<span  class="a">
+text
+</span>
+<img class="a"/>
+  </div>
+</template>
+
+<script long_long_attribute="long_long_long_long_long_long_long_long_long_long_long_value">new Vue({el: '#js-app'})</script>
+<style  long_long_attribute="long_long_long_long_long_long_long_long_long_long_long_value">.a {color: #f00}</style>
+</body>
+</html>
diff --git a/tests/format/vue/bracket-same-line/vue.vue b/tests/format/vue/bracket-same-line/vue.vue
new file mode 100644
index 000000000..c4f590a6c
--- /dev/null
+++ b/tests/format/vue/bracket-same-line/vue.vue
@@ -0,0 +1,23 @@
+<template>
+  <div>
+<div :long_long_attribute="long_long_long_long_long_long_long_long_long_long_long_value">
+text
+</div>
+<div v-on:long_long_attribute="long_long_long_long_long_long_long_long_long_long_long_value"></div>
+<span long_long_attribute="long_long_long_long_long_long_long_long_long_long_long_value">
+text
+</span>
+<span long_long_attribute="long_long_long_long_long_long_long_long_long_long_long_value"></span>
+<img long_long_attribute="long_long_long_long_long_long_long_long_long_long_long_value"/>
+<div class="a">
+text
+</div>
+<span  class="a">
+text
+</span>
+<img class="a"/>
+  </div>
+</template>
+
+<script long_long_attribute="long_long_long_long_long_long_long_long_long_long_long_value">export default {}</script>
+<style  long_long_attribute="long_long_long_long_long_long_long_long_long_long_long_value">.a {color: #f00}</style>
diff --git a/tests/integration/__tests__/__snapshots__/arg-parsing.js.snap b/tests/integration/__tests__/__snapshots__/arg-parsing.js.snap
index 972615ad5..4ad38e029 100644
--- a/tests/integration/__tests__/__snapshots__/arg-parsing.js.snap
+++ b/tests/integration/__tests__/__snapshots__/arg-parsing.js.snap
@@ -13,6 +13,18 @@ exports[`boolean flags do not swallow the next argument (stdout) 1`] = `
 
 exports[`boolean flags do not swallow the next argument (write) 1`] = `Array []`;
 
+exports[`deprecated option values are warned (stderr) 1`] = `
+"[warn] --jsx-bracket-same-line is deprecated.
+"
+`;
+
+exports[`deprecated option values are warned (stdout) 1`] = `
+"console.log(\\"could be single quote and without semi\\");
+"
+`;
+
+exports[`deprecated option values are warned (write) 1`] = `Array []`;
+
 exports[`negated options work (stderr) 1`] = `""`;
 
 exports[`negated options work (stdout) 1`] = `
diff --git a/tests/integration/__tests__/__snapshots__/early-exit.js.snap b/tests/integration/__tests__/__snapshots__/early-exit.js.snap
index aa40cd952..d485d52a0 100644
--- a/tests/integration/__tests__/__snapshots__/early-exit.js.snap
+++ b/tests/integration/__tests__/__snapshots__/early-exit.js.snap
@@ -61,6 +61,8 @@ Format options:
   --arrow-parens <always|avoid>
                            Include parentheses around a sole arrow function parameter.
                            Defaults to always.
+  --bracket-same-line      Put > of opening tags on the last line instead of on a new line.
+                           Defaults to false.
   --no-bracket-spacing     Do not print spaces between brackets.
   --embedded-language-formatting <auto|off>
                            Control how Prettier formats quoted code embedded in the file.
@@ -71,8 +73,6 @@ Format options:
   --html-whitespace-sensitivity <css|strict|ignore>
                            How to handle whitespaces in HTML.
                            Defaults to css.
-  --jsx-bracket-same-line  Put > on the last line instead of at a new line.
-                           Defaults to false.
   --jsx-single-quote       Use single quotes in JSX.
                            Defaults to false.
   --parser <flow|babel|babel-flow|babel-ts|typescript|espree|meriyah|css|less|scss|json|json5|json-stringify|graphql|markdown|mdx|vue|yaml|glimmer|html|angular|lwc>
@@ -226,6 +226,8 @@ Format options:
   --arrow-parens <always|avoid>
                            Include parentheses around a sole arrow function parameter.
                            Defaults to always.
+  --bracket-same-line      Put > of opening tags on the last line instead of on a new line.
+                           Defaults to false.
   --no-bracket-spacing     Do not print spaces between brackets.
   --embedded-language-formatting <auto|off>
                            Control how Prettier formats quoted code embedded in the file.
@@ -236,8 +238,6 @@ Format options:
   --html-whitespace-sensitivity <css|strict|ignore>
                            How to handle whitespaces in HTML.
                            Defaults to css.
-  --jsx-bracket-same-line  Put > on the last line instead of at a new line.
-                           Defaults to false.
   --jsx-single-quote       Use single quotes in JSX.
                            Defaults to false.
   --parser <flow|babel|babel-flow|babel-ts|typescript|espree|meriyah|css|less|scss|json|json5|json-stringify|graphql|markdown|mdx|vue|yaml|glimmer|html|angular|lwc>
diff --git a/tests/integration/__tests__/__snapshots__/help-options.js.snap b/tests/integration/__tests__/__snapshots__/help-options.js.snap
index 0d8680b47..438125c0c 100644
--- a/tests/integration/__tests__/__snapshots__/help-options.js.snap
+++ b/tests/integration/__tests__/__snapshots__/help-options.js.snap
@@ -18,6 +18,19 @@ Default: always
 
 exports[`show detailed usage with --help arrow-parens (write) 1`] = `Array []`;
 
+exports[`show detailed usage with --help bracket-same-line (stderr) 1`] = `""`;
+
+exports[`show detailed usage with --help bracket-same-line (stdout) 1`] = `
+"--bracket-same-line
+
+  Put > of opening tags on the last line instead of on a new line.
+
+Default: false
+"
+`;
+
+exports[`show detailed usage with --help bracket-same-line (write) 1`] = `Array []`;
+
 exports[`show detailed usage with --help bracket-spacing (stderr) 1`] = `""`;
 
 exports[`show detailed usage with --help bracket-spacing (stdout) 1`] = `
@@ -245,19 +258,6 @@ Default: false
 
 exports[`show detailed usage with --help insert-pragma (write) 1`] = `Array []`;
 
-exports[`show detailed usage with --help jsx-bracket-same-line (stderr) 1`] = `""`;
-
-exports[`show detailed usage with --help jsx-bracket-same-line (stdout) 1`] = `
-"--jsx-bracket-same-line
-
-  Put > on the last line instead of at a new line.
-
-Default: false
-"
-`;
-
-exports[`show detailed usage with --help jsx-bracket-same-line (write) 1`] = `Array []`;
-
 exports[`show detailed usage with --help jsx-single-quote (stderr) 1`] = `""`;
 
 exports[`show detailed usage with --help jsx-single-quote (stdout) 1`] = `
diff --git a/tests/integration/__tests__/__snapshots__/plugin-options-string.js.snap b/tests/integration/__tests__/__snapshots__/plugin-options-string.js.snap
index 2ed7ae8b6..9b0567f2a 100644
--- a/tests/integration/__tests__/__snapshots__/plugin-options-string.js.snap
+++ b/tests/integration/__tests__/__snapshots__/plugin-options-string.js.snap
@@ -18,7 +18,7 @@ exports[`show external options with \`--help\` 1`] = `
 - First value
 + Second value
 
-@@ -20,18 +20,20 @@
+@@ -22,16 +22,18 @@
                              Control how Prettier formats quoted code embedded in the file.
                              Defaults to auto.
     --end-of-line <lf|crlf|cr|auto>
@@ -29,8 +29,6 @@ exports[`show external options with \`--help\` 1`] = `
     --html-whitespace-sensitivity <css|strict|ignore>
                              How to handle whitespaces in HTML.
                              Defaults to css.
-    --jsx-bracket-same-line  Put > on the last line instead of at a new line.
-                             Defaults to false.
     --jsx-single-quote       Use single quotes in JSX.
                              Defaults to false.
 -   --parser <flow|babel|babel-flow|babel-ts|typescript|espree|meriyah|css|less|scss|json|json5|json-stringify|graphql|markdown|mdx|vue|yaml|glimmer|html|angular|lwc>
diff --git a/tests/integration/__tests__/__snapshots__/plugin-options.js.snap b/tests/integration/__tests__/__snapshots__/plugin-options.js.snap
index 276c950e7..b8b7ace9b 100644
--- a/tests/integration/__tests__/__snapshots__/plugin-options.js.snap
+++ b/tests/integration/__tests__/__snapshots__/plugin-options.js.snap
@@ -60,7 +60,7 @@ exports[`show external options with \`--help\` 1`] = `
 - First value
 + Second value
 
-@@ -20,18 +20,20 @@
+@@ -22,16 +22,18 @@
                              Control how Prettier formats quoted code embedded in the file.
                              Defaults to auto.
     --end-of-line <lf|crlf|cr|auto>
@@ -71,8 +71,6 @@ exports[`show external options with \`--help\` 1`] = `
     --html-whitespace-sensitivity <css|strict|ignore>
                              How to handle whitespaces in HTML.
                              Defaults to css.
-    --jsx-bracket-same-line  Put > on the last line instead of at a new line.
-                             Defaults to false.
     --jsx-single-quote       Use single quotes in JSX.
                              Defaults to false.
 -   --parser <flow|babel|babel-flow|babel-ts|typescript|espree|meriyah|css|less|scss|json|json5|json-stringify|graphql|markdown|mdx|vue|yaml|glimmer|html|angular|lwc>
diff --git a/tests/integration/__tests__/__snapshots__/schema.js.snap b/tests/integration/__tests__/__snapshots__/schema.js.snap
index 58a656724..681584810 100644
--- a/tests/integration/__tests__/__snapshots__/schema.js.snap
+++ b/tests/integration/__tests__/__snapshots__/schema.js.snap
@@ -24,6 +24,11 @@ Object {
             },
           ],
         },
+        "bracketSameLine": Object {
+          "default": false,
+          "description": "Put > of opening tags on the last line instead of on a new line.",
+          "type": "boolean",
+        },
         "bracketSpacing": Object {
           "default": true,
           "description": "Print spaces between brackets.",
@@ -118,11 +123,6 @@ This option cannot be used with --range-start and --range-end.",
           "description": "Insert @format pragma into file's first docblock comment.",
           "type": "boolean",
         },
-        "jsxBracketSameLine": Object {
-          "default": false,
-          "description": "Put > on the last line instead of at a new line.",
-          "type": "boolean",
-        },
         "jsxSingleQuote": Object {
           "default": false,
           "description": "Use single quotes in JSX.",
diff --git a/tests/integration/__tests__/__snapshots__/support-info.js.snap b/tests/integration/__tests__/__snapshots__/support-info.js.snap
index 550ac7eec..08a061fee 100644
--- a/tests/integration/__tests__/__snapshots__/support-info.js.snap
+++ b/tests/integration/__tests__/__snapshots__/support-info.js.snap
@@ -94,6 +94,10 @@ Object {
       "default": "always",
       "type": "choice",
     },
+    "bracketSameLine": Object {
+      "default": false,
+      "type": "boolean",
+    },
     "bracketSpacing": Object {
       "default": true,
       "type": "boolean",
@@ -142,10 +146,6 @@ Object {
       "default": false,
       "type": "boolean",
     },
-    "jsxBracketSameLine": Object {
-      "default": false,
-      "type": "boolean",
-    },
     "jsxSingleQuote": Object {
       "default": false,
       "type": "boolean",
@@ -774,6 +774,15 @@ exports[`CLI --support-info (stdout) 1`] = `
       \\"since\\": \\"1.9.0\\",
       \\"type\\": \\"choice\\"
     },
+    {
+      \\"category\\": \\"Common\\",
+      \\"default\\": false,
+      \\"description\\": \\"Put > of opening tags on the last line instead of on a new line.\\",
+      \\"name\\": \\"bracketSameLine\\",
+      \\"pluginDefaults\\": {},
+      \\"since\\": \\"2.4.0\\",
+      \\"type\\": \\"boolean\\"
+    },
     {
       \\"category\\": \\"Common\\",
       \\"default\\": true,
@@ -880,15 +889,6 @@ exports[`CLI --support-info (stdout) 1`] = `
       \\"since\\": \\"1.8.0\\",
       \\"type\\": \\"boolean\\"
     },
-    {
-      \\"category\\": \\"JavaScript\\",
-      \\"default\\": false,
-      \\"description\\": \\"Put > on the last line instead of at a new line.\\",
-      \\"name\\": \\"jsxBracketSameLine\\",
-      \\"pluginDefaults\\": {},
-      \\"since\\": \\"0.17.0\\",
-      \\"type\\": \\"boolean\\"
-    },
     {
       \\"category\\": \\"JavaScript\\",
       \\"default\\": false,
diff --git a/tests/integration/__tests__/arg-parsing.js b/tests/integration/__tests__/arg-parsing.js
index 0fafcc983..cf03ce754 100644
--- a/tests/integration/__tests__/arg-parsing.js
+++ b/tests/integration/__tests__/arg-parsing.js
@@ -88,3 +88,9 @@ describe("number file/dir", () => {
     write: [],
   });
 });
+
+describe("deprecated option values are warned", () => {
+  runPrettier("cli/arg-parsing", ["file.js", "--jsx-bracket-same-line"]).test({
+    status: 0,
+  });
+});
diff --git a/website/playground/Playground.js b/website/playground/Playground.js
index e293054d9..4000b2b0b 100644
--- a/website/playground/Playground.js
+++ b/website/playground/Playground.js
@@ -32,12 +32,12 @@ const ENABLED_OPTIONS = [
   "singleQuote",
   "bracketSpacing",
   "jsxSingleQuote",
-  "jsxBracketSameLine",
   "quoteProps",
   "arrowParens",
   "trailingComma",
   "proseWrap",
   "htmlWhitespaceSensitivity",
+  "bracketSameLine",
   "insertPragma",
   "requirePragma",
   "vueIndentScriptAndStyle",