Skip to content

LWC generated jsconfig.js issues #609

@nwcm

Description

@nwcm

Summary

Currently the LWC language server will automatically generate jsconfig.json files in every lwc/* folder in a SFDX project on start. This has multiple impacts.

  1. Any javascript exports from submodule type files in a lwc component will be autocomplete suggested. e.g. some helper.js which has exported functions. These are not importable by other c/lwc components unless re-exported by the lwc component entry point.
  2. Does not function for multiple directory locations of lwc components. force-app/main/default/lwc/a and force-app/main/bar/lwc/b. (While uncommon, it is supported by deployment processes and greatly helps organise SFDX source)
  3. Suggested imports double path, c/component/component even for components in same directory.
  4. Any mocks are also suggested

Related discussion can be read here. However, I am raising this here as it is the language server which causes this behaviour.

Steps To Reproduce:

  1. Create a SFDX project with a LWC component.
  2. Add a helper javascript file in the component.
  3. See that autocomplete will suggest any exported classes or functions that are not the component entry point
  4. Create another project directory force-app/main/foo and force-app/main/bar
  5. create lwc components, try import / auto complete

Expected result

There are likely a few options that could be implemented. It does look like the TS future moves towards a single tsconfig at root with paths defined for components. This would solve these issues.

For my project we have been automating removing all jsconfig.js in lwc folders and created a single force-app/jsconfig.js which has paths set to each component entry point via a script.

Some options from the top of my head

  1. I see the other logic for CORE_ALL or CORE_PARTIAL workspaces do not create these files if a tsconfig exists at root. This could be similarily implemented for WorkspaceType.SFDX where if jsconfig.js exists at root do not generate lwc/jsconfig.json files. Related source
  2. Remove generation completely (likely not ideal in most cases)
  3. Move to generating a single force-app/jsconfig.json on create/delete of /lwc/** files with paths for components, which also honours additional user config / paths.
{
  "compilerOptions": {
    "target": "ESNext",
    "baseUrl": ".",
    "experimentalDecorators": true,
    "allowJs": true,
    "checkJs": true,
    "moduleResolution": "Node",
    "paths": {
      "c/a": ["./main/foo/lwc/a/a.js"],
      "c/b": ["./main/bar/lwc/b/b.js"]
    }
  },
  "include": ["**/*", "../.sfdx/typings/lwc/**/*.d.ts", "types/**/*.d.ts"],
  "exclude": ["**/__mock__/**", "**/__mocks__/**", "**/__tests__/**"],
  "typeAcquisition": {
    "include": ["jest"]
  }
}

Actual result

While I understand this is all developer quality of life stuff. It would go a long way for improving development in SFDX projects for little effort (which I am happy to do, though not sure how to run language server to test).

Additional information

Feel free to attach a screenshot.

VS Code Version: 1.101.2

SFDX CLI Version: 2.93.7

OS and version:
Edition Windows 11 Enterprise
Version 23H2
OS build 22631.5472
Experience Windows Feature Experience Pack 1000.22700.1106.0

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions