Re-configure ESLint

.eslintrc.js

@@ -1,15 +1,29 @@
 module.exports = {
   env: {
     browser: true,
-    es6: true,
+    es2021: true,
     node: true,
   },
-  extends: ['eslint:recommended', 'plugin:prettier/recommended'],
-  globals: {},
-  parser: 'babel-eslint',
+  extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier'],
+  parser: '@typescript-eslint/parser',
   parserOptions: {
-    ecmaVersion: 2018,
+    ecmaVersion: 12,
     sourceType: 'module',
   },
+  plugins: ['@typescript-eslint'],
   rules: {},
+  overrides: [
+    {
+      files: ['webpack.config.js'],
+      rules: {
+        '@typescript-eslint/no-var-requires': 'off',
+      },
+    },
+    {
+      files: ['*.js'],
+      rules: {
+        '@typescript-eslint/explicit-module-boundary-types': 'off',
+      },
+    },
+  ],
 };

.prettierrc

@@ -0,0 +1,4 @@
+{
+  "printWidth": 120,
+  "singleQuote": true
+}

.vscode/settings.json

@@ -1,6 +1,6 @@
 {
   "editor.tabSize": 2,
-  
+
   "ruby.lint": {
     "rubocop": {
       "useBundler": true

app/javascript/controllers/itunes_controller.js

@@ -23,9 +23,12 @@ export default class extends Controller {
   _fetchSearchResult() {
     const encodedTrackName = encodeURIComponent(this.trackName);
     const encodedArtistName = encodeURIComponent(this.artistName);
-    return fetch(`https://itunes.apple.com/search?term=${encodedTrackName}+${encodedArtistName}&country=JP&media=music&entity=song&lang=ja_jp`, {
-      redirect: 'manual',
-    }).then((response) => {
+    return fetch(
+      `https://itunes.apple.com/search?term=${encodedTrackName}+${encodedArtistName}&country=JP&media=music&entity=song&lang=ja_jp`,
+      {
+        redirect: 'manual',
+      }
+    ).then((response) => {
       if (response.ok) {
         return response.json();
       } else if (response.redirected) {
@@ -42,7 +45,10 @@ export default class extends Controller {
 
   _findAppropriateResult(results) {
     let result = results.find((res) => {
-      return res.trackName.toLowerCase() === this.trackName.toLowerCase() && res.artistName.toLowerCase() === this.artistName.toLowerCase();
+      return (
+        res.trackName.toLowerCase() === this.trackName.toLowerCase() &&
+        res.artistName.toLowerCase() === this.artistName.toLowerCase()
+      );
     });
 
     if (result === undefined) {
@@ -63,7 +69,9 @@ export default class extends Controller {
     this.artworkTarget.setAttribute('src', result.artworkUrl100);
     this.audioTarget.setAttribute('src', result.previewUrl);
 
-    this.linkTargets.forEach((element) => element.setAttribute('href', `${result.trackViewUrl}&at=1001lKQU&app=itunes`));
+    this.linkTargets.forEach((element) =>
+      element.setAttribute('href', `${result.trackViewUrl}&at=1001lKQU&app=itunes`)
+    );
 
     this.element.classList.remove('d-none');
   }

config/favicon.json

@@ -13,9 +13,7 @@
       },
       "app_name": "LiveLog"
     },
-    "desktop_browser": [
-
-    ],
+    "desktop_browser": [],
     "windows": {
       "picture_aspect": "no_change",
       "background_color": "#da532c",

package.json

@@ -2,7 +2,8 @@
   "private": true,
   "scripts": {
     "build": "webpack",
-    "lint": "eslint *.config.js .*.js app/javascript"
+    "format": "prettier '**/*.{json,js,ts}' --ignore-path .gitignore --write && eslint . --ext .js,.ts --ignore-path .gitignore --fix",
+    "lint": "prettier '**/*.{json,js,ts}' --ignore-path .gitignore --check && eslint . --ext .js,.ts --ignore-path .gitignore && tsc"
   },
   "dependencies": {
     "@rails/activestorage": "^6.1.3",
@@ -18,10 +19,13 @@
     "stimulus": "^2.0.0"
   },
   "devDependencies": {
+    "@types/rails__activestorage": "^6.0.0",
+    "@types/rails__ujs": "^6.0.0",
+    "@typescript-eslint/eslint-plugin": "^4.24.0",
+    "@typescript-eslint/parser": "^4.24.0",
     "babel-eslint": "^10.1.0",
     "eslint": "^7.27.0",
     "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-prettier": "^3.4.0",
     "prettier": "^2.3.0",
     "ts-loader": "^9.2.1",
     "tsconfig-paths-webpack-plugin": "^3.5.1",

tsconfig.json

@@ -3,7 +3,6 @@
   "compilerOptions": {
     "target": "ES2015",
     "allowJs": true,
-    "checkJs": true,
     "sourceMap": true,
     "noEmit": true,
     "strict": true,