✨ Add formatting (#24)

Hey there thanks for the nice extension was working on a `CODEOWNERS`
file the other day and having syntax syntax highlighting and
auto-complete made it a lot nicer experience. ❤

The thing that I missed was formatting and this PR tries to fix that.

The basic idea is that the code owners starting position gets aligned in
one visual column with a user-specified offset from the longest file
pattern part of all non comment out lines.

### Before
```codeowners
*               @foo
  /some-path @bar
another-path/but-loooooooooonger                                 @baz

# a comment

    # an indented comment
/docs/**/*.md                     @foo @bar
# /docs/**/*.rst                     @foo @bar

```

### After
```codeowners
*                                    @foo
  /some-path                         @bar
another-path/but-loooooooooonger     @baz

# a comment

    # an indented comment
/docs/**/*.md                        @foo @bar
# /docs/**/*.rst                     @foo @bar

```

To make cross-platform testing (and contributing) easier I removed the
shell scripts and made the npm scripts instead, which also removed the
need to specify the path inside of the dist files in the node_modules,
hope that is ok.

---------

Co-authored-by: Christopher Dignam <chris@dignam.xyz>

.eslintrc.js

@@ -3,7 +3,7 @@ module.exports = {
   parser: "@typescript-eslint/parser",
   parserOptions: {
     sourceType: "module",
-    project: "./tsconfig.json",
+    projects: ["./tsconfig.json", "./tsconfig.test.json"],
   },
   extends: ["plugin:@typescript-eslint/recommended"],
   plugins: ["@typescript-eslint"],

.github/workflows/javascript.yml

@@ -10,48 +10,68 @@ jobs:
   build:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
       - name: Use Node.js
         uses: actions/setup-node@v3
         with:
           node-version-file: "package.json"
       - name: Install dependencies
         run: npm ci
       - name: Build bundle
-        run: ./s/build
+        run: npm run compile
   format:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
       - name: Use Node.js
         uses: actions/setup-node@v3
         with:
           node-version-file: "package.json"
       - name: Install dependencies
         run: npm ci
       - name: Check Formatting
-        run: ./s/fmt
+        run: npm run fmt:check
   lint:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
       - name: Use Node.js
         uses: actions/setup-node@v3
         with:
           node-version-file: "package.json"
       - name: Install dependencies
         run: npm ci
       - name: Lint JS
-        run: ./s/eslint
+        run: npm run eslint
   typecheck:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
       - name: Use Node.js
         uses: actions/setup-node@v3
         with:
           node-version-file: "package.json"
       - name: Install dependencies
         run: npm ci
       - name: Typescript
-        run: ./s/typecheck
+        run: npm run typecheck
+  test:
+    strategy:
+      matrix:
+        os: [macos-latest, ubuntu-latest, windows-latest]
+    runs-on: ${{ matrix.os }}
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      - name: Use Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version-file: "package.json"
+      - name: Install dependencies
+        run: npm ci
+      - name: Run tests ${{ matrix.os }}
+        if: runner.os == 'Linux'
+        run: xvfb-run -a npm test
+      - name: Run tests ${{ matrix.os }}
+        if: runner.os != 'Linux'
+        run: npm test

.gitignore

@@ -1,3 +1,4 @@
 node_modules
 *.vsix
 out
+.vscode-test

.vscode-test.js

@@ -0,0 +1,3 @@
+const { defineConfig } = require("@vscode/test-cli")
+
+module.exports = defineConfig({ files: "out/test/**/*.test.js" })

.vscode/launch.json

@@ -22,9 +22,10 @@
       "runtimeExecutable": "${execPath}",
       "args": [
         "--extensionDevelopmentPath=${workspaceFolder}",
-        "--extensionTestsPath=${workspaceFolder}/test"
+        "--extensionTestsPath=${workspaceFolder}/out/test/suite/index"
       ],
-      "outFiles": ["${workspaceFolder}/out/test/**/*.js"]
+      "outFiles": ["${workspaceFolder}/out/test/**/*.js"],
+      "preLaunchTask": "build-tests"
     }
   ]
 }

.vscode/settings.json

@@ -1,5 +1,13 @@
 // Place your settings in this file to overwrite default and user settings.
 {
   "editor.defaultFormatter": "esbenp.prettier-vscode",
-  "editor.formatOnSave": true
+  "editor.formatOnSave": true,
+  "cSpell.words": ["codeowners"],
+  "files.associations": {
+    "test/data/**/*": "codeowners"
+  },
+  "[codeowners]": {
+    // never autoformat test files
+    "editor.defaultFormatter": null
+  }
 }

.vscode/tasks.json

@@ -15,6 +15,21 @@
         // "clear": true,
         "close": true
       }
+    },
+    {
+      "label": "build-tests",
+      "type": "npm",
+      "script": "compile-tests",
+      "problemMatcher": [],
+      "presentation": {
+        // "echo": true,
+        // "reveal": "silent",
+        // "focus": false,
+        // "panel": "new",
+        // "showReuseMessage": false,
+        // "clear": true,
+        "close": true
+      }
     }
   ]
 }

.vscodeignore

@@ -1,9 +1,15 @@
 .vscode/**
 .vscode-test/**
+.vscode-test.js
 out/test/**
+out/src/**
+test/**
 src/**
+s/**
 .gitignore
+.github/workflows
 vsc-extension-quickstart.md
+**/tsconfig.test.json
 **/tsconfig.json
 **/.prettierrc.js
 **/tslint.json

CHANGELOG.md

@@ -7,6 +7,13 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## 3.3.0 - 2023-11-15
+
+### Added
+
+- Formatting support behind the `github-code-owners.format.enabled` setting (#24). Thanks @s-weigand!
+- Tests for new formatting code (#24). Thanks @s-weigand!
+
 ## 3.2.1 - 2023-11-12
 
 ### Changed

README.md

@@ -24,6 +24,13 @@ Shows the first code owner. Click to see matching line in CODEOWNERS file.
 
 <img src="./images/syntax-highlighting.png" alt="syntax highlighting" height="284px"/>
 
+#### Formatting
+
+> [!TIP]
+> Enable formatting by setting `github-code-owners.format.enabled` to `true`.
+
+<img src="./images/formatting.gif" alt="auto complete of paths and usernames" width="408px" height="185px"/>
+
 ### Command
 
 Open matching line in CODEOWNERS file with the `GitHub Code Owners: Show owners of current file` command.

esbuild.config.js

@@ -0,0 +1,15 @@
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const { build } = require("esbuild")
+
+build({
+  entryPoints: ["./src/extension.ts"],
+  outfile: "./out/extension.js",
+  external: ["vscode"],
+  platform: "node",
+  sourcemap: "linked",
+  minify: true,
+  bundle: true,
+}).catch((error) => {
+  console.error(error)
+  process.exit(1)
+})

images/README.md

@@ -0,0 +1,20 @@
+# Images
+
+## Converting videos to gifs
+
+VSCode Marketplace doesn't support videos in README.md, so we need to convert to gifs.
+
+[Gifski](https://github.com/ImageOptim/gifski) works well for converting videos to small gifs.
+
+```bash
+brew install gifski
+
+ffmpeg -i video.mov frames/frame%04d.png
+gifski -o anim.gif frames/frame*.png
+```
+
+## Embedding images in README.md
+
+When embedding images, specify the height and width to be 1/2 the actual dimensions. This makes the images less blurry on high resolution displays.
+
+If an image is 816 × 370, specify the height and width to be 408x185.