chore(style): minor code style adjustments for improved consistency (#152)

Co-authored-by: Jòan <[email protected]>
Co-authored-by: Ari Perkkiö <[email protected]>

Author: 3 people

.prettierrc

@@ -5,5 +5,13 @@
   "tabWidth": 2,
   "semi": true,
   "bracketSpacing": true,
-  "plugins": ["prettier-plugin-astro"]
+  "plugins": ["prettier-plugin-astro"],
+  "overrides": [
+    {
+      "files": "*.astro",
+      "options": {
+        "parser": "astro"
+      }
+    }
+  ]
 }

docs/tutorialkit.dev/src/components/Layout/Head.astro

@@ -9,15 +9,25 @@ import Default from '@astrojs/starlight/components/Head.astro';
 <script is:inline async src="https://www.googletagmanager.com/gtag/js?id=G-64MFE82HG5"></script>
 
 <script is:inline>
-  // @ts-ignore
+  /**
+   * We have all those @ts-ignore because the latest version of @astro/language-server
+   * type check all scripts even if they are interpreted as JavaScript by the language
+   * server.
+   *
+   * Given this script is kinda considered as external, we should do minimal changes
+   * to it. Adding a single `@ts-nocheck` didn't work :'(.
+   */
+
+  // @ts-ignore -- see above
   window.dataLayer = window.dataLayer || [];
 
-  function gtag() {
-    // @ts-ignore
-    dataLayer.push(arguments);
+  // @ts-ignore -- see above
+  function gtag(...args) {
+    // @ts-ignore -- see above
+    window.dataLayer.push(...args);
   }
-  // @ts-ignore
+
   gtag('js', new Date());
-  // @ts-ignore
+
   gtag('config', 'G-64MFE82HG5');
 </script>

docs/tutorialkit.dev/tsconfig.json

@@ -8,5 +8,6 @@
     "jsx": "react-jsx",
     "jsxImportSource": "react",
     "types": ["@types/gtag.js"]
-  }
+  },
+  "include": ["src"]
 }

eslint.config.mjs

@@ -1,12 +1,13 @@
 import blitzPlugin from '@blitz/eslint-plugin';
 import { getNamingConventionRule, tsFileExtensions } from '@blitz/eslint-plugin/dist/configs/typescript.js';
+import eslintPluginAstro from 'eslint-plugin-astro';
 
 export default [
   {
     ignores: [
       '**/dist',
       '**/node_modules',
-      '**/.astro',
+      '**/.astro/**',
 
       // we ignore our demo templates because they may contain code that is formatted specifically for the demo
       'docs/demo/src/templates',
@@ -21,6 +22,7 @@ export default [
       },
     },
   }),
+  ...eslintPluginAstro.configs.recommended,
   {
     files: ['**/env.d.ts', '**/env-default.d.ts'],
     rules: {

extensions/vscode/build.mjs

@@ -1,6 +1,6 @@
 import * as esbuild from 'esbuild';
-import fs from 'node:fs';
 import { execa } from 'execa';
+import fs from 'node:fs';
 
 const production = process.argv.includes('--production');
 const watch = process.argv.includes('--watch');
@@ -18,7 +18,7 @@ async function main() {
     external: ['vscode'],
     logLevel: 'silent',
     plugins: [
-      /* add to the end of plugins array */
+      // add to the end of plugins array
       esbuildProblemMatcherPlugin,
     ],
   });
@@ -33,7 +33,7 @@ async function main() {
     await ctx.dispose();
 
     if (production) {
-      // rename name in package json to match extension name on store:
+      // rename name in package json to match extension name on store
       const pkgJSON = JSON.parse(fs.readFileSync('./package.json', { encoding: 'utf8' }));
 
       pkgJSON.name = 'tutorialkit';
@@ -50,14 +50,16 @@ const esbuildProblemMatcherPlugin = {
   name: 'esbuild-problem-matcher',
   setup(build) {
     build.onStart(() => {
-      console.log('[watch] build started');
+      console.log('[watch] Build started');
     });
+
     build.onEnd((result) => {
       result.errors.forEach(({ text, location }) => {
         console.error(`✘ [ERROR] ${text}`);
         console.error(`    ${location.file}:${location.line}:${location.column}:`);
       });
-      console.log('[watch] build finished');
+
+      console.log('[watch] Build finished');
     });
   },
 };

extensions/vscode/src/commands/index.ts

@@ -6,10 +6,7 @@ import { selectTutorial } from './tutorialkit.select-tutorial';
 import { loadTutorial } from './tutorialkit.load-tutorial';
 import { initialize } from './tutorialkit.initialize';
 
-/**
- * No need to use these consts outside of this file:
- *   – Use `cmd[name].command` instead.
- */
+// no need to use these consts outside of this file, use `cmd[name].command` instead
 const CMD = {
   INITIALIZE: 'tutorialkit.initialize',
   SELECT_TUTORIAL: 'tutorialkit.select-tutorial',

extensions/vscode/src/commands/tutorialkit.initialize.ts

@@ -1,6 +1,6 @@
 import * as vscode from 'vscode';
-import isTutorialKitWorkspace from '../utils/isTutorialKit';
 import { cmd } from '.';
+import isTutorialKitWorkspace from '../utils/isTutorialKit';
 
 export async function initialize(toastIfEmpty = false) {
   const tutorialWorkpaces = (vscode.workspace.workspaceFolders || []).filter(isTutorialKitWorkspace);
@@ -10,6 +10,7 @@ export async function initialize(toastIfEmpty = false) {
       vscode.window.showInformationMessage(
         'No TutorialKit project found in the current workspace. Make sure there is a "@tutorialkit/astro" dependency or devDependency in your package.json file.',
       );
+
       vscode.commands.executeCommand('setContext', 'tutorialkit:tree', false);
     }
   } else if (tutorialWorkpaces.length === 1) {

extensions/vscode/src/commands/tutorialkit.load-tutorial.ts

@@ -1,6 +1,6 @@
 import * as vscode from 'vscode';
-import { LessonsTreeDataProvider, getLessonsTreeDataProvider, setLessonsTreeDataProvider } from '../views/lessonsTree';
 import { extContext } from '../extension';
+import { LessonsTreeDataProvider, getLessonsTreeDataProvider, setLessonsTreeDataProvider } from '../views/lessonsTree';
 
 export async function loadTutorial(uri: vscode.Uri) {
   setLessonsTreeDataProvider(new LessonsTreeDataProvider(uri, extContext));

extensions/vscode/src/commands/tutorialkit.select-tutorial.ts

@@ -1,6 +1,6 @@
 import * as vscode from 'vscode';
-import isTutorialKitWorkspace from '../utils/isTutorialKit';
 import { cmd } from '.';
+import isTutorialKitWorkspace from '../utils/isTutorialKit';
 
 export async function selectTutorial() {
   const tutorialWorkpaces = (vscode.workspace.workspaceFolders || []).filter(isTutorialKitWorkspace);

extensions/vscode/src/utils/isTutorialKit.ts

@@ -1,10 +1,10 @@
-import * as vscode from 'vscode';
-import * as path from 'path';
 import * as fs from 'fs';
+import * as path from 'path';
+import * as vscode from 'vscode';
 
 /**
- * Check if the workspace is a TutorialKit workspace
- * by looking for a TutorialKit dependency in the package.json file.
+ * Check if the workspace is a TutorialKit workspace by looking for a
+ * TutorialKit dependency in the package.json file.
  *
  * @param folder The workspace folder to check.
  * @returns True if the workspace is a TutorialKit workspace, false otherwise.
@@ -13,6 +13,7 @@ export default function isTutorialKitWorkspace(folder: vscode.WorkspaceFolder):
   const packageJsonPath = path.join(folder.uri.fsPath, 'package.json');
   const packageJsonContent = fs.readFileSync(packageJsonPath, 'utf8');
   const packageJson = JSON.parse(packageJsonContent);
+
   const tutorialkitDependency =
     packageJson.dependencies?.['@tutorialkit/astro'] || packageJson.devDependencies?.['@tutorialkit/astro'];
 

extensions/vscode/src/views/lessonsTree.ts

@@ -15,12 +15,15 @@ let lessonsTreeDataProvider: LessonsTreeDataProvider;
 export function getLessonsTreeDataProvider() {
   return lessonsTreeDataProvider;
 }
+
 export function setLessonsTreeDataProvider(provider: LessonsTreeDataProvider) {
   lessonsTreeDataProvider = provider;
 }
 
 export class LessonsTreeDataProvider implements vscode.TreeDataProvider<Lesson> {
   private _lessons: Lesson[] = [];
+  private _onDidChangeTreeData: vscode.EventEmitter<Lesson | undefined> = new vscode.EventEmitter<Lesson | undefined>();
+  readonly onDidChangeTreeData: vscode.Event<Lesson | undefined> = this._onDidChangeTreeData.event;
 
   constructor(
     private readonly _workspaceRoot: vscode.Uri,
@@ -59,11 +62,14 @@ export class LessonsTreeDataProvider implements vscode.TreeDataProvider<Lesson>
           const metadataFilePath = path.join(filePath, metadataFile);
           const metadataFileContent = fs.readFileSync(metadataFilePath, 'utf8');
           const parsedContent = grayMatter(metadataFileContent);
+
           lesson.name = parsedContent.data.title;
+
           lesson.metadata = {
             _path: metadataFilePath,
             ...(parsedContent.data as any),
           };
+
           lessons.push(lesson);
         }
       }
@@ -72,9 +78,6 @@ export class LessonsTreeDataProvider implements vscode.TreeDataProvider<Lesson>
     return lessons;
   }
 
-  private _onDidChangeTreeData: vscode.EventEmitter<Lesson | undefined> = new vscode.EventEmitter<Lesson | undefined>();
-  readonly onDidChangeTreeData: vscode.Event<Lesson | undefined> = this._onDidChangeTreeData.event;
-
   refresh(): void {
     this._loadLessons();
     this._onDidChangeTreeData.fire(undefined);

package.json

@@ -27,6 +27,7 @@
     "chalk": "^5.3.0",
     "commitlint": "^19.3.0",
     "conventional-changelog": "^6.0.0",
+    "eslint-plugin-astro": "^1.2.3",
     "husky": "^9.0.11",
     "is-ci": "^3.0.1",
     "prettier": "^3.3.2",