VSCode JavaScript settings to fix importing issues

Frappe Framework Custom Script
1

Hello,

I am currently creating a new app using Frappe & ERPNext and i am using VSCode as my main editor. At first, i face some importing errors in all python files which i solved by choosing my interpreter. However, in JavaScript files, most of the imported modules and methods are generating errors about importing them. For example, in the automatically generated JS file of the custom module, VSCode can not recognize “frappe” and show me an error:

frappe.ui.form.on('Social Feed', {
	// refresh: function(frm) {

	// }
})

In the above code block, VSCode generates the following error:

Cannot find name 'frappe'.ts(2304)

Also, VSCode doesnt recognize jinja includes. such as this:

{% include 'erpnext/selling/sales_common.js' %}

The same thing happens in all JS files. So, can anyone tell me how can i get rid off such errors?

Here is also a Stackoverflow topic i created with more details: visual studio code - VSCode errors for Frappe framework and erpnext - JavaScript & Jinja - Stack Overflow

2

@revant_one
Sorry for tagging, but i hope you have any solution?

3

I don’t have a solution for you, but it sounds like you’ve got some typescript debugging features active. Try disabling those?

1 Like
4

We are planning to get rid of these soon. refactor: remove use of include directive from client side js · Issue #36407 · frappe/erpnext · GitHub

Like @peterg said you’ll have to disable type checks on Frappe code. We don’t use TS in framework (yet)

1 Like
5

@peterg @ankush
what about auto completion and suggestions?

6

Sorry, I don’t have much experience with VSCode. Was autocompletion working when you had TS type-checking on but then disappeared when you turned it off?

1 Like
7

It stopped working after i removed the jsconfig.json file.

However, i modified it and i am testing it for now, i am not sure if it is working as expected or not but right now i have the auto completion and suggestions working fine. So , i will share it here and mark it as resolved and if anyone have better solution or if i found out that it is not working as expected i will share it here as well. so, thank you for your help

create jsconfig.json in the apps directory with the following content:

{
	"compilerOptions": {
		"module": "commonjs",
		"target": "es6"
	},
	"exclude": [
		"node_modules",
		"**/node_modules/*"
	]
}
2 Likes