Enable your extension to run on VS Code for the web

build/web-extension.webpack.config.js

@@ -0,0 +1,52 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+//@ts-check
+'use strict';
+
+//@ts-check
+/** @typedef {import('webpack').Configuration} WebpackConfig **/
+
+const path = require('path');
+const webpack = require('webpack');
+
+module.exports = /** @type WebpackConfig */ {
+	context: path.dirname(__dirname),
+	mode: 'none', // this leaves the source code as close as possible to the original (when packaging we set this to 'production')
+	target: 'webworker', // extensions run in a webworker context
+	entry: {
+		'extension': './extension.js',
+	},
+	resolve: {
+		mainFields: ['module', 'main'],
+		extensions: ['.ts', '.js'], // support ts-files and js-files
+		alias: {
+		},
+		fallback: {
+			'assert': require.resolve('assert'),
+			'path': require.resolve('path-browserify'),
+			'os': require.resolve('os-browserify/browser'),
+			'util': require.resolve('util/'),
+			'fs': false
+		}
+	},
+	plugins: [
+		new webpack.ProvidePlugin({
+			process: 'process/browser'
+		}),
+	],
+	externals: {
+		'vscode': 'commonjs vscode', // ignored because it doesn't exist
+	},
+	performance: {
+		hints: false
+	},
+	output: {
+		filename: '[name].js',
+		path: path.join(__dirname, '../dist/web'),
+		libraryTarget: 'commonjs'
+	},
+	devtool: 'nosources-source-map'
+};

options.js

@@ -2,7 +2,6 @@
 const vscode = require('vscode'),
   path = require('path'),
   os = require('os'),
-  fs = require('fs'),
   editorconfig = require('editorconfig');
 const dropComments = inText => inText
   .replace(/\/\*.*\*\//g, '')
@@ -25,12 +24,21 @@ const mergeOpts = (opts, kind) => {
   return finOpts;
 };
 
-const findRecursive = (dir, fileName, root) => {
+const findRecursive = async (dir, fileName, root) => {
   const fullPath = path.join(dir, fileName);
   const nextDir = path.dirname(dir);
-  let result = fs.existsSync(fullPath) ? fullPath : null;
+
+  let result;
+
+  try {
+    await vscode.workspace.fs.stat(fullPath);
+    result = fullPath;
+  } catch {
+    result = null;
+  }
+
   if (!result && nextDir !== dir && dir !== root) {
-    result = findRecursive(nextDir, fileName, root);
+    result = await findRecursive(nextDir, fileName, root);
   }
   return result;
 };
@@ -129,12 +137,12 @@ const getWorkspaceRoot = doc => {
   return folder.uri.fsPath;
 };
 
-module.exports = (doc, type, formattingOptions) => {
+module.exports = async (doc, type, formattingOptions) => {
   let root = getWorkspaceRoot(doc) || vscode.workspace.rootPath;
   let dir = doc.isUntitled ? root : path.dirname(doc.fileName);
   let opts = optionsFromVSCode(doc, formattingOptions, type);
   set_file_editorconfig_opts(doc.fileName, opts); // this does nothing if no ec file was found
-  let configFile = dir ? findRecursive(dir, '.jsbeautifyrc', root) : null;
+  let configFile = dir ? await findRecursive(dir, '.jsbeautifyrc', root) : null;
 
   if (!configFile) {
     let beautify_config = vscode.workspace.getConfiguration('beautify')
@@ -146,20 +154,29 @@ module.exports = (doc, type, formattingOptions) => {
         if (path.isAbsolute(beautify_config)) configFile = beautify_config;
         else configFile = path.resolve(root, beautify_config);
 
-        configFile = fs.existsSync(configFile) ? configFile : null;
+        try {
+          await vscode.workspace.fs.stat(configFile)
+        } catch {
+          configFile = null;
+        }
       }
     }
   }
   if (!configFile && root) {
-    configFile = findRecursive(path.dirname(root), '.jsbeautifyrc');
+    configFile = await findRecursive(path.dirname(root), '.jsbeautifyrc');
   }
   if (!configFile) {
     configFile = path.join(os.homedir(), '.jsbeautifyrc');
-    if (!fs.existsSync(configFile)) return Promise.resolve(opts);
+
+    try {
+      await vscode.workspace.fs.stat(configFile)
+    } catch {
+      return Promise.resolve(opts);
+    }
   }
   return new Promise((resolve, reject) => {
-    fs.readFile(configFile, 'utf8', (e, d) => {
-      if (!d || !d.length) return resolve(opts);
+    return vscode.workspace.fs.readFile(configFile).then(d => {
+      if(!d || !d.length) return resolve(opts);
       try {
         const unCommented = dropComments(d.toString());
         opts = JSON.parse(unCommented);
@@ -170,6 +187,8 @@ module.exports = (doc, type, formattingOptions) => {
           `Found a .jsbeautifyrc file [${configFile}], but it didn't parse correctly.`);
         reject();
       }
-    });
+    }, error => {
+      reject()
+    })
   });
 };

package.json

@@ -22,6 +22,7 @@
   },
   "license": "MIT",
   "main": "./extension",
+  "browser": "./dist/web/extension.js",
   "contributes": {
     "languages": [
       {
@@ -217,14 +218,25 @@
   "devDependencies": {
     "@types/mocha": "^2.2.42",
     "@types/node": "^8.10.36",
+    "@types/vscode": "^1.59.0",
     "expect.js": "^0.3.1",
     "mocha": "^5.2.0",
+    "os-browserify": "^0.3.0",
+    "path-browserify": "^1.0.1",
+    "process": "^0.11.10",
     "typescript": "^2.6.1",
-    "vscode": "~1.1.18"
+    "util": "^0.12.4",
+    "vscode": "^1.1.37",
+    "webpack": "^5.51.1",
+    "webpack-cli": "^4.8.0"
   },
   "scripts": {
     "postinstall": "node ./node_modules/vscode/bin/install",
-    "test": "node ./node_modules/vscode/bin/test"
+    "test": "node ./node_modules/vscode/bin/test",
+    "compile-web": "webpack --config ./build/web-extension.webpack.config.js",
+    "watch-web": "webpack --watch --config ./build/web-extension.webpack.config.js",
+    "package-web": "webpack --mode production --devtool hidden-source-map --config ./build/web-extension.webpack.config.js",
+    "vscode:prepublish": "npm run package-web"
   },
   "repository": {
     "type": "git",