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

No Routes element found in React Router Dom

This is odd. Following along with the tutorial, I'm attempting to create a group of routes. However, the actual Routes element cannot be found:
The BrowserRouter and individual Route elements seem to be working fine, however.
I'm using the latest version of React Router Dom (6.2.1). Any ideas?

It might happen because of conflicting typings the IDE auto-downloads to its configuration folder for better code completion. You can remove the auto-downloaded typings from <IDE system dir>\javascript\typings (shut down the IDE first) and either disable typescript.external.type.definitions Registry key or remove react-router-dom from typescript.external.type.definitions.packages key value
The Registry can be located via: Help > Find action > type Registry...

Appears to be a PhpStorm issue. Viewing the project in VS Code gives no errors on the element, and shows its signature and location:
Whereas the problem persists in PhpStorm even after a restart.

VS Code not suggesting JSX attributes

While developing a ReactJs project, VS Code used to suggest attributes for JSX elements. For instance,
<input type="text"></input>
In this scenario if I wanted to add an placeholder I had to just type in the first few letters and the auto-complete popped up suggesting the events.
However it has stopped working all of a sudden and results in this while I try Ctrl+Space in a JS file.
What I have tried so far:
Uninstalled VS Code and removed the user-specific settings from AppData and removed the .vscode folder from User and then reinstalled.
Added
"emmet.includeLanguages": {
"javascript": "javascriptreact"
}
in the settings.json based on this

change the file extension instead of .js || .ts add an x .jsx || .tsx
helps alot if you add a jsconfig.json and install #types/react https://code.visualstudio.com/docs/languages/jsconfig

I had the same problem and this is what solved the problem for me. Just import react from react:
import React from 'react';
Despite this line nowadays isn't required, this makes Vscode recognize somehow and suggest jsx again.

Make sure to check that the "select language mode" tab on the bottom right of the window shows "Javascript React" and make sure that you've installed and enabled the ES7 React/Redux/GraphQL/React-Native extention.

Electron-Bootstrap-Vue doesn't want to show my toast, and throw me errors I don't understand

So I wanted to develop a desktop application using Electron. As I wanted to practice Bootstrap-Vue too, I chose the Electron-Vue boilerplate which seems really simple to use and cool. To create a new project with Electron-Vue, I ran vue init simulatedgreg/electron-vue my-project
Electron-Vue doesn't come with booostrap-vue, it only comes with vue. Using npm, I was able to put it into my project with npm install bootstrap bootstrap-vue portal-vue (Yes, I also installed portal because I wanted to use the toast system).
And after that, I modified the main.js to include bootstrap and bootstrap-vue :
/*personnal addings*/
import BootstrapVue from 'bootstrap-vue'
import PortalVue from 'portal-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
Vue.use(BootstrapVue)
Vue.use(PortalVue)
And yay ! Everything seemed to works !
But that was before I ran into a major problem :
/home/kisis/ENSEIRB-MATMECA/ENSEIRB/troisième-semestre/sgbd/my-project/node_modules/vue/dist/vue.runtime.common.dev.js:621 [Vue warn]: $attrs is readonly.
found in
---> <Portal>
<BToastPop>
<Sgbd2> at src/renderer/App.vue
<Root>
and :
/home/kisis/ENSEIRB-MATMECA/ENSEIRB/troisième-semestre/sgbd/my-project/node_modules/vue/dist/vue.runtime.common.dev.js:621 [Vue warn]: $listeners is readonly.
found in
---> <Portal>
<BToastPop>
<Sgbd2> at src/renderer/App.vue
<Root>
Noooo ! Everything ran so smoothly before that :'(
Thus, this error pop whenever I want to use the toast-on-demand system of bootstrap (which is used with $bvToast.toast ). And on top of that, my toast doesn't even show. I think that the error prevents it from even existing.
But I had Google at least, I thought. So I searched and I searched, seeing that I was not the only one with this error. Alas, the majority of those problems were solved by modifying the webpack configuration to add
resolve: {
alias: {
// If using the runtime only build
vue$: 'vue/dist/vue.runtime.common.js'
// Or if using full build of Vue (runtime + compiler)
// vue$: 'vue/dist/vue.esm.js'
}
}
Sadly, this doesn't work at all with me. I tried everything, even ran npm run pack to "refresh" the webpack configuration after the modification, but this doesn't change anything. I don't know what to do, really. I would be glad if someone could help me on this one, because I don't understand at all what is happening.
Thanks in advance !

How to disable JavaScript build error in Visual Studio 2017?

I just updated Visual Studio 2017 from RC to final. I didn’t get the following error but recently I get this error. In building the project, I get the following error and it prevents the web project to start:
Severity Code Description Project File Line Suppression State
Error eqeqeq (ESLint) Expected '===' and instead saw '=='. VistaBest.Shop.Web C:\***\Request.js 21
How can I disable JavaScript building error in Visual Studio 2017?

I think, find the solution:
Open Tools > Options
Navigate to Text Editor > JavaScript/TypeScript > EsLint (in VS2017 15.8 it is Linting not EsLint)
Set Enable ESLint to False
Visual Studio >= 15.8.5

In Visual Studio 2017 (v 15.8.0):
Option 1: Options > JS Errors
Open Tools > Options
Navigate to Text Editor > JavaScript/TypeScript > Code Validation
Set Enable JavaScript errors to false
or, set Enable JavaScript errors to true and Show errors as warnings to true
I needed to restart Visual Studio for this to take effect.
Option 2: Options > Linting
There is another option below which will let you edit your global linting settings:
Option 3: .eslint file
You can also create a file named .eslintrc in the root of your project.
Option 4: ESLint commands in-file
See #user9153924's answer
Resources
ESLint file syntax
ESLint Rules

I tried Mohammad`s solution but it didn't work. I managed to work doing the following:
Righ click on your web .csproj file
On the first <PropertyGroup> add the following entry:
<TypeScriptCompileBlocked>true</TypeScriptCompileBlocked>

Add /*eslint eqeqeq: ["error", "smart"]*/ to the first line of your Javascript code to remove the errors.
https://eslint.org/docs/rules/eqeqeq
Following Mohammad's solution will turn off ESLint for syntax checking. This works in VS2015 and should work in later versions.

For Visual Studio 2019.
Open Tools > Options
Navigate to Text Editor > JavaScript/TypeScript
=> Linting > General.
Then unchecked ESLint check box.
Please The bellow Image for reference.

I've just had to change the "eqeqeq" rule behaviour to include "smart":
Edit the .eslintrc file found in your user root folder mentioned in other answers already.
The change is made to the rules section by adding the smart rule
"rules": {
"eqeqeq": [2, "smart"],
Copied from the web article:
This option enforces the use of === and !== except for these cases:
Comparing two literal values
Evaluating the value of typeof
Comparing against null
I found the specifics at:
https://eslint.org/docs/2.0.0/rules/eqeqeq

I tried Mohammad's solution but with no luck, I followed Rafeel answer and instead of adding his suggested code sample I removed below code from web .csproj and finally I was able to build and run my project. There were two places where you should remove that in the same file. Still, I don't have any clue how the removed code will affect my solution.
<Import Project="$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\TypeScript\Microsoft.TypeScript.Default.props" Condition="Exists('$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\TypeScript\Microsoft.TypeScript.Default.props')" />
Hope this will also help someone to save the day..!!!