diff --git a/.eslintrc.js b/.eslintrc.js
index 55a0692..09708a8 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -11,7 +11,11 @@ module.exports = {
     },
   },
   plugins: ["ember"],
-  extends: ["eslint:recommended", "plugin:ember/recommended"],
+  extends: [
+    "eslint:recommended",
+    "plugin:ember/recommended",
+    "plugin:prettier/recommended",
+  ],
   env: {
     browser: true,
   },
diff --git a/addon/components/ember-islands.js b/addon/components/ember-islands.js
index dce490b..1ca92d2 100644
--- a/addon/components/ember-islands.js
+++ b/addon/components/ember-islands.js
@@ -1,12 +1,12 @@
-import Ember from 'ember';
-import Reconciler from 'ember-islands/utils/reconciler';
-import queryIslandComponents from 'ember-islands/utils/query-island-components';
-import getRenderComponent from 'ember-islands/utils/get-render-component';
+import Ember from "ember";
+import Reconciler from "ember-islands/utils/reconciler";
+import queryIslandComponents from "ember-islands/utils/query-island-components";
+import getRenderComponent from "ember-islands/utils/get-render-component";
 
 let eiInstance;
 
 export default Ember.Component.extend({
-  tagName: '',
+  tagName: "",
 
   init() {
     this._super(...arguments);
@@ -24,7 +24,7 @@ export default Ember.Component.extend({
 
       destroy(c) {
         c.destroy();
-      }
+      },
     });
 
     eiInstance = this;
@@ -43,8 +43,8 @@ export default Ember.Component.extend({
   },
 
   willDestroyElement() {
-    this.reconciler.forEachRenderedComponent(c => c.destroy());
-  }
+    this.reconciler.forEachRenderedComponent((c) => c.destroy());
+  },
 });
 
 export function getInstance() {
diff --git a/addon/index.js b/addon/index.js
index 1f3ad55..d0f1d84 100644
--- a/addon/index.js
+++ b/addon/index.js
@@ -1,4 +1,4 @@
-import { getInstance } from './components/ember-islands';
+import { getInstance } from "./components/ember-islands";
 
 export function reconcile() {
   getInstance().reconcile();
diff --git a/addon/utils/get-render-component.js b/addon/utils/get-render-component.js
index e29a8f4..237ec54 100644
--- a/addon/utils/get-render-component.js
+++ b/addon/utils/get-render-component.js
@@ -1,4 +1,4 @@
-import Ember from 'ember';
+import Ember from "ember";
 const { getOwner, Component, Logger } = Ember;
 
 export default function getRenderComponent(emberObject) {
@@ -10,14 +10,19 @@ export default function getRenderComponent(emberObject) {
 
     // This can only be true in production mode where assert is a no-op.
     if (!component) {
-      ({ component, layout } = provideMissingComponentInProductionMode(owner, name));
+      ({ component, layout } = provideMissingComponentInProductionMode(
+        owner,
+        name
+      ));
     }
 
     if (layout) {
       attrs.layout = layout;
     }
 
-    while (element.firstChild) { element.removeChild(element.firstChild); }
+    while (element.firstChild) {
+      element.removeChild(element.firstChild);
+    }
     let componentInstance = component.create(attrs);
     componentInstance.appendTo(element);
 
@@ -46,5 +51,5 @@ function missingComponentMessage(name) {
 function provideMissingComponentInProductionMode(owner, name) {
   Logger.error(missingComponentMessage(name));
 
-  return lookupComponent(owner, 'ember-islands/missing-component');
+  return lookupComponent(owner, "ember-islands/missing-component");
 }
diff --git a/addon/utils/query-island-components.js b/addon/utils/query-island-components.js
index eb22076..b0b37e1 100644
--- a/addon/utils/query-island-components.js
+++ b/addon/utils/query-island-components.js
@@ -11,12 +11,12 @@
  */
 export default function queryIslandComponents() {
   let components = [];
-  let islandNodeList = document.querySelectorAll('[data-component]');
+  let islandNodeList = document.querySelectorAll("[data-component]");
 
   // Avoid NodeList.prototype.forEach for IE 11 compatibility.
   for (let i = 0; i < islandNodeList.length; i++) {
     let element = islandNodeList[i];
-    let name = element.getAttribute('data-component');
+    let name = element.getAttribute("data-component");
     let attrs = componentAttributes(element);
     components.push({ attrs, name, element, instance: undefined });
   }
@@ -26,7 +26,7 @@ export default function queryIslandComponents() {
 
 function componentAttributes(element) {
   let attrs;
-  let attrsJSON = element.getAttribute('data-attrs');
+  let attrsJSON = element.getAttribute("data-attrs");
 
   if (attrsJSON) {
     attrs = JSON.parse(attrsJSON);
diff --git a/addon/utils/reconciler.js b/addon/utils/reconciler.js
index 70c7e6b..53c8238 100644
--- a/addon/utils/reconciler.js
+++ b/addon/utils/reconciler.js
@@ -1,4 +1,4 @@
-import Ember from 'ember';
+import Ember from "ember";
 const { guidFor } = Ember;
 
 export default class Reconciler {
@@ -13,7 +13,7 @@ export default class Reconciler {
   reconcileAgainst(componentsToRender) {
     let nextRenderedComponents = {};
 
-    componentsToRender.forEach(ic => {
+    componentsToRender.forEach((ic) => {
       let elementGuid = guidFor(ic.element);
 
       let renderedIC = this.renderedComponents[elementGuid];
diff --git a/app/components/ember-islands.js b/app/components/ember-islands.js
index 9a300b2..f59865a 100644
--- a/app/components/ember-islands.js
+++ b/app/components/ember-islands.js
@@ -1 +1 @@
-export { default } from 'ember-islands/components/ember-islands';
+export { default } from "ember-islands/components/ember-islands";
diff --git a/app/components/ember-islands/missing-component.js b/app/components/ember-islands/missing-component.js
index a3e1d83..62051cd 100644
--- a/app/components/ember-islands/missing-component.js
+++ b/app/components/ember-islands/missing-component.js
@@ -1,3 +1,3 @@
-import Ember from 'ember';
+import Ember from "ember";
 
 export default Ember.Component.extend();
diff --git a/package.json b/package.json
index f9ce47d..3b9a9a2 100644
--- a/package.json
+++ b/package.json
@@ -51,10 +51,13 @@
     "ember-template-lint": "^2.8.0",
     "ember-try": "^1.4.0",
     "eslint": "^7.1.0",
+    "eslint-config-prettier": "^6.11.0",
     "eslint-plugin-ember": "^8.6.0",
     "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-prettier": "^3.1.4",
     "loader.js": "^4.7.0",
     "npm-run-all": "^4.1.5",
+    "prettier": "^2.0.5",
     "qunit-dom": "^1.2.0"
   },
   "engines": {
diff --git a/tests/acceptance/inner-content-test.js b/tests/acceptance/inner-content-test.js
index f455886..211a2ba 100644
--- a/tests/acceptance/inner-content-test.js
+++ b/tests/acceptance/inner-content-test.js
@@ -1,12 +1,12 @@
-import Ember from 'ember';
-import { module, test } from 'qunit';
-import startApp from '../helpers/start-app';
+import Ember from "ember";
+import { module, test } from "qunit";
+import startApp from "../helpers/start-app";
 
 var application;
 
-module('Acceptance: Using Inner Content', {
-  beforeEach: function() {
-    document.getElementById('ember-testing').innerHTML = `
+module("Acceptance: Using Inner Content", {
+  beforeEach: function () {
+    document.getElementById("ember-testing").innerHTML = `
       <div id='element-with-inner-content'
            data-component='inner-content-component'
            data-attrs='{"title": "Component Title"}'>
@@ -18,18 +18,26 @@ module('Acceptance: Using Inner Content', {
     application = startApp();
   },
 
-  afterEach: function() {
-    Ember.run(application, 'destroy');
-    document.getElementById('ember-testing').innerHTML = '';
-  }
+  afterEach: function () {
+    Ember.run(application, "destroy");
+    document.getElementById("ember-testing").innerHTML = "";
+  },
 });
 
-test('extracting innerContent', function(assert) {
+test("extracting innerContent", function (assert) {
   assert.expect(2);
-  visit('/');
+  visit("/");
 
-  andThen(function() {
-    assert.equal(find('#element-with-inner-content > #inner-content').length, 0, "The inner content of the server-rendered element is replaced");
-    assert.equal(find('.inner-content-component > #inner-content').length, 1, "The innerContent is passed to components");
+  andThen(function () {
+    assert.equal(
+      find("#element-with-inner-content > #inner-content").length,
+      0,
+      "The inner content of the server-rendered element is replaced"
+    );
+    assert.equal(
+      find(".inner-content-component > #inner-content").length,
+      1,
+      "The innerContent is passed to components"
+    );
   });
 });
diff --git a/tests/acceptance/missing-component-test.js b/tests/acceptance/missing-component-test.js
index 9a5085b..25f6e70 100644
--- a/tests/acceptance/missing-component-test.js
+++ b/tests/acceptance/missing-component-test.js
@@ -1,14 +1,14 @@
-import Ember from 'ember';
-import { module, test } from 'qunit';
-import startApp from '../helpers/start-app';
+import Ember from "ember";
+import { module, test } from "qunit";
+import startApp from "../helpers/start-app";
 
 let application, originalAssert, originalError, errors;
 
-module('Acceptance: Dealing with missing components in production', {
-  beforeEach: function() {
+module("Acceptance: Dealing with missing components in production", {
+  beforeEach: function () {
     // Put some static content on the page before the Ember application loads.
     // This mimics server-rendered content.
-    document.getElementById('ember-testing').innerHTML = `
+    document.getElementById("ember-testing").innerHTML = `
       <div data-component='oops-not-component' data-attrs='{"title": "Component Title"}'></div>
       <div data-component='top-level-component'></div>
     `;
@@ -28,21 +28,31 @@ module('Acceptance: Dealing with missing components in production', {
     application = startApp();
   },
 
-  afterEach: function() {
+  afterEach: function () {
     Ember.assert = originalAssert;
     Ember.Logger.error = originalError;
 
-    Ember.run(application, 'destroy');
-    document.getElementById('ember-testing').innerHTML = '';
-  }
+    Ember.run(application, "destroy");
+    document.getElementById("ember-testing").innerHTML = "";
+  },
 });
 
-test('rendering the found component', function(assert) {
+test("rendering the found component", function (assert) {
   assert.expect(2);
-  visit('/');
-
-  andThen(function() {
-    assert.equal(find('p:contains(top level component)').length, 1, "The top level component was rendered");
-    assert.deepEqual(errors, [`ember-islands could not find a component named "oops-not-component" in your Ember application.`], 'Logs an error');
+  visit("/");
+
+  andThen(function () {
+    assert.equal(
+      find("p:contains(top level component)").length,
+      1,
+      "The top level component was rendered"
+    );
+    assert.deepEqual(
+      errors,
+      [
+        `ember-islands could not find a component named "oops-not-component" in your Ember application.`,
+      ],
+      "Logs an error"
+    );
   });
 });
diff --git a/tests/acceptance/rendering-components-test.js b/tests/acceptance/rendering-components-test.js
index f224ea2..38f8af3 100644
--- a/tests/acceptance/rendering-components-test.js
+++ b/tests/acceptance/rendering-components-test.js
@@ -1,14 +1,14 @@
-import Ember from 'ember';
-import { module, test } from 'qunit';
-import startApp from '../helpers/start-app';
+import Ember from "ember";
+import { module, test } from "qunit";
+import startApp from "../helpers/start-app";
 
 var application;
 
-module('Acceptance: Rendering Components', {
-  beforeEach: function() {
+module("Acceptance: Rendering Components", {
+  beforeEach: function () {
     // Put some static content on the page before the Ember application loads.
     // This mimics server-rendered content.
-    document.getElementById('ember-testing').innerHTML = `
+    document.getElementById("ember-testing").innerHTML = `
       <p>server-rendered content top</p>
       <div data-component='top-level-component' data-attrs='{"title": "Component Title"}'></div>
       <p>server-rendered content bottom</p>
@@ -17,49 +17,77 @@ module('Acceptance: Rendering Components', {
     application = startApp();
   },
 
-  afterEach: function() {
-    Ember.run(application, 'destroy');
-    document.getElementById('ember-testing').innerHTML = '';
-  }
+  afterEach: function () {
+    Ember.run(application, "destroy");
+    document.getElementById("ember-testing").innerHTML = "";
+  },
 });
 
-test('rendering a component with an attribute', function(assert) {
+test("rendering a component with an attribute", function (assert) {
   assert.expect(2);
-  visit('/');
+  visit("/");
 
-  andThen(function() {
-    assert.equal(find('p:contains(top level component)').length, 1, "The top level component was rendered");
-    assert.equal(find('#component-title:contains(Component Title)').length, 1, "Passed in attributes can be used");
+  andThen(function () {
+    assert.equal(
+      find("p:contains(top level component)").length,
+      1,
+      "The top level component was rendered"
+    );
+    assert.equal(
+      find("#component-title:contains(Component Title)").length,
+      1,
+      "Passed in attributes can be used"
+    );
   });
 });
 
-test('using component events', function(assert) {
+test("using component events", function (assert) {
   assert.expect(2);
-  visit('/');
+  visit("/");
 
-  andThen(function() {
-    assert.equal(find("#expanded-content").length, 0, "Expanded content is hidden at first");
+  andThen(function () {
+    assert.equal(
+      find("#expanded-content").length,
+      0,
+      "Expanded content is hidden at first"
+    );
   });
 
-  click('#toggle-expanded');
+  click("#toggle-expanded");
 
-  andThen(function() {
-    assert.equal(find("#expanded-content").length, 1, "The expanded content is showing");
+  andThen(function () {
+    assert.equal(
+      find("#expanded-content").length,
+      1,
+      "The expanded content is showing"
+    );
   });
 });
 
-test('using nested components', function(assert) {
+test("using nested components", function (assert) {
   assert.expect(3);
-  visit('/');
+  visit("/");
 
-  andThen(function() {
-    assert.equal(find('p:contains(A nested component)').length, 1, "The nested component was rendered");
-    assert.equal(find("#expanded-content").length, 0, "Expanded content is hidden at first");
+  andThen(function () {
+    assert.equal(
+      find("p:contains(A nested component)").length,
+      1,
+      "The nested component was rendered"
+    );
+    assert.equal(
+      find("#expanded-content").length,
+      0,
+      "Expanded content is hidden at first"
+    );
   });
 
-  click('#nested-component-toggle-expanded');
+  click("#nested-component-toggle-expanded");
 
-  andThen(function() {
-    assert.equal(find("#expanded-content").length, 1, "The expanded content is showing");
+  andThen(function () {
+    assert.equal(
+      find("#expanded-content").length,
+      1,
+      "The expanded content is showing"
+    );
   });
 });
diff --git a/tests/dummy/app/components/dummy-application.js b/tests/dummy/app/components/dummy-application.js
index ed67458..140e3e8 100644
--- a/tests/dummy/app/components/dummy-application.js
+++ b/tests/dummy/app/components/dummy-application.js
@@ -1,4 +1,4 @@
-import Ember from 'ember';
+import Ember from "ember";
 
 export default Ember.Component.extend({
   init() {
@@ -8,7 +8,7 @@ export default Ember.Component.extend({
 
   actions: {
     toggleIslandComponents() {
-      this.toggleProperty('isShowingIslandComponents');
-    }
-  }
+      this.toggleProperty("isShowingIslandComponents");
+    },
+  },
 });
diff --git a/tests/dummy/app/components/inner-content-component.js b/tests/dummy/app/components/inner-content-component.js
index ff14d98..9903c30 100644
--- a/tests/dummy/app/components/inner-content-component.js
+++ b/tests/dummy/app/components/inner-content-component.js
@@ -1,5 +1,5 @@
-import Ember from 'ember';
+import Ember from "ember";
 
 export default Ember.Component.extend({
-  classNameBindings: [':inner-content-component']
+  classNameBindings: [":inner-content-component"],
 });
diff --git a/tests/dummy/app/components/js-only-component.js b/tests/dummy/app/components/js-only-component.js
index 0314b3e..fbb482f 100644
--- a/tests/dummy/app/components/js-only-component.js
+++ b/tests/dummy/app/components/js-only-component.js
@@ -1,11 +1,11 @@
-import Ember from 'ember';
+import Ember from "ember";
 
 const { Component } = Ember;
 
 export default Component.extend({
-  classNames: ['js-only-component'],
+  classNames: ["js-only-component"],
 
   onDidInsertElement() {
-    this.element.innerHTML = 'js-only-component';
-  }
+    this.element.innerHTML = "js-only-component";
+  },
 });
diff --git a/tests/dummy/app/components/nested-component.js b/tests/dummy/app/components/nested-component.js
index 327c065..b3e7dc7 100644
--- a/tests/dummy/app/components/nested-component.js
+++ b/tests/dummy/app/components/nested-component.js
@@ -1,11 +1,11 @@
-import Ember from 'ember';
+import Ember from "ember";
 
 export default Ember.Component.extend({
   isExpanded: false,
 
   actions: {
-    nestedAction: function() {
-      this.sendAction('nestedAction');
-    }
-  }
+    nestedAction: function () {
+      this.sendAction("nestedAction");
+    },
+  },
 });
diff --git a/tests/dummy/app/components/stateful-component.js b/tests/dummy/app/components/stateful-component.js
index 55a3395..c0c141b 100644
--- a/tests/dummy/app/components/stateful-component.js
+++ b/tests/dummy/app/components/stateful-component.js
@@ -1,9 +1,9 @@
-import Ember from 'ember';
+import Ember from "ember";
 
 const { Component, computed } = Ember;
 
 export default Component.extend({
-  tagName: 'button',
+  tagName: "button",
 
   init() {
     this._super(...arguments);
@@ -12,15 +12,15 @@ export default Component.extend({
   },
 
   click() {
-    this.incrementProperty('count');
+    this.incrementProperty("count");
   },
 
-  trimmedInnerContent: computed('innerContent', function() {
-    return this.get('innerContent').trim();
+  trimmedInnerContent: computed("innerContent", function () {
+    return this.innerContent.trim();
   }),
 
   destroy() {
     this.destroyCallCount++;
     this._super(...arguments);
-  }
+  },
 });
diff --git a/tests/dummy/app/components/top-level-component.js b/tests/dummy/app/components/top-level-component.js
index d3bdffe..4e1bb53 100644
--- a/tests/dummy/app/components/top-level-component.js
+++ b/tests/dummy/app/components/top-level-component.js
@@ -1,12 +1,12 @@
-import Ember from 'ember';
+import Ember from "ember";
 
 export default Ember.Component.extend({
   isExpanded: false,
-  classNameBindings: [':top-level-component'],
+  classNameBindings: [":top-level-component"],
 
   actions: {
-    toggleIsExpanded: function() {
-      this.toggleProperty('isExpanded', true);
-    }
-  }
+    toggleIsExpanded: function () {
+      this.toggleProperty("isExpanded", true);
+    },
+  },
 });
diff --git a/tests/integration/components/ember-islands-test.js b/tests/integration/components/ember-islands-test.js
index eb47704..d337ce5 100644
--- a/tests/integration/components/ember-islands-test.js
+++ b/tests/integration/components/ember-islands-test.js
@@ -1,15 +1,15 @@
-import $ from 'jquery';
-import Ember from 'ember';
+import $ from "jquery";
+import Ember from "ember";
 const { Component } = Ember;
-import { moduleForComponent, test, skip } from 'ember-qunit';
-import hbs from 'htmlbars-inline-precompile';
+import { moduleForComponent, test, skip } from "ember-qunit";
+import hbs from "htmlbars-inline-precompile";
 
-moduleForComponent('ember-islands', 'Integration | Component | ember islands', {
-  integration: true
+moduleForComponent("ember-islands", "Integration | Component | ember islands", {
+  integration: true,
 });
 
-test('it renders an island component', function(assert) {
-  document.getElementById('ember-testing').innerHTML = `
+test("it renders an island component", function (assert) {
+  document.getElementById("ember-testing").innerHTML = `
     <div data-component="top-level-component"></div>
   `;
 
@@ -17,11 +17,11 @@ test('it renders an island component', function(assert) {
     {{ember-islands}}
   `);
 
-  assert.equal($('.top-level-component').length, 1);
+  assert.equal($(".top-level-component").length, 1);
 });
 
-test("rendering a component that only has an hbs template file", function(assert) {
-  document.getElementById('ember-testing').innerHTML = `
+test("rendering a component that only has an hbs template file", function (assert) {
+  document.getElementById("ember-testing").innerHTML = `
     <div data-component="hbs-only-component"></div>
   `;
 
@@ -29,11 +29,11 @@ test("rendering a component that only has an hbs template file", function(assert
     {{ember-islands}}
   `);
 
-  assert.equal($('.hbs-only-component').length, 1);
+  assert.equal($(".hbs-only-component").length, 1);
 });
 
-test("rendering a component that only has a JavaScript file", function(assert) {
-  document.getElementById('ember-testing').innerHTML = `
+test("rendering a component that only has a JavaScript file", function (assert) {
+  document.getElementById("ember-testing").innerHTML = `
     <div data-component="js-only-component"></div>
   `;
 
@@ -41,31 +41,31 @@ test("rendering a component that only has a JavaScript file", function(assert) {
     {{ember-islands}}
   `);
 
-  assert.equal($('.js-only-component').length, 1);
+  assert.equal($(".js-only-component").length, 1);
 });
 
-test('it tears down an island component', function(assert) {
+test("it tears down an island component", function (assert) {
   let teardownCalls = [];
 
   const IslandComponent = Component.extend({
-    classNames: ['island-component'],
+    classNames: ["island-component"],
 
     willDestroyElement() {
-      teardownCalls.push('willDestroyElement');
+      teardownCalls.push("willDestroyElement");
     },
 
     willDestroy() {
-      teardownCalls.push('willDestroy');
-    }
+      teardownCalls.push("willDestroy");
+    },
   });
 
-  this.register('component:island-component', IslandComponent);
+  this.register("component:island-component", IslandComponent);
 
-  document.getElementById('ember-testing').innerHTML = `
+  document.getElementById("ember-testing").innerHTML = `
     <div data-component="island-component"></div>
   `;
 
-  this.set('isShowing', true);
+  this.set("isShowing", true);
 
   this.render(hbs`
     {{#if isShowing}}
@@ -73,24 +73,32 @@ test('it tears down an island component', function(assert) {
     {{/if}}
   `);
 
-  assert.equal($('.island-component').length, 1, "Has component in DOM");
+  assert.equal($(".island-component").length, 1, "Has component in DOM");
 
-  this.set('isShowing', false);
+  this.set("isShowing", false);
 
-  assert.equal($('.island-compoment').length, 0, "Component removed from DOM");
+  assert.equal($(".island-compoment").length, 0, "Component removed from DOM");
 
-  assert.deepEqual(teardownCalls, ['willDestroyElement', 'willDestroy'], "All component teardown hooks called");
+  assert.deepEqual(
+    teardownCalls,
+    ["willDestroyElement", "willDestroy"],
+    "All component teardown hooks called"
+  );
 });
 
 // Related issue: https://github.com/emberjs/ember.js/issues/15013
-skip("Provides usefull error message when a component can't be found", function(assert) {
-  document.getElementById('ember-testing').innerHTML = `
+skip("Provides usefull error message when a component can't be found", function (assert) {
+  document.getElementById("ember-testing").innerHTML = `
     <div data-component="unknown-component"></div>
   `;
 
-  assert.throws(() => {
-    this.render(hbs`
+  assert.throws(
+    () => {
+      this.render(hbs`
       {{ember-islands}}
     `);
-  }, /could not find a component/, "Threw the correct error message");
+    },
+    /could not find a component/,
+    "Threw the correct error message"
+  );
 });
diff --git a/tests/integration/components/reconcile-test.js b/tests/integration/components/reconcile-test.js
index ab667b5..c2133ad 100644
--- a/tests/integration/components/reconcile-test.js
+++ b/tests/integration/components/reconcile-test.js
@@ -1,24 +1,24 @@
-import $ from 'jquery';
-import Ember from 'ember';
-import { moduleForComponent, test } from 'ember-qunit';
-import wait from 'ember-test-helpers/wait';
-import hbs from 'htmlbars-inline-precompile';
+import $ from "jquery";
+import Ember from "ember";
+import { moduleForComponent, test } from "ember-qunit";
+import wait from "ember-test-helpers/wait";
+import hbs from "htmlbars-inline-precompile";
 import {
   pleaseDontUseThisExportToGetTheEmberIslandsInstance as getInstance,
-  reconcile
-} from 'ember-islands';
+  reconcile,
+} from "ember-islands";
 const { run } = Ember;
 
-moduleForComponent('ember-islands', 'Integration | Component | rerendering', {
+moduleForComponent("ember-islands", "Integration | Component | rerendering", {
   integration: true,
 
   beforeEach() {
     this.testContainer = $('<div id="container"></div>');
-    $('#ember-testing').append(this.testContainer);
-  }
+    $("#ember-testing").append(this.testContainer);
+  },
 });
 
-test('when the DOM does not change', function(assert) {
+test("when the DOM does not change", function (assert) {
   this.testContainer.html(`
     <div data-component="stateful-component"
          data-attrs='{"title": "Title"}'>
@@ -31,44 +31,44 @@ test('when the DOM does not change', function(assert) {
   `);
 
   // Click the component to increment its count to 1
-  this.testContainer.find('button').click();
+  this.testContainer.find("button").click();
 
-  let componentElement = this.testContainer.find('button');
+  let componentElement = this.testContainer.find("button");
 
   assert.equal(
     componentElement.text().trim(),
-    'Title, Inner Content, 1',
-    'Precondition: Rendered inside the stable element'
+    "Title, Inner Content, 1",
+    "Precondition: Rendered inside the stable element"
   );
 
   assert.equal(
     getInstance().getRenderedComponents().length,
     1,
-    'Precondition: tracking 1 rendered component'
+    "Precondition: tracking 1 rendered component"
   );
 
   reconcile();
 
   assert.equal(
     componentElement.text().trim(),
-    'Title, Inner Content, 1',
-    'Rendered content and state does not change'
+    "Title, Inner Content, 1",
+    "Rendered content and state does not change"
   );
 
   assert.strictEqual(
-    this.testContainer.find('button')[0],
+    this.testContainer.find("button")[0],
     componentElement[0],
-    'The component element stays stable'
+    "The component element stays stable"
   );
 
   assert.equal(
     getInstance().getRenderedComponents().length,
     1,
-    'still tracking 1 rendered component'
+    "still tracking 1 rendered component"
   );
 });
 
-test('when a placeholder is removed', function(assert) {
+test("when a placeholder is removed", function (assert) {
   this.testContainer.html(`
     <div data-component="stateful-component"
          data-attrs='{"title": "Title"}'>
@@ -82,14 +82,14 @@ test('when a placeholder is removed', function(assert) {
 
   assert.equal(
     this.testContainer.text().trim(),
-    'Title, Inner Content, 0',
-    'Precondition: Rendered'
+    "Title, Inner Content, 0",
+    "Precondition: Rendered"
   );
 
   assert.equal(
     getInstance().getRenderedComponents().length,
     1,
-    'Precondition: tracking 1 rendered component'
+    "Precondition: tracking 1 rendered component"
   );
 
   let renderedComponent = getInstance().getRenderedComponents()[0];
@@ -104,38 +104,42 @@ test('when a placeholder is removed', function(assert) {
     reconcile();
   });
 
-  return wait().then(function() {
+  return wait().then(function () {
     assert.equal(
       renderedComponent.isDestroying,
       true,
-      'The previously rendered component has been destroyed'
+      "The previously rendered component has been destroyed"
     );
 
     assert.notEqual(
       renderedComponent.destroyCallCount,
       0,
-      'destroy called at least once'
+      "destroy called at least once"
     );
 
     assert.equal(
       getInstance().getRenderedComponents().length,
       0,
-      'tracking no rendered components'
+      "tracking no rendered components"
     );
   });
 });
 
-test('when a new component placeholder is added', function(assert) {
+test("when a new component placeholder is added", function (assert) {
   this.render(hbs`
     {{ember-islands}}
   `);
 
-  assert.equal(this.testContainer.text().trim(), '', 'Precondition: Nothing rendered');
+  assert.equal(
+    this.testContainer.text().trim(),
+    "",
+    "Precondition: Nothing rendered"
+  );
 
   assert.equal(
     getInstance().getRenderedComponents().length,
     0,
-    'Precondition: tracking 0 rendered components'
+    "Precondition: tracking 0 rendered components"
   );
 
   this.testContainer.html(`
@@ -151,18 +155,18 @@ test('when a new component placeholder is added', function(assert) {
 
   assert.equal(
     this.testContainer.text().trim(),
-    'Title, Inner Content, 0',
-    'Renders a component for the added placeholder'
+    "Title, Inner Content, 0",
+    "Renders a component for the added placeholder"
   );
 
   assert.equal(
     getInstance().getRenderedComponents().length,
     1,
-    'started tracking 1 component'
+    "started tracking 1 component"
   );
 });
 
-test('when attributes of a placeholder change', function(assert) {
+test("when attributes of a placeholder change", function (assert) {
   this.testContainer.html(`
     <div data-component="stateful-component"
          data-attrs='{"title": "Title"}'>
@@ -174,20 +178,20 @@ test('when attributes of a placeholder change', function(assert) {
     {{ember-islands}}
   `);
 
-  let componentElement = this.testContainer.find('button');
+  let componentElement = this.testContainer.find("button");
 
   // Click the component to increment its count to 1
-  this.testContainer.find('button').click();
+  this.testContainer.find("button").click();
 
   assert.equal(
     componentElement.text().trim(),
-    'Title, Inner Content, 1',
-    'Precondition: Rendered inside the stable element'
+    "Title, Inner Content, 1",
+    "Precondition: Rendered inside the stable element"
   );
 
   this.testContainer
-    .find('[data-component=stateful-component]')
-    .attr('data-attrs', '{"title": "New Title"}');
+    .find("[data-component=stateful-component]")
+    .attr("data-attrs", '{"title": "New Title"}');
 
   run(() => {
     reconcile();
@@ -195,12 +199,12 @@ test('when attributes of a placeholder change', function(assert) {
 
   assert.equal(
     componentElement.text().trim(),
-    'New Title, Inner Content, 1',
-    'Attributes are updated and state is stable'
+    "New Title, Inner Content, 1",
+    "Attributes are updated and state is stable"
   );
 });
 
-test('when the data-component property of a placeholder changes', function(assert) {
+test("when the data-component property of a placeholder changes", function (assert) {
   this.testContainer.html(`
     <div data-component="stateful-component"
          data-attrs='{"title": "Title"}'>
@@ -212,23 +216,23 @@ test('when the data-component property of a placeholder changes', function(asser
     {{ember-islands}}
   `);
 
-  let componentElement = this.testContainer.find('button');
+  let componentElement = this.testContainer.find("button");
 
   assert.equal(
     componentElement.text().trim(),
-    'Title, Inner Content, 0',
-    'Precondition: Rendered initial component'
+    "Title, Inner Content, 0",
+    "Precondition: Rendered initial component"
   );
 
   assert.equal(
     getInstance().getRenderedComponents().length,
     1,
-    'Precondition: tracking 1 rendered component'
+    "Precondition: tracking 1 rendered component"
   );
 
   this.testContainer
-    .find('[data-component=stateful-component]')
-    .attr('data-component', 'top-level-component');
+    .find("[data-component=stateful-component]")
+    .attr("data-component", "top-level-component");
 
   let previouslyRenderedComponent = getInstance().getRenderedComponents()[0];
 
@@ -239,24 +243,24 @@ test('when the data-component property of a placeholder changes', function(asser
   assert.equal(
     previouslyRenderedComponent.isDestroying,
     true,
-    'previously rendered component has been destroyed'
+    "previously rendered component has been destroyed"
   );
 
   assert.notEqual(
     previouslyRenderedComponent.destroyCallCount,
     0,
-    'previously rendered component destroy called at least once'
+    "previously rendered component destroy called at least once"
   );
 
   assert.notEqual(
-    this.testContainer.text().indexOf('top level component'),
+    this.testContainer.text().indexOf("top level component"),
     -1,
-    'Renders the new component in the placeholder'
+    "Renders the new component in the placeholder"
   );
 
   assert.equal(
     getInstance().getRenderedComponents().length,
     1,
-    'tracking 1 new rendered component'
+    "tracking 1 new rendered component"
   );
 });
diff --git a/yarn.lock b/yarn.lock
index e5f0221..8d01fd7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5225,6 +5225,13 @@ escodegen@^1.11.0:
   optionalDependencies:
     source-map "~0.6.1"
 
+eslint-config-prettier@^6.11.0:
+  version "6.11.0"
+  resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-6.11.0.tgz#f6d2238c1290d01c859a8b5c1f7d352a0b0da8b1"
+  integrity sha512-oB8cpLWSAjOVFEJhhyMZh6NOEOtBVziaqdDQ86+qhDHFbZXoRTM7pNSvFRfW/W/L/LrQ38C99J5CGuRBBzBsdA==
+  dependencies:
+    get-stdin "^6.0.0"
+
 eslint-plugin-ember@^8.6.0:
   version "8.7.0"
   resolved "https://registry.yarnpkg.com/eslint-plugin-ember/-/eslint-plugin-ember-8.7.0.tgz#71b8c7a79e64fbf1c6e29a1a0c3e3546ed207b77"
@@ -5255,6 +5262,13 @@ eslint-plugin-node@^11.1.0:
     resolve "^1.10.1"
     semver "^6.1.0"
 
+eslint-plugin-prettier@^3.1.4:
+  version "3.1.4"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-prettier/-/eslint-plugin-prettier-3.1.4.tgz#168ab43154e2ea57db992a2cd097c828171f75c2"
+  integrity sha512-jZDa8z76klRqo+TdGDTFJSavwbnWK2ZpqGKNZ+VvweMW516pDUMmQ2koXvxEE4JhzNvTv+radye/bWGBmA6jmg==
+  dependencies:
+    prettier-linter-helpers "^1.0.0"
+
 eslint-scope@^4.0.0:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-4.0.3.tgz#ca03833310f6889a3264781aa82e63eb9cfe7848"
@@ -5604,6 +5618,11 @@ fast-deep-equal@^3.1.1:
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
   integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
 
+fast-diff@^1.1.2:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/fast-diff/-/fast-diff-1.2.0.tgz#73ee11982d86caaf7959828d519cfe927fac5f03"
+  integrity sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==
+
 fast-glob@^3.0.3, fast-glob@^3.1.1:
   version "3.2.4"
   resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.4.tgz#d20aefbf99579383e7f3cc66529158c9b98554d3"
@@ -6138,6 +6157,11 @@ get-stdin@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/get-stdin/-/get-stdin-4.0.1.tgz#b968c6b0a04384324902e8bf1a5df32579a450fe"
 
+get-stdin@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/get-stdin/-/get-stdin-6.0.0.tgz#9e09bf712b360ab9225e812048f71fde9c89657b"
+  integrity sha512-jp4tHawyV7+fkkSKyvjuLZswblUtz+SQKzSWnBbii16BuZksJlU1wuBYXY75r+duh/llF1ur6oNwi+2ZzjKZ7g==
+
 get-stdin@^8.0.0:
   version "8.0.0"
   resolved "https://registry.yarnpkg.com/get-stdin/-/get-stdin-8.0.0.tgz#cbad6a73feb75f6eeb22ba9e01f89aa28aa97a53"
@@ -8826,6 +8850,18 @@ prepend-http@^2.0.0:
   resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-2.0.0.tgz#e92434bfa5ea8c19f41cdfd401d741a3c819d897"
   integrity sha1-6SQ0v6XqjBn0HN/UAddBo8gZ2Jc=
 
+prettier-linter-helpers@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz#d23d41fe1375646de2d0104d3454a3008802cf7b"
+  integrity sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==
+  dependencies:
+    fast-diff "^1.1.2"
+
+prettier@^2.0.5:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.0.5.tgz#d6d56282455243f2f92cc1716692c08aa31522d4"
+  integrity sha512-7PtVymN48hGcO4fGjybyBSIWDsLU4H4XlvOHfq91pz9kkGlonzwTfYkaIEwiRg/dAJF9YlbsduBAgtYLi+8cFg==
+
 printf@^0.5.1:
   version "0.5.3"
   resolved "https://registry.yarnpkg.com/printf/-/printf-0.5.3.tgz#8b7eec278d886833312238b2bf42b2b6f250880a"