Hopefully final change to get the linter behaving

.eslintrc.js

@@ -0,0 +1,16 @@
+module.exports = {
+  parser: '@typescript-eslint/parser', // Specifies the ESLint parser
+  extends: [
+    'plugin:@typescript-eslint/recommended', // Uses the recommended rules from the @typescript-eslint/eslint-plugin
+    'prettier/@typescript-eslint', // Uses eslint-config-prettier to disable ESLint rules from @typescript-eslint/eslint-plugin that would conflict with prettier
+    'plugin:prettier/recommended', // Enables eslint-plugin-prettier and displays prettier errors as ESLint errors. Make sure this is always the last configuration in the extends array.
+  ],
+  parserOptions: {
+    ecmaVersion: 2018, // Allows for the parsing of modern ECMAScript features
+    sourceType: 'module', // Allows for the use of imports
+    experimentalDecorators: true,
+  },
+  rules: {
+    '@typescript-eslint/camelcase': 0,
+  },
+};

.prettierrc.js

@@ -0,0 +1,7 @@
+module.exports = {
+  semi: true,
+  trailingComma: 'all',
+  singleQuote: true,
+  printWidth: 180,
+  tabWidth: 2,
+};

src/compass-card.ts

@@ -107,9 +107,7 @@ export class CompassCard extends LitElement {
     return html`
       <ha-card tabindex="0" aria-label=${`Compass: ${label}`} class="flex" @click=${(e) => this.handlePopup(e)}>
         ${this.renderHeader()}
-        <div class="content">
-          ${this.renderCompass(direction, secondary_entity, direction_offset)}
-        </div>
+        <div class="content">${this.renderCompass(direction, secondary_entity, direction_offset)}</div>
       </ha-card>
     `;
   }
@@ -142,16 +140,7 @@ export class CompassCard extends LitElement {
     return html`
       <div class="compass">
         <div class="direction" style="${this.getConfigStyle(this._config.compass)}">
-          <p>
-            ${abbreviation}
-            ${secondary
-              ? html`
-                  <span>
-                    ${secondary.state} ${secondary.attributes.unit_of_measurement}
-                  </span>
-                `
-              : ''}
-          </p>
+          <p>${abbreviation} ${secondary ? html` <span> ${secondary.state} ${secondary.attributes.unit_of_measurement} </span> ` : ''}</p>
         </div>
         <div class="indicator ${CompassCard.computeIndicator(this._config)}" style="transform: rotate(${CompassCard.positiveDegrees(degrees + direction_offset)}deg)"></div>
         ${this.renderNorthIndicator(direction_offset)}