Go to definition not working on my project (vue & sass file) [visual-studio-code] - vue.js

I am disappointed on two points by developing a Nuxt project on vscode.
On vscode my jsconfig.js is the default one :
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"~/*": ["./*"],
"#/*": ["./*"],
"~~/*": ["./*"],
"##/*": ["./*"]
}
},
"exclude": ["node_modules", ".nuxt", "dist"]
}
It's working on vue file for autocompletion to import some components for example (with ctrl+space)
But impossible to go to definition next with cmd+click. I do not understand why and this is really annoying.
I can't post image (need 10 reputation), but here is my import on vue file (with no definition found for ...)
import PldFooter from '#/components/Footer';
Other point, I use sass files on assests folder. Compilation working well but I cannot access by cmd+click to the file from node_modules. Here is an example of import :
#import "~bulma/sass/base/helpers.sass";
==> No definition found for helpers.sass
Thank you for your help,
Ben.

Have you opened multiple folders (projects) in a window?
I'm not sure whether your issue the same as me. I got an issue "Go to Definition not working" in Visual Studio Code when I opened multiples folders (projects) and I resolved.
I have used the plugin Vetur to support the .vue file.
There are 2 ways which work well:
Open only one project in a window
You can open multiple projects in a window but the project you want to "Go to Definition" works well which must be the first project in the folder tree in the EXPLORER tab.
It seems the plugin Vetur picks up the first project in multiple projects to be the root folder.
My file tsconfig.json
{
...
"compilerOptions": {
"baseUrl": "./",
"paths": {
"#/*": ["src/*"],
}
},
"exclude": ["node_modules", "dist"]
...
}
Reference:
https://github.com/vuejs/vetur/issues/423#issuecomment-405415204
I apologize if my answer which cannot help you.

According to the Vetur setup guide:
If you are using Webpack's alias or TypeScript's path mapping to resolve components, you need to update Vetur's tsconfig.json or jsconfig.json
For example:
└── src
├── components
│ ├── a.vue
│ └── b.vue
├── containers
│ └── index.vue
├── index.js
└── jsconfig.json
jsconfig.json:
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"components/*": [
"src/components/*"
]
}
}
}
index.vue
import a from 'components/a.vue'
import b from 'components/b.vue'
It solved the problem in my case.

Related

When using npm workspaces, how to force a package to be installed in the relative node_modules?

Here are some related questions:
When using yarn workspaces, how to force a package to be installed in the relative node_modules?
NPM 7 Workspaces - Multiple node_modules?
Should I have to use no-hoist for all packages in a monorepo with react-native-web?
I'm using npm workspaces to organise multiple packages. The issue is that my main package don't have its dependency's(which is also one of the workspaces) source code in local node_modules. I know the dependency is installed in root node_modules, the thing is that I need to visit it by relative path from the main package.
Here is the project structure after running npm install in root dir:
root
├── package.json -> { "workspaces": ["packages/*"] }
├── node_modules
│ ├── dependency-A
│ ├── dependency-B
└── packages
├── main-package
├── dependency-A
└── dependency-B
package.json in root dir:
{
"workspaces": [
"packages/main-package",
"packages/dependency-A",
"packages/dependency-B"
]
}
package.json in "packages/main-package":
{
"dependencies": {
"dependency-A": "0.1.0",
"dependency-B": "0.1.0"
}
}
webpack.config.js in "packages/main-package":
{
plugins: [
new CopyWebpackPlugin({
patterns: [
{
from: "node_modules/dependency-A/media",
to: "static/dependency-A-media",
},
],
}),
new CopyWebpackPlugin({
patterns: [
{
context: "node_modules/dependency-B/dist",
from: "research-data.json",
},
],
}),
]
}
When I run webapck in main-package, the error message is:
ERROR in unable to locate '/Users/trumangao/myApp/packages/main-package/node_modules/dependency-A/media' glob
ERROR in unable to locate '/Users/trumangao/myApp/packages/main-package/node_modules/dependency-B/dist/research-data.json' glob
I'm wondering what is the best practice to resolve such question? The option "nohoist" of Yarn inspired me but I can't find it in npm. I also tried to run install in package dir but it will break their symlink. How could I install dependencies of each package in their local node_modules while maintain their links like lerna#4?
Tried versions:
node.js#16.13.0
npm#8.1.0
&
node.js#18.14.0
npm#9.3.1
Hope I've made myself plain with my poor English LoL, thanks a lot.

How to tell Vite to only build a specific component in library mode?

I have a Vue project that is able to load other Vue components bundled as .mjs files. I want to develop all those pluggable components inside a repository but instead of distributing all pluggable components in a single build I want to tell Vite which component to build. If that works I don't need to think about dealing with a Monorepo, Multirepo or something else.
After creating the library project I thought about organizing each plugin into a separate folder in the src directory
.
└── src
├── textWithBlueBackground
| ├── index.ts ( importing "TextWithBlueBackground" and exporting as "Renderer" )
| └── TextWithBlueBackground.vue
└── textWithRedBackground
├── index.ts ( importing "TextWithRedBackground" and exporting as "Renderer" )
└── TextWithRedBackground.vue
The problem is that I need to switch to library mode but I don't know what to pass in there
build: {
lib: {
entry: resolve(__dirname, "./src/index.ts"), // this is wrong
name: "Renderer",
fileName: "renderer",
},
rollupOptions: {
external: ["vue"],
output: {
globals: {
vue: "Vue",
},
},
},
},
After fixing that... Is it possible to tell Vite ( via CLI flag ) to only build a specific sub directory? E.g.
vite build ./src/{folderName}
If that's not possible I could create an index.ts in src
import { Renderer as TextWithBlueBackground } from "./textWithBlueBackground";
import { Renderer as TextWithRedBackground } from "./textWithRedBackground";
export { TextWithBlueBackground, TextWithRedBackground }
but how can I tell Vite to only build a specific component then?
The generated .mjs file should only contain the desired component, preferably as "Renderer" but I think the component name should be fine too.

How to import index.vue files without specifying the file name using vue 3 and vite?

I started working recently on a Vue 3 application which runs with vite and I am trying to restructure the directories so that I can group components and related sub-components in folders.
I am currently using /path/to/MyComponent/index.vue to import the higher-hierarchy component, and I would like to write the import statement without specifying the file name, so that I could do something like this:
import MyComponent from `#/path/to/MyComponent`
where the files structure looks like the following:
path
│
└───to
│
└───MyComponent
│ index.vue
│ SubComponent.vue
│ ...
I tried to play with the resolve.alias property in the vite.config.ts file, but I wasn't successful. Anyone managed to achieve this?
This is one of the attempts:
export default defineConfig({
...
resolve: {
alias: [
{
find: "#",
replacement: fileURLToPath(new URL("./src", import.meta.url)),
},
{
find: /(^(?!.*[.](ts|js|tsx|jsx|vue|)$))/,
replacement: "$1/index.vue",
},
],
},
...
After trying various things I found a solution in line with my original post involvin modifying the vite.config.ts file resolve.alias property.
In addition I had to modify the tsconfig.json file to make sure that typescript compiler is also able to resolve the path to the index.vue file.
This is how I achieved importing a index.vue component only referencing the parent folder name:
1. Vite configuration
// vite.config.ts
export default defineConfig({
resolve: {
alias: [
{
find: /#\/components\/((?!.*[.](ts|js|tsx|jsx|vue)$).*$)/,
replacement: fileURLToPath(
new URL("./src/components/$1/index.vue", import.meta.url)
),
},
{
find: "#",
replacement: fileURLToPath(new URL("./src", import.meta.url)),
},
// ...
The above configuration code will tell vite to check if the import statement contains with #/components and does NOT end with any of the following extensions: ts|js|tsx|jsx|vue. E.g. #/components/MyComponent.
When these criteria are met the find path will be replaced with the path to the index.vue file within the src/components folder. E.g. #/components/MyComponent/index.vue.
The only limitations of the above solution is that it targets a specific folder (in this case the components folder). However we can add more alias objects to match any other folder where we want to implement this import pattern.
2. Typescript configuration
If using typescript ESLint will throws two errors: Missing file extension and Unable to resolve path to module. This because the typescript compiler is agnostic of the above vite configuration.
For this reason I also had to modify the tsconfig.json file as following:
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"#/components/*": ["./src/components/*", "./src/components/*/index.vue"],
"#/*": ["./src/*"]
}
}
The above code will leverage Typescript module resolution path mapping to map everything that matches #/components/* to ./src/components/*, where * represents the path within the ./src/components. This path is relative to where the tsconfig.json file reside (as defined by the baseUrl parameter).
If a component is not found, Typescript compiler will look inside ./src/components/*/index.vue.

pnpm, workspace dependency and also supporting publishing?

I am new to pnpm workspaces and am trying to resolve the following issue.
My demo project:
root
packages
common-ui
main-lib
common-ui is a Vite based package containing some Vue components that can be reused by other packages, in my example it's being used by main-lib.
"dependencies": {
"ui-common": "workspace:*"
},
common-ui is referencing an index.ts inside its package.json
"main": "index.ts",
index.ts is exporting my Vue components:
...
export { default as Heading } from './components/Heading/Heading.vue';
...
Now I am able to import those components inside main-lib:
import { Heading } from 'common-ui'
This all works fine but I would also like to be able to publish my library to the npm registry. As common-ui is using the Vite, it's possible to build in library mode: https://vitejs.dev/guide/build.html#library-mode. My package inside common-ui will need to change to:
{
"name": "common-ui",
"files": ["dist"],
"main": "./dist/common-ui.umd.js",
"module": "./dist/common-ui.es.js",
"exports": {
".": {
"import": "./dist/common-ui.es.js",
"require": "./dist/common-ui.umd.js"
}
}
}
main is not referencing index.ts anymore but a dist folder that only gets updated when the vite command is ran. Is there a way for me to support both publishing/versioning and referencing the actual source code from inside main-lib?
I've taken a quick look at Rush.js but I am not sure if provides a solution and I want to be sure before I continue on that path.

How to configure `I18n Ally` VsCode plugin to read my locals from one single file?

I'm using vue-i18n package to translate my Vue project and want to use "I18n Ally" vs code extention to manage translations. The default folder structure for this extension is this:
locales # i18n, langs, locale are also acceptable
├── en.json
├── de-DE.json
├── zh-CN.yml # YAML
├── zh-TW.ts # You can mix different formats
├── ...
└── <country-code>.json
But I have one single translation file with this format:
{
"en": {
"users": {
"title": "Users list",
"menu": {
"show_users": "Display users",
"hands_down": "Hands down",
"unblock_all": "Unblock all"
},
...
And I cannot configure the extension to read this configuration.
Author of i18n Ally here. Currently, we don't support the locale code as top-level keys in json files. I'd suggest using the following format in dedicated files for each locale, which will also get better support over other i18n tools.
{
"users": {
"title": "Users list",
"menu": {
"show_users": "Display users",
"hands_down": "Hands down",
"unblock_all": "Unblock all"
},
...
This should be a better practice as your application grows as well. Thanks for the understanding and hope you enjoy the extension.