Initial commit

Author: captbaritone

.eslintrc.json

@@ -0,0 +1,19 @@
+{
+    "root": true,
+    "parser": "@typescript-eslint/parser",
+    "parserOptions": {
+        "ecmaVersion": 6,
+        "sourceType": "module"
+    },
+    "plugins": [
+        "@typescript-eslint"
+    ],
+    "rules": {
+        "@typescript-eslint/naming-convention": "warn",
+        "@typescript-eslint/semi": "warn",
+        "curly": "warn",
+        "eqeqeq": "warn",
+        "no-throw-literal": "warn",
+        "semi": "off"
+    }
+}

.gitignore

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

.vscodeignore

@@ -0,0 +1,10 @@
+.vscode/**
+.vscode-test/**
+out/test/**
+src/**
+.gitignore
+vsc-extension-quickstart.md
+**/tsconfig.json
+**/.eslintrc.json
+**/*.map
+**/*.ts

CHANGELOG.md

@@ -0,0 +1,9 @@
+# Change Log
+
+All notable changes to the "implicitparens" extension will be documented in this file.
+
+Check [Keep a Changelog](http://keepachangelog.com/) for recommendations on how to structure this file.
+
+## [Unreleased]
+
+- Initial release

README.md

@@ -0,0 +1,30 @@
+# Show Implicit Parentheses (JavaScript)
+
+When reading complex expressions, it can be hard to understand how the subexpressions will be grouped. This extensions shows you how the sub expression are grouped by visually including the implicit parentheses as decorations.
+
+## Command Pallet Commands
+
+- "Show Implicit Parentheses"
+- "Hide Implicit Parentheses"
+- "Toggle Implicit Parentheses"
+
+## Extension Settings
+
+This extension contributes the following settings:
+
+- `implicitparens.enabled`: enable/disable this extension
+
+## TODO
+
+- [ ] Ensure we can parse Flow and Typescript
+- [ ] Attempt to reparse on parser config change
+- [ ] Make config names human readable
+- [ ] Figure out how to configure colors
+- [ ] Set default color for light mode
+- [ ] Ensure plugin has name
+
+## Possible Future Features
+
+- Enable/disable menu bar item in config
+- Allow user to configure which parens are shown
+- Provide automated fixes for adding parens, or even extracting expressions to variables.

package.json

@@ -0,0 +1,100 @@
+{
+  "name": "implicitparens",
+  "displayName": "ImplicitParens",
+  "description": "Show implied parentheses in JavaScript code",
+  "version": "0.0.1",
+  "engines": {
+    "vscode": "^1.48.0"
+  },
+  "categories": [
+    "Other"
+  ],
+  "activationEvents": [
+    "onLanguage:typescript",
+    "onLanguage:javascript",
+    "onLanguage:javascriptreact",
+    "onLanguage:typescriptreact"
+  ],
+  "main": "./out/extension.js",
+  "contributes": {
+    "commands": [
+      {
+        "command": "implicitparens.toggleParens",
+        "title": "Toggle Implicit Parentheses"
+      },
+      {
+        "command": "implicitparens.showParens",
+        "title": "Show Implicit Parentheses"
+      },
+      {
+        "command": "implicitparens.hideParens",
+        "title": "Hide Implicit Parentheses"
+      }
+    ],
+    "configuration": {
+      "title": "Implicit Parentheses",
+      "properties": {
+        "implicitparens.enabled": {
+          "type": "boolean",
+          "default": true,
+          "description": "Show implicit parentheses"
+        },
+        "implicitparens.parser": {
+          "type": "string",
+          "default": "TypeScript",
+          "description": "Parser to use",
+          "enum": [
+            "JavaScript",
+            "TypeScript",
+            "Flow"
+          ],
+          "enumDescriptions": [
+            "Babel Parser",
+            "Babel Parser with TypeScript enabled",
+            "Babel Parser with Flow enabled"
+          ]
+        }
+      }
+    },
+    "colors": [
+      {
+        "id": "implicitparens.parens",
+        "description": "Text color for the inserted parentheses",
+        "defaults": {
+          "dark": "#707070",
+          "light": "#999999",
+          "highContrast": "foreground"
+        }
+      }
+    ]
+  },
+  "scripts": {
+    "vscode:prepublish": "yarn run compile",
+    "compile": "tsc -p ./",
+    "lint": "eslint src --ext ts",
+    "watch": "tsc -watch -p ./",
+    "pretest": "yarn run compile && yarn run lint",
+    "test": "node ./out/test/runTest.js"
+  },
+  "devDependencies": {
+    "@types/glob": "^7.1.3",
+    "@types/mocha": "^8.0.0",
+    "@types/node": "^14.0.27",
+    "@types/vscode": "^1.48.0",
+    "@typescript-eslint/eslint-plugin": "^3.8.0",
+    "@typescript-eslint/parser": "^3.8.0",
+    "eslint": "^7.6.0",
+    "glob": "^7.1.6",
+    "mocha": "^8.0.1",
+    "typescript": "^3.8.3",
+    "vscode-test": "^1.4.0"
+  },
+  "dependencies": {
+    "@babel/parser": "^7.11.4",
+    "@babel/traverse": "^7.11.0",
+    "@types/babel__traverse": "^7.0.13",
+    "@types/lodash": "^4.14.159",
+    "lodash": "^4.17.20"
+  },
+  "prettier": {}
+}

src/commands.ts

@@ -0,0 +1,32 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+// The module 'vscode' contains the VS Code extensibility API
+// Import the module and reference it with the alias vscode in your code below
+import * as vscode from "vscode";
+import {
+  ENABLED_CONFIG,
+  SHOW_COMMAND,
+  TOGGLE_COMMAND,
+  HIDE_COMMAND,
+} from "./constants";
+
+export function activateCommands(subscriptions: { dispose(): any }[]) {
+  subscriptions.push(
+    vscode.commands.registerCommand(SHOW_COMMAND, () => {
+      vscode.workspace.getConfiguration().update(ENABLED_CONFIG, true);
+    }),
+    vscode.commands.registerCommand(HIDE_COMMAND, () => {
+      vscode.workspace.getConfiguration().update(ENABLED_CONFIG, false);
+    }),
+    vscode.commands.registerCommand(TOGGLE_COMMAND, () => {
+      const config = vscode.workspace.getConfiguration();
+      // TODO: This technically returns a promise. If we got multiple toggles in
+      // rapid succession, that's a race condition.
+      config.update(
+        ENABLED_CONFIG,
+        !config.get(ENABLED_CONFIG),
+        // TODO: Should this affect the workspace instead?
+        true
+      );
+    })
+  );
+}

src/constants.ts

@@ -0,0 +1,7 @@
+export const TOGGLE_COMMAND = "implicitparens.toggleParens";
+export const SHOW_COMMAND = "implicitparens.showParens";
+export const HIDE_COMMAND = "implicitparens.hideParens";
+
+export const ENABLED_CONFIG = "implicitparens.enabled";
+export const PARSER_CONFIG = "implicitparens.parser";
+export const DEBOUNCE_TIME = 500;

src/extension.ts

@@ -0,0 +1,49 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+// The module 'vscode' contains the VS Code extensibility API
+// Import the module and reference it with the alias vscode in your code below
+import * as vscode from "vscode";
+import { activateParens } from "./parens";
+import { activateMenuBarItem } from "./menuBarItem";
+import { activateCommands } from "./commands";
+import { ENABLED_CONFIG } from "./constants";
+
+// this method is called when vs code is activated
+export function activate(context: vscode.ExtensionContext) {
+  activateMenuBarItem(context.subscriptions);
+  activateCommands(context.subscriptions);
+
+  let parens: vscode.Disposable | null = null;
+  function updateParensEnabled() {
+    if (vscode.workspace.getConfiguration().get(ENABLED_CONFIG)) {
+      if (parens === null) {
+        parens = activateParens();
+      } else {
+      }
+    } else {
+      if (parens !== null) {
+        parens.dispose();
+        parens = null;
+      } else {
+      }
+    }
+  }
+
+  context.subscriptions.push(
+    new vscode.Disposable(() => {
+      if (parens !== null) {
+        parens.dispose();
+      }
+    })
+  );
+
+  updateParensEnabled();
+  vscode.workspace.onDidChangeConfiguration(
+    (event) => {
+      if (event.affectsConfiguration(ENABLED_CONFIG)) {
+        updateParensEnabled();
+      }
+    },
+    null,
+    context.subscriptions
+  );
+}

src/menuBarItem.ts

@@ -0,0 +1,33 @@
+import * as vscode from "vscode";
+import { ENABLED_CONFIG, TOGGLE_COMMAND } from "./constants";
+
+export function activateMenuBarItem(subscriptions: { dispose(): any }[]) {
+  const statusBarItem = vscode.window.createStatusBarItem(
+    vscode.StatusBarAlignment.Left,
+    100
+  );
+
+  const PLAY = "\u25BA";
+  const STOP = "\u25A0";
+
+  function setText() {
+    const config = vscode.workspace.getConfiguration();
+    const icon = config.get(ENABLED_CONFIG) ? STOP : PLAY;
+    statusBarItem.text = `(${icon})`;
+  }
+
+  setText();
+  statusBarItem.show();
+  statusBarItem.command = TOGGLE_COMMAND;
+
+  vscode.workspace.onDidChangeConfiguration(
+    (event) => {
+      if (event.affectsConfiguration(ENABLED_CONFIG)) {
+        setText();
+      }
+    },
+    null,
+    subscriptions
+  );
+  subscriptions.push(statusBarItem);
+}