VSCode Vue Files
This extension allows you to quickly create new Vue files filled with some boilerplate content depending on your choice.
Inspired by Angular Files (https://github.com/ivalexa/vscode-angular2-files)
Features
Right-click inside your explorer panel or over a folder to open "Vue Files" menu option.
You will find many options to choose how you want to create your new file.
1- Right-click on a folder and choose the template you want
2- Choose the name of your file (extension not needed)
3- Enjoy your easily created Vue Component file
Extension Settings
You can add these options to your VS Code Settings to have a better experience (check the current default value on the right side):
Menu Options
These configs enable/disable the corresponding menu options, all enabled by default:
"vscode-vue-files.menu.showCompositionApi": true,
"vscode-vue-files.menu.showOptionsApi": true,
"vscode-vue-files.menu.showTypescript": true,
"vscode-vue-files.menu.showJavascript": true,
"vscode-vue-files.menu.showCss": true,
"vscode-vue-files.menu.showScss": true
File Structure
If true, places the script tag at the top of the new files, otherwise, the template tag comes at the top. It's false by default (template first).
"vscode-vue-files.fileStructure.scriptTagComesFirst": false
File Template
If true, generates a functional V-Model template inside the newly generated file (Props, Emits, and Computed options must be enabled to be functional).
"vscode-vue-files.template.showV-ModelTemplate": true
File Options
These settings show/hide the corresponding options in the newly generated files:
"vscode-vue-files.option.showNameScriptOption": true,
"vscode-vue-files.option.showComponentsScriptOption": true,
"vscode-vue-files.option.showDirectivesScriptOption": false,
"vscode-vue-files.option.showExtendsScriptOption": false,
"vscode-vue-files.option.showMixinsScriptOption": false,
"vscode-vue-files.option.showProvideInjectScriptOption": false,
"vscode-vue-files.option.showInheritAttributesScriptOption": false,
"vscode-vue-files.option.showPropsScriptOption": true,
"vscode-vue-files.option.showEmitsScriptOption": true,
"vscode-vue-files.option.showSetupScriptOption": false,
"vscode-vue-files.option.showDataScriptOption": true,
"vscode-vue-files.option.showComputedScriptOption": true,
"vscode-vue-files.option.showWatchScriptOption": true,
"vscode-vue-files.option.showMethodsScriptOption": true
Life Cycle Hooks
These settings show/hide the corresponding life-cycle hooks in the newly generated files.
"vscode-vue-files.lifecycle.showLifecycleHooksScriptOptions": true,
"vscode-vue-files.lifecycle.showBeforeCreateScriptOption": false,
"vscode-vue-files.lifecycle.showCreatedScriptOption": false,
"vscode-vue-files.lifecycle.showBeforeMountScriptOption": false,
"vscode-vue-files.lifecycle.showMountedScriptOption": true,
"vscode-vue-files.lifecycle.showBeforeUpdateScriptOption": false,
"vscode-vue-files.lifecycle.showUpdatedScriptOption": true,
"vscode-vue-files.lifecycle.showActivatedScriptOption": false,
"vscode-vue-files.lifecycle.showDeactivatedScriptOption": false,
"vscode-vue-files.lifecycle.showBeforeUnmountScriptOption": true,
"vscode-vue-files.lifecycle.showUnmountedScriptOption": false,
"vscode-vue-files.lifecycle.showErrorCapturedScriptOption": false,
"vscode-vue-files.lifecycle.showRenderTrackedScriptOption": false,
"vscode-vue-files.lifecycle.showRenderTriggeredScriptOption": false
Release Notes
1.1.0
- Many code quality improvements.
- Included many other options that can be enabled/disabled through settings.
- Added a fancy menu and better description for the settings.
- Previous settings were removed, now more general settings were included to show the menu options.
- Included the base template of a working V-Model for new components (can be disabled on settings).
- Improved how component name is generated based on the given string.
1.0.0
- Initial release.
- Users can choose between Options API and Composition API.
- Users can choose Javascript or Typescript as script language.
- Users can choose Css or Scss as style language.
Disclaimer
Important: This extension due to the nature of it's purpose will create
files on your hard drive and if necessary create the respective folder structure.
While it should not override any files during this process, I'm not giving any guarantees
or take any responsibility in case of lost data.
License
MIT
Donate
💚 If you find this extension useful, I'd be very happy if you support me here! 😃
Enjoy!
