VS Code custom task (Vue component snippet)

tasks.json

// Place this file next to `settings.json` (/Library/Application Support/Code/User on MacOS) to be global
// Custom tasks documentation: https://code.visualstudio.com/docs/editor/tasks#_custom-tasks
// Task user input documentation: https://code.visualstudio.com/docs/editor/variables-reference#_input-variables

{
  // See https://go.microsoft.com/fwlink/?LinkId=733558
  // for the documentation about the tasks.json format
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Vue component template",
      "type": "shell",
      "command": "./vue-sfc-template.sh",
      "args": [
        "${input:i18nBlock}",
        "${file}"
      ],
      "options": {
        "cwd": "asbLinkToFolder"
      },
      "problemMatcher": []
    }
  ],
  // User prompt variable
  "inputs": [
    {
      "id": "i18nBlock",
      "type": "pickString",
      "description": "Include i18n block?",
      "options": [
        "Yes",
        "No"
      ],
      "default": "Yes"
    }
  ]
}

vue-sfc-template.sh

#!/bin/bash

OUTPUT_FILE=$2

# Clear the file content
> $OUTPUT_FILE

if [ $1 = 'Yes' ]
then
# Append i18n block to file
cat >> $OUTPUT_FILE << END
<i18n>
{
  "en": {},
  "fr": {}
}
</i18n>

END
fi

# Append default empty vue component
cat >> $OUTPUT_FILE << END
<template>
</template>

<script lang="ts">
import { Vue, Component } from 'nuxt-property-decorator'

@Component({
  name: 'ComponentName',
})
export default class ComponentName extends Vue {
}
</script>

<style lang="sass" scoped>
</style>
END