We Keep Coding

how to import without index at the ending url - vscode

I'm trying to to configure vs-code to recognize and suggest imports without
index ending
foo (folder)
- index (js file)
current behavior:
import './foo/index'
expected behavior:
import './foo'
I tried changing vs code settings but its still doesn`t work:
javascript.preferences.importModuleSpecifierEnding: 'shortest',
typesciprt.preferences.importModuleSpecifierEnding: 'shortest'
-. Note I also use react and path intellisense if it matters
Have anyone ever encountered this problem ? I would be grateful for any help I could get

I got this working by installing the various plugins below.
Most of the time things just import by themselves as soon as I type the class name. Alternatively, a lightbulb appears that you can click on. Or you can push F1, and type "import..." and there are various options there too. I kinda use all of them. Also F1 Implement for implementing an interface is helpful, but doesn't always work.
List of Plugins
npm Intellisense
ngrx for Angular 2 Snippets
TypeScript Toolbox
npm
TsTools
Angular Snippets (Version 9)
Types auto installer
Debugger for Chrome
TypeScript Importer
TypeScript Hero
vscode-icons
Add Angular Files

How to get Dynamic Imports working on Rollup.js

I am trying to rollup a icon library using vue
I have a folder full of .svg
I run a command to scan the folders with all the .svgs and convert them to
export default `svg`;
and change the file to iconName.js
In the .vue document i require the correct file using :
Promise.resolve(
import(`./icons/${this.iconSet}/${this.icn}`)
.then(v => {
console.log('required', v)
this.svg = v.default
})
.catch(e => {
console.log('err', e)
this.error = true
})
)
In development, the .vue icon component works.
In production as an npm package i get:
TypeError [ERR_INVALID_ARG_VALUE]: The argument 'path' must be a string or Uint8Array without null bytes. Received 'B:\\icons\\node_modules\\\u0000commonjs-dynamic-register:\\icons\\brands\\500px.js\\package.json'
-> 500px.js is the first file in the icon pack and not the one being required by the vue component.
-> No clue why package.json is being appended (the files are contained within the dist folder - hoping relative paths would work but no luck
The above statement seems to be rendered from rollup via:
require("\u0000commonjs-dynamic-register:B:/icons/dist/icons/brands/500px.js")
B:/icons/dist -> the computer's path to the repo -> i believe i have to shorten it to:
require("\u0000commonjs-dynamic-register:/icons/brands/500px.js")
Which gives me the same error
I'm lost and have spent days looking into this
thanks
https://github.com/mjmnagy/rollup-error-Sept-01-2020

This is the issue:
**import(`./icons/${this.iconSet}/${this.icn}`)**
Rollup doesnt handle "dynamic"/lazy loading like this as it doesnt know what or what not to include(no tree-shaking)
If you change the import to include the relevant documents ie:
import * as icons from './icons'
There isnt an issue with rollup However there is now an issue that you have included every .svg which is a lot to load.
if you refer to font-awesome their package actually forces u to specifically name icon packages or specific icons.
My solution as i want them all to be available on demand, was to kill this and move into .svg sprites
HTH

Angular: Moving a service/component to another folder (in the folder structure, not in code)

SHORT: Renaming a service or component is no problem, but can you also move it to another folder?
LONG: This is the service I generated at the wrong directory with the ng new service data command:
When I move it from the src folder into the _service folder I'm getting asked, if I want to update the imports. Of course I press yes, but when starting the app I get this error:
Module build failed (from ./node_modules/#ngtools/webpack/src/index.js):
Error: ENOENT: no such file or directory ...\data.service.ts
So I checked the index.js file, if I could update the path to data.service.ts manually, but that's not possible as this is all that is in the index.js file:
"use strict";
function __export(m) {
for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
}
Object.defineProperty(exports, "__esModule", { value: true });
__export(require("./angular_compiler_plugin"));
__export(require("./interfaces"));
var loader_1 = require("./loader");
exports.default = loader_1.ngcLoader;
exports.NgToolsLoader = __filename;

TL;DR: Auto updating imports doesn't seem to work for nested Angular component folders and the error is useless. Check that those imports were updated correctly (anything in the _components folder in the poster's example).
I just ran into this same issue. I'm using the "Move TS" VSCode Extension, and it doesn't appear to update imports in components that are grouped by folders. For example, consider the following folder structure:
> Component 1
> Component 2
> Forms
      > Name Component
      > Email Component
> Services
api.service.ts
When I moved api.service.ts from its current location into the Services folder, the extension updated the imports in Component 1 and Component 2 correctly. However, it failed to update the imports in the Name Component and the Email Component correctly. I would guess the native VS Code "Update Imports" option has the same defect. So I would check your _components folder to ensure the imports were updated correctly.

We can move the services and components to desired folder. In Visual Studio Code after moving the component or service you would have to manually remove the initial imports and add than do Auto import from Source Action then it would update the dependencies correctly
Visual Studio Code does not seems to auto update the imports in this case.

The only way I think is to move the files in to desired location using any code editor(used vscode) and manually update the imports. VS code also takes care of GIT. If we do it from the folder structure I think we need to delete and add the file.

In VS code, you can simply rename the component to include the folder you want to use as a container and everything will be updated automatically.
Let's say you have some like:
And you want to move the component named 'single-value-card' to the 'visualization' folder.
Then all you have to do is to rename the component folder as shown:
And voilá:
Note: After renaming, VS Code will ask you if you want to apply the reference refactor. As I've answered 'Always apply the reference update' (or smth like that) it never asked me again

React-Native can't resolve module for fonts

I'm starting a very basic build.
I'm using `create-react-native-app' and yarn for pm.
From there all I have tried to accomplish is to load in 'native-base' for some UI elements.
From the app.js file the only thing I've added is a Button Component from native-base.
<Button> <Text></Text> </Button>
And have included native-base.
After receiving some errors that it couldn't resolve module '#expo/vector-icons' I went and installed #expo/vector-icons, and for the hell of it ran react-native link.
Now it can find #expo/vector-icons but it can't find the fonts starting with Ionicons.ttf.
SO. From there I downloaded all the fonts to a assets/fonts/ directory and then included this in my app.js file based off some documentation I found on the expo site.
import { Font } from 'exponent';
///
export default class App extends React.Component {
componentDidMount() {
Font.loadAsync({
'ionicons': require('./assets/fonts/Ionicons.ttf'),
});
}
///

They way I load custom fonts is by adding them in the Info.plist file as a list of Font provided by the application:
And they also need to be in the provided resources of the Build Phases:
After that, you can use it in the fontFamily property in CSS in react native. Make sure you also clean and build the project again after adding the fonts so they are copied to the device.

PhpStorm: Unresolved variables, methods & functions for NodeJS modules

I just started a new NodeJS application in PhpStorm which uses some external packages. Unfortunately I see a lot of Unresolved variable or Unresolved function or method warnings:
Obviously this is very distracting. Can I somehow manually tell the IDE to load some definition files of the external packages I use (e.g. mongoose in this example)?
If I find no other solution I'd simply disable those inspections which is kind of a bad "fallback" since they usually provide some good hints for typos etc.
Solution:
I had 2 different node_modules directories in my project:
project\client\node_modules\...
project\server\node_modules\...
Both were marked as excluded. I simply removed the excluded mark (right-click on the folder in the project tree). PhpStorm shows correct auto completion now and the Unresolved warnings are gone.

If you have jetbrains suite, It's better to use webstorm for nodejs application.
However, if you want to keep phpstorm. You can use a jshint module for global variables declaration, and use jsdoc for variable instance :
/**
* Description
* #type {Schema}
* #property {object} methods
*/
var Schema;
-- EDIT --
Have you set up your phpstorm as the jetbrains doc ?
Work on nodejs with phpstorm