chore: refactor build and test env (#72)

.cssrem

@@ -4,8 +4,8 @@
   "fixedDigits": 3,
   "vw": true,
   "ignores": [
-    "**/*.less",
-    "*.tsx"
+    // "**/*.less",
+    // "*.tsx"
   ],
   "ignoresViaCommand": []
 }

.github/workflows/ci.yml

@@ -0,0 +1,58 @@
+name: CI
+
+on:
+  pull_request:
+  push:
+    branches: [main, master]
+
+jobs:
+  package:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: ".nvmrc"
+          cache: "yarn"
+      - uses: actions/cache@v3
+        with:
+          path: ./node_modules
+          key: ${{ runner.os }}-${{ hashFiles('**/yarn.lock', '**/*.patch') }}
+      - name: Install node modules
+        run: yarn install --frozen-lockfile
+      - run: npm run package
+
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: ".nvmrc"
+          cache: "yarn"
+      - uses: actions/cache@v3
+        with:
+          path: ./node_modules
+          key: ${{ runner.os }}-${{ hashFiles('**/yarn.lock', '**/*.patch') }}
+      - name: Install node modules
+        run: yarn install --frozen-lockfile
+      - run: xvfb-run -a npm test
+        if: runner.os == 'Linux'
+      - run: npm test
+        if: runner.os != 'Linux'
+
+  lint:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: ".nvmrc"
+          cache: "yarn"
+      - uses: actions/cache@v3
+        with:
+          path: ./node_modules
+          key: ${{ runner.os }}-${{ hashFiles('**/yarn.lock', '**/*.patch') }}
+      - name: Install node modules
+        run: yarn install --frozen-lockfile
+      - run: npm run lint

.gitignore

@@ -2,7 +2,7 @@
 node_modules
 
 *.vsix
-yarn.lock
+# yarn.lock
 
 # Yarn
 # yarn.lock
@@ -14,3 +14,6 @@ yarn-error.log
 !.yarn/sdks
 !.yarn/versions
 .pnp.*
+
+.vscode/**
+.vscode-test/**

.nvmrc

@@ -0,0 +1 @@
+18.19.1

.vscode-test.mjs

@@ -0,0 +1,5 @@
+import { defineConfig } from '@vscode/test-cli';
+
+export default defineConfig({
+	files: 'out/test/**/*.test.js',
+});

.vscode/launch.json

@@ -1,16 +1,21 @@
+// A launch configuration that compiles the extension and then opens it inside a new window
+// Use IntelliSense to learn about possible attributes.
+// Hover to view descriptions of existing attributes.
+// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
 {
   "version": "0.2.0",
   "configurations": [
     {
-      "name": "Launch Extension",
+      "name": "Run Extension",
       "type": "extensionHost",
       "request": "launch",
-      "runtimeExecutable": "${execPath}",
-      "args": ["--extensionDevelopmentPath=${workspaceRoot}"],
-      "stopOnEntry": false,
-      "sourceMaps": true,
-      "preLaunchTask": "npm",
-      "outFiles": ["${workspaceRoot}/out/**/*.js"]
+      "args": [
+        "--extensionDevelopmentPath=${workspaceFolder}"
+      ],
+      "outFiles": [
+        "${workspaceFolder}/dist/**/*.js"
+      ],
+      "preLaunchTask": "${defaultBuildTask}"
     }
   ]
-}
+}

.vscode/settings.json

@@ -2,8 +2,18 @@
   "files.associations": {
     ".cssrem": "jsonc"
   },
+  "files.exclude": {
+    "out": false, // set this to true to hide the "out" folder with the compiled JS files
+    "dist": false // set this to true to hide the "dist" folder with the compiled JS files
+  },
+  "search.exclude": {
+    "out": true, // set this to false to include "out" folder in search results
+    "dist": true // set this to false to include "dist" folder in search results
+  },
   "editor.formatOnSave": true,
   "[markdown]": {
     "editor.formatOnSave": false
-  }
+  },
+  // Turn off tsc task auto detection since we have the necessary tasks as npm scripts
+  "typescript.tsc.autoDetect": "off"
 }

.vscode/tasks.json

@@ -1,20 +1,64 @@
-// A task runner that calls a custom npm script that compiles the extension.
+// See https://go.microsoft.com/fwlink/?LinkId=733558
+// for the documentation about the tasks.json format
 {
+  "version": "2.0.0",
   "tasks": [
     {
-      "taskName": "npm",
-      // we want to run npm
-      "command": "npm",
-      // the command is a shell script
-      "isShellCommand": true,
-      // show the output window only if unrecognized errors occur.
-      "showOutput": "silent",
-      // we run the custom script "compile" as defined in package.json
-      "args": ["run", "prod", "--loglevel", "silent"],
-      // The tsc compiler is started in watching mode
+      "label": "watch",
+      "dependsOn": [
+        "npm: watch:tsc",
+        "npm: watch:esbuild"
+      ],
+      "presentation": {
+        "reveal": "never"
+      },
+      "group": {
+        "kind": "build",
+        "isDefault": true
+      }
+    },
+    {
+      "type": "npm",
+      "script": "watch:esbuild",
+      "group": "build",
+      "problemMatcher": "$esbuild-watch",
+      "isBackground": true,
+      "label": "npm: watch:esbuild",
+      "presentation": {
+        "group": "watch",
+        "reveal": "never"
+      }
+    },
+    {
+      "type": "npm",
+      "script": "watch:tsc",
+      "group": "build",
+      "problemMatcher": "$tsc-watch",
       "isBackground": true,
-      // use the standard tsc in watch mode problem matcher to find compile problems in the output.
-      "problemMatcher": "$tsc-watch"
+      "label": "npm: watch:tsc",
+      "presentation": {
+        "group": "watch",
+        "reveal": "never"
+      }
+    },
+    {
+      "type": "npm",
+      "script": "watch-tests",
+      "problemMatcher": "$tsc-watch",
+      "isBackground": true,
+      "presentation": {
+        "reveal": "never",
+        "group": "watchers"
+      },
+      "group": "build"
+    },
+    {
+      "label": "tasks: watch-tests",
+      "dependsOn": [
+        "npm: watch",
+        "npm: watch-tests"
+      ],
+      "problemMatcher": []
     }
   ]
-}
+}

.vscodeignore

@@ -1,9 +1,18 @@
 .vscode/**
 .vscode-test/**
-out/test/**
-test/**
 src/**
-**/*.map
 .gitignore
-tsconfig.json
+.yarnrc
+esbuild.js
 vsc-extension-quickstart.md
+**/tsconfig.json
+**/eslint.config.mjs
+**/*.map
+**/*.ts
+**/.vscode-test.*
+.github/**
+.yarn/**
+examples/**
+demo.gif
+.cssrem
+.yarnrc.yml

esbuild.js

@@ -0,0 +1,55 @@
+const esbuild = require('esbuild');
+
+const production = process.argv.includes('--production');
+const watch = process.argv.includes('--watch');
+
+/**
+ * @type {import('esbuild').Plugin}
+ */
+const esbuildProblemMatcherPlugin = {
+  name: 'esbuild-problem-matcher',
+
+  setup(build) {
+    build.onStart(() => {
+      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');
+    });
+  },
+};
+
+async function main() {
+  const ctx = await esbuild.context({
+    entryPoints: ['src/extension.ts'],
+    bundle: true,
+    format: 'cjs',
+    minify: production,
+    sourcemap: !production,
+    sourcesContent: false,
+    platform: 'node',
+    outfile: 'out/extension.js',
+    mainFields: ['module', 'main'],
+    external: ['vscode'],
+    logLevel: 'silent',
+    plugins: [
+      /* add to the end of plugins array */
+      esbuildProblemMatcherPlugin,
+    ],
+  });
+  if (watch) {
+    await ctx.watch();
+  } else {
+    await ctx.rebuild();
+    await ctx.dispose();
+  }
+}
+
+main().catch(e => {
+  console.error(e);
+  process.exit(1);
+});

eslint.config.mjs

@@ -0,0 +1,34 @@
+import typescriptEslint from '@typescript-eslint/eslint-plugin';
+import tsParser from '@typescript-eslint/parser';
+
+export default [
+  {
+    files: ['**/*.ts'],
+  },
+  {
+    plugins: {
+      '@typescript-eslint': typescriptEslint,
+    },
+
+    languageOptions: {
+      parser: tsParser,
+      ecmaVersion: 2022,
+      sourceType: 'module',
+    },
+
+    rules: {
+      '@typescript-eslint/naming-convention': [
+        'warn',
+        {
+          selector: 'import',
+          format: ['camelCase', 'PascalCase'],
+        },
+      ],
+
+      // curly: "warn",
+      // eqeqeq: "warn",
+      'no-throw-literal': 'warn',
+      semi: 'warn',
+    },
+  },
+];