Introduction

This Code Extension offers a command pallette option to generate files filled with code snippets on the fly. Set it up by adding a .codecannon.json in the root of your Workspace.

Setup

Here follows an example of .codecannon.json:

{
  "ammo": [
    {
      "id": "default-sass",
      "extension": "scss",
      "body": ["@import '../../styling/helpers.scss'\n", ".${COMPONENT_NAME}"]
    },
    {
      "id": "default-index-ts",
      "extension": "ts",
      "name": "index",
      "body": ["export { default } from './${FILENAME}'"]
    },
    {
      "id": "default-component-tsx",
      "extension": "tsx",
      "body": [
        "import React from 'react';\n",
        "import $ from './${FILENAME}.scss';\n",
        "interface Props {};\n",
        "const ${COMPONENT_NAME}: React.FC<Props> = ({",
        "}) => {",
        "return <>${COMPONENT_NAME}</>;",
        "};\n",
        "export default ${COMPONENT_NAME};"
      ]
    },
    {
      "id": "update-index",
      "extension": "ts",
      "name": "index",
      "body": ["export { default as ${COMPONENT_NAME} } from './${FILENAME}'"]
    }
  ],
  "cannons": [
    {
      "aftermath": ["update-index"],
      "ammo": ["default-sass", "default-index-ts", "default-component-tsx"],
      "description": "Creates a React TSX component",
      "id": "createComponent",
      "name": "Create Component",
      "target": "src/components"
    },
    {
      "ammo": ["default-component-tsx"],
      "description": "Creates only a React TSX component",
      "id": "createOnyComponent",
      "name": "Create Only Component",
      "target": "/src/singles"
    },
    {
      "ammo": ["default-sass"],
      "createFolder": false,
      "description": "Creates only a SCSS file",
      "id": "createOnySass",
      "name": "Create Only Sass",
      "target": "src/styles"
    }
  ],
  "options": {
    "fileNameConvention": "kebab-case"
  }
}

At the moment there are three parts within this config:

Ammo: Contains your code snippets;
Cannons: Displayed within command pallette to shoot your code snippets into existence;
Options: General configuration, in this case the fileNameConvention to maintain;

Ammo

Ammo setting accepts an array of objects. Each object consists of the following:

Property	Type	Required	Description
`id`	`object`	Yes	An unique identifier.
`extension`	`string`	Yes	File extension, could be anything. Do no start with a `.`, this is done automatically.
`name`	`string`	No	Filename on creation, default to the name given in the command pallette.
`body`	`string[]`	Yes	Your code snippet. Use `\n` to create newlines, or make use of the locally available variables, see section Dynamic variables.

Cannons

Cannons setting accepts an array of objects. Each object consists of the following:

Property	Type	Required	Description
`aftermath`	`object`	No	Array of references to ammo to fire in the root of the `target` folder.
`createFolder`	`string`	No	Defaults to `true` when given `false` no folder is created in the `target` folder.
`description`	`string`	Yes	Description of what the 'cannon' does, for example: Creating a React component.
`id`	`string`	Yes	An unique identifier.
`name`	`string`	Yes	Displayed in the Command Pallette as an option.
`target`	`string[]`	Yes	Folder to target, folder will be used to add your code snippets as files. When `createFolder` is `true` a subfolder will be created within the `target` folder.

Options

Options setting accepts object with the following properties:

fileNameConvention: Accepts the following types: camelCase, kebab-case, PascalCase, snake_case and is used to create filenames in your desired convention.

Property	Type	Required	Description
`fileNameConvention`	`string`	Yes	Accepts the following types: `camelCase`, `kebab-case`, `PascalCase`, `snake_case` and is used to create filenames in your desired convention.

Dynamic variables

Within a body of an ammo object you can make use of the following variables:

COMPONENT_NAME : Name of component, is always PascalCase and is based on given file name;
FILENAME: Name of file, which is filled out when executing Load Arsenal -> {Your Cannon} in VSCode;

Each variable should be wrapped in ${}.

Code Cannon

Triple