VScode: How to autocomple json/scss/image file paths from shortcut paths specified in jsconfig shortcuts

Question

When doing imports, intellisense will suggest autocompletion names when I am trying to import a React .jsx component. Nothing will be suggested when I am trying to import json or scss files though.

I have a set of aliases that I set up in my webpack.config.js

  resolve: {
    extensions: ['.css', '.js', '.jsx'],
    alias: {
      'src': path.resolve(__dirname + '/src'),
      'data': path.resolve(__dirname + '/src/data'),
      'assets': path.resolve(__dirname + '/src/assets'),
      'images': path.resolve(__dirname + '/src/assets/images'),
      'styles': path.resolve(__dirname + '/src/assets/styles'),
      'components': path.resolve(__dirname + '/src/components'),
      'types': path.resolve(__dirname + '/src/types'),
      'functions': path.resolve(__dirname + '/src/functions'),
      'pages': path.resolve(__dirname + '/src/pages')
    }
  },

And because I want intellisense to autocomplete these paths, I created a jsconfig.json

    {
        "compilerOptions": {
          "jsx": "react",
          "allowSyntheticDefaultImports": true,
          "target": "es6",
          "baseUrl": "./",
          "paths": {
            "src": ["./src"],
            "src/*": ["./src/*"],
            "data": ["./src/data"],
            "data/*": ["./src/data/*"],
            "assets": ["./src/assets"],
            "assets/*": ["./src/assets/*"],
            "images": ["./src/assets/images"],
            "images/*": ["./src/assets/images/*"],
            "styles": ["./src/assets/styles"],
            "styles/*": ["./src/assets/styles/*"],
            "components": ["./src/components"],
            "components/*": ["./src/components/*"],
            "types": ["./src/types"],
            "types/*": ["./src/types/*"],
            "functions": ["./src/functions"],
            "functions/*": ["./src/functions/*"],
            "pages": ["./src/pages"],
            "pages/*": ["./src/pages/*"],
          }
        },
        "exclude": ["node_modules"],
        "checkJs": "true"
      }

I have path intellisense installed

I also have my keybindings.json set up to be

[
    { "key": ".", "command": "" }
]

I also added "typescript.suggest.paths": false to my .vscode/setting.json as suggested in the path intellisense documentation although I am not using typescript. This is just a javascript project.

Look for the comments of the answer here: https://stackoverflow.com/questions/56241357/vs-code-cant-see-css-files-in-intellisense — adampweb, Dec 06 '20 at 15:39
what extensions do you have? I'm not certain but I think you might need an scss extension. — Nailuj29, Dec 06 '20 at 17:18
@AdamP. I might have path autocomplete, it's on my work computer, form the comments it doesn't look like it works anyway. The main thing I want is intellisense for json, so that I can have autocompletion when I'm trying to use a variable from a json file — Sam, Dec 06 '20 at 19:18
@Sam Sorry, I think I misunderstood your question. I don't think VS Code supports using variables in JSON files with Intellisense. You could just load the JSON file in and use `JSON.parse` to access it. — Nailuj29, Dec 06 '20 at 19:29
@Nailuj29 It does if I use absolute paths, or relative paths, but not when I'm using shortcuts — Sam, Dec 06 '20 at 19:30
@Sam what is you vscode version and are you using it in windows — Chandan, Dec 09 '20 at 08:40
@Sam did you checked without `jsonconfig.json` if it give suggestion for scss, json, css — Chandan, Dec 10 '20 at 05:56
It gives suggestions for none of the shortcuts without the jsconfig. With the jsconfig, at least the jsx and js files are suggested. Using relative paths (not using the shortcuts) results in autocompleted files — Sam, Dec 10 '20 at 05:58
@Sam did you tried with [path-intellisense.mappings](https://github.com/ChristianKohler/PathIntellisense#mappings) — Chandan, Dec 11 '20 at 12:13
@Chandan I added `"path-intellisense.mappings": { "assets": "${workspaceRoot}/src/assets", "styles": "${workspaceRoot}/src/assets/styles" },` to my `jsconfig.json` and it didn't do anything — Sam, Dec 14 '20 at 17:51

Sam · Accepted Answer · 2021-09-30T21:41:29.617

1

I had to add

    "compilerOptions": {
        "resolveJsonModule": true,

to my jsconfig.json for json

edited Sep 30 '21 at 21:41

answered Sep 26 '21 at 23:55

Sam

1,765
11
82
176

score 0 · Answer 2 · answered Oct 18 '22 at 17:53

0

I couldn't see any .scss or .css files in JSX, TSX, or TS (JS was fine) - I use the Path Intellisense extension by Kohler.

Fixed it by adding this to my vscode settings.json:

"javascript.suggest.paths": false,
"typescript.suggest.paths": false

answered Oct 18 '22 at 17:53

SS87

11
1
3

VScode: How to autocomple json/scss/image file paths from shortcut paths specified in jsconfig shortcuts

2 Answers2