init

.eslintrc.json

@@ -0,0 +1,24 @@
+{
+    "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"
+    },
+    "ignorePatterns": [
+        "out",
+        "dist",
+        "**/*.d.ts"
+    ]
+}

.gitignore

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

.vscode/extensions.json

@@ -0,0 +1,7 @@
+{
+	// See http://go.microsoft.com/fwlink/?LinkId=827846
+	// for the documentation about the extensions.json format
+	"recommendations": [
+		"dbaeumer.vscode-eslint"
+	]
+}

.vscode/launch.json

@@ -0,0 +1,34 @@
+// 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": "Run Extension",
+			"type": "extensionHost",
+			"request": "launch",
+			"args": [
+				"--extensionDevelopmentPath=${workspaceFolder}"
+			],
+			"outFiles": [
+				"${workspaceFolder}/out/**/*.js"
+			],
+			"preLaunchTask": "${defaultBuildTask}"
+		},
+		{
+			"name": "Extension Tests",
+			"type": "extensionHost",
+			"request": "launch",
+			"args": [
+				"--extensionDevelopmentPath=${workspaceFolder}",
+				"--extensionTestsPath=${workspaceFolder}/out/test/suite/index"
+			],
+			"outFiles": [
+				"${workspaceFolder}/out/test/**/*.js"
+			],
+			"preLaunchTask": "${defaultBuildTask}"
+		}
+	]
+}

.vscode/settings.json

@@ -0,0 +1,11 @@
+// Place your settings in this file to overwrite default and user settings.
+{
+    "files.exclude": {
+        "out": false // set this to true to hide the "out" folder with the compiled JS files
+    },
+    "search.exclude": {
+        "out": true // set this to false to include "out" folder in search results
+    },
+    // Turn off tsc task auto detection since we have the necessary tasks as npm scripts
+    "typescript.tsc.autoDetect": "off"
+}

.vscode/tasks.json

@@ -0,0 +1,20 @@
+// See https://go.microsoft.com/fwlink/?LinkId=733558
+// for the documentation about the tasks.json format
+{
+	"version": "2.0.0",
+	"tasks": [
+		{
+			"type": "npm",
+			"script": "watch",
+			"problemMatcher": "$tsc-watch",
+			"isBackground": true,
+			"presentation": {
+				"reveal": "never"
+			},
+			"group": {
+				"kind": "build",
+				"isDefault": true
+			}
+		}
+	]
+}

.vscodeignore

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

.yarnrc

@@ -0,0 +1 @@
+--ignore-engines true

.yarnrc.yml

@@ -0,0 +1 @@
+nodeLinker: node-modules

CHANGELOG.md

@@ -0,0 +1,9 @@
+# Change Log
+
+All notable changes to the "react-developer-tools" 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,71 @@
+# react-developer-tools README
+
+This is the README for your extension "react-developer-tools". After writing up a brief description, we recommend including the following sections.
+
+## Features
+
+Describe specific features of your extension including screenshots of your extension in action. Image paths are relative to this README file.
+
+For example if there is an image subfolder under your extension project workspace:
+
+\!\[feature X\]\(images/feature-x.png\)
+
+> Tip: Many popular extensions utilize animations. This is an excellent way to show off your extension! We recommend short, focused animations that are easy to follow.
+
+## Requirements
+
+If you have any requirements or dependencies, add a section describing those and how to install and configure them.
+
+## Extension Settings
+
+Include if your extension adds any VS Code settings through the `contributes.configuration` extension point.
+
+For example:
+
+This extension contributes the following settings:
+
+* `myExtension.enable`: Enable/disable this extension.
+* `myExtension.thing`: Set to `blah` to do something.
+
+## Known Issues
+
+Calling out known issues can help limit users opening duplicate issues against your extension.
+
+## Release Notes
+
+Users appreciate release notes as you update your extension.
+
+### 1.0.0
+
+Initial release of ...
+
+### 1.0.1
+
+Fixed issue #.
+
+### 1.1.0
+
+Added features X, Y, and Z.
+
+---
+
+## Following extension guidelines
+
+Ensure that you've read through the extensions guidelines and follow the best practices for creating your extension.
+
+* [Extension Guidelines](https://code.visualstudio.com/api/references/extension-guidelines)
+
+## Working with Markdown
+
+You can author your README using Visual Studio Code. Here are some useful editor keyboard shortcuts:
+
+* Split the editor (`Cmd+\` on macOS or `Ctrl+\` on Windows and Linux).
+* Toggle preview (`Shift+Cmd+V` on macOS or `Shift+Ctrl+V` on Windows and Linux).
+* Press `Ctrl+Space` (Windows, Linux, macOS) to see a list of Markdown snippets.
+
+## For more information
+
+* [Visual Studio Code's Markdown Support](http://code.visualstudio.com/docs/languages/markdown)
+* [Markdown Syntax Reference](https://help.github.com/articles/markdown-basics/)
+
+**Enjoy!**

package.json

@@ -0,0 +1,57 @@
+{
+  "name": "react-developer-tools",
+  "displayName": "React Developer Tools",
+  "description": "Useful tools to speed up creation of React components, files, and more.",
+  "version": "0.0.1",
+  "engines": {
+    "vscode": "^1.77.0"
+  },
+  "categories": [
+    "Snippets",
+    "Formatters"
+  ],
+  "activationEvents": [],
+  "main": "./out/extension.js",
+  "contributes": {
+    "commands": [
+      {
+        "command": "react-developer-tools.helloWorld",
+        "title": "Hello World"
+      },
+      {
+        "command": "react-developer-tools.createComponent",
+        "title": "Create Component"
+      }
+    ],
+    "menus": {
+      "explorer/context": [
+        {
+          "command": "react-developer-tools.createComponent",
+          "group": "1_modification",
+          "when": "explorerResourceIsFolder"
+        }
+      ]
+    }
+  },
+  "scripts": {
+    "vscode:prepublish": "yarn run compile",
+    "compile": "tsc -p ./",
+    "watch": "tsc -watch -p ./",
+    "pretest": "yarn run compile && yarn run lint",
+    "lint": "eslint src --ext ts",
+    "test": "node ./out/test/runTest.js"
+  },
+  "devDependencies": {
+    "@types/glob": "^8.1.0",
+    "@types/mocha": "^10.0.1",
+    "@types/node": "16.x",
+    "@types/vscode": "^1.77.0",
+    "@typescript-eslint/eslint-plugin": "^5.56.0",
+    "@typescript-eslint/parser": "^5.56.0",
+    "@vscode/test-electron": "^2.3.0",
+    "eslint": "^8.36.0",
+    "glob": "^8.1.0",
+    "mocha": "^10.2.0",
+    "typescript": "^4.9.5"
+  }
+}

src/createComponent.ts

@@ -0,0 +1,103 @@
+import * as fs from "fs";
+import * as path from "path";
+import * as vscode from "vscode";
+
+import arrowComponent from "./templates/arrowComponent";
+import styledArrowComponent from "./templates/styledArrowComponent";
+import styledFile from "./templates/styledFile";
+
+export default async (
+  componentName: string,
+  { dir, styled }: { dir?: string; styled?: boolean }
+) => {
+  const COMPONENT_FILE_NAME = `${componentName}.tsx`;
+  const projectRoot = (vscode.workspace.workspaceFolders as any)[0].uri.fsPath;
+
+  if (!dir) {
+    dir =
+      (await vscode.window.showInputBox({
+        value: "/",
+        prompt: `Path from root`,
+        ignoreFocusOut: true,
+        valueSelection: [-1, -1],
+      })) || "";
+  }
+  if (!dir.includes(projectRoot)) {
+    dir = projectRoot + dir;
+  }
+  if (dir[dir.length - 1] !== "/") {
+    dir = dir + "/";
+  }
+  const dirWithFileName = dir + componentName;
+  const filePath = (fileName: string) => dirWithFileName + "/" + fileName;
+
+  createDir(dirWithFileName);
+
+  // if (styled) {
+  //   await createFile(
+  //     filePath(COMPONENT_FILE_NAME),
+  //     styledArrowComponent(componentName)
+  //   );
+  //   await createFile(filePath(STYLED_FILE_NAME), styledFile());
+  // } else {
+  await createFile(
+    filePath(COMPONENT_FILE_NAME),
+    arrowComponent(componentName)
+  );
+  // }
+
+  setTimeout(() => {
+    vscode.workspace
+      .openTextDocument(filePath(COMPONENT_FILE_NAME))
+      .then((editor) => {
+        if (!editor) {
+          return;
+        }
+        vscode.window.showTextDocument(editor);
+      });
+  }, 50);
+};
+
+const createDir = (targetDir: string) => {
+  const pathSeperator = path.sep;
+  const initDir = path.isAbsolute(targetDir) ? pathSeperator : "";
+  const baseDir = __dirname;
+
+  return targetDir.split(pathSeperator).reduce((parentDir, childDir) => {
+    const cwd = path.resolve(baseDir, parentDir, childDir);
+    try {
+      fs.mkdirSync(cwd);
+    } catch (err: any) {
+      if (err.code === "EEXIST") {
+        return cwd;
+      }
+
+      // To avoid `EISDIR` error on Mac and `EACCES`-->`ENOENT` and `EPERM` on Windows.
+      if (err.code === "ENOENT") {
+        // Throw the original parentDir error on curDir `ENOENT` failure.
+        throw new Error(`EACCES: permission denied, mkdir '${parentDir}'`);
+      }
+
+      const error = ["EACCES", "EPERM", "EISDIR"].indexOf(err.code) > -1;
+      if (!error || (error && cwd === path.resolve(targetDir))) {
+        throw err;
+      }
+    }
+
+    return cwd;
+  }, initDir);
+};
+
+const createFile = async (filePath: string, content: string) => {
+  if (!fs.existsSync(filePath)) {
+    fs.createWriteStream(filePath).close();
+
+    fs.writeFile(filePath, content, (err) => {
+      if (err) {
+        vscode.window.showErrorMessage("React Developer Tools can't write to file.");
+      }
+    });
+  } else {
+    vscode.window.showWarningMessage("File already exists.");
+  }
+};