VSCode Vetur jsconfig.json

To work with auto filling in paths and set other JavaScript/Vue stuff in Visual Studio Code I have added jsconfig.json in the project root with this content:

{
    "compilerOptions": {
      "baseUrl": ".",
      "paths": {
        "@/*": [
          "resources/js/*"
        ],
        "@editorcomponents/*": [
          "resources/js/components/editor/*"
        ],
        "@editormodals/*": [
          "resources/js/components/editor/modals/*"
        ],
        "@editormodules/*": [
          "resources/js/components/editor/modules/*"
        ],
        "@previewcomponents/*": [
          "resources/js/components/preview/*"
        ],
        "@previewmodals/*": [
          "resources/js/components/preview/modals/*"
        ],
        "@previewmodules/*": [
          "resources/js/components/preview/modules/*"
        ]
      }
    },
    "exclude": [
      "node_modules",
      "public"
    ]
  }

in my Laravel / Vue project. The issue is that when I use import SomeThing from "@.. I do see the alias like previewcomponentsfor example as I added it, but I do not see the components that are under these paths as Vue files.

Why is that? Do I need webpack.minx.js changes as well perhaps? Anything else I missed in this config file to make aliases work?

rhand

5 years ago

Level 6

When I add

module.exports = {
  resolve: {
      alias: {
          '@': path.resolve('resources/js'),
          '@editorcomponents': path.resolve('resources/js/components/editor'),
          '@editormodals': path.resolve('resources/js/components/editor/modals'),
          '@editormodules': path.resolve('resources/js/components/editor/modules'),
          '@previewcomponents': path.resolve('resources/js/components/preview'),
          '@previewmodals': path.resolve('resources/js/components/preview/modals'),
          '@previewmodules': path.resolve('resources/js/components/preview/modals')
      },
  },

extra to webpack.mix.js .. it does not change anything either. Aliases still load but not Vue files under them.

rhand

5 years ago

Level 6

Hmm, never mind. Now when I type out the alias it shows me the options. Perhaps I had to reload again post addition to webpack.mix.js but still not quite sure I needed that. Will do some more testing and need for both aliases in webpack.mix.js and Veture jsconfig.json from anyone reading this thread is still very welcome.

neolikotsi

4 years ago

Best Answer

Level 12

Yep, on vscode it necessary to restart after adding the jsconfig.json. https://laravel-news.com/jsconfigjs-vscode

2 likes

Please or to participate in this conversation.