If i search the same question on the internet, then i'll get only links to vscode website ans some blogs which implements it.
I want to know that is jsconfig.json
is specific to vscode
or javascript/webpack
?
What will happen if we deploy the application on AWS / Heroku, etc. Do we have to make change?
It's a configuration file to assist your editor's Language Server (LSP)
with the javascript usage in your project folder.
While it appears this has originated from VsCode, any editor using LSP will make use of jsconfig.json
including VsCode, SublimeText and so on.
It's most commonly used to include/exclude folders in your intellisense (which nowadays most editors use LSP), and map aliases in your source code to certain folders.
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"$libs": ["src/libs"],
"$libs/*": ["src/libs/*"],
}
},
"include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.svelte"],
"exclude": ["node_modules", "**/node_modules", "dist"]
}
This file basically tells the language server to:
use .
location as the project root (which is where jsconfig.json) is.
means $libs
in your source code points to /src/libs
. This is useful if your editor relies on LSP to locate the files, when you initiate go to file
it will go to the right place.
means to include all folders and files ending with those extensions in providing you with file search, code completetion.
means to exclude everything inside node_modules
and dist
folder. For instance, you don't want the compiled bundle to appear in search results when you are searching for symbols or variables.
In other words, you can consider jsconfig.json
a bit like .gitignore
but for your editor's language server use only.
But keep in mind, if you are going to be using jsconfig.json to map aliases, you would need to do additional configuration to your module bundler, and update your eslint
config, that is if you use eslint.
For instance, on a NodeJS-CommonJS environment, you would need to tell your nodejs what $libs
is. There are many ways to do so, but these days people mostly use module-alias
.
This is definitely specific to VSCode.
The presence of jsconfig.json file in a directory indicates that the directory is the root of a JavaScript Project. The jsconfig.json file specifies the root files and the options for the features provided by the JavaScript language service.
Check more details here: https://code.visualstudio.com/docs/languages/jsconfig
You don't need this file when deploy it on AWS/Heroku, basically, you can exclude this from your commit if you are using git repo, i.e., add jsconfig.json
in your .gitignore
, this will make your project IDE independent.
As other answers have noted, this protocol originated from VSCode - but has been adopted by many frameworks to work at compile-time:
Front-end frameworks that support jsconfig.json
/tsconfig.json
:
Back-end NodeJS support for jsconfig.json
/tsconfig.json
:
module-alias
(see https://www.npmjs.com/package/module-alias)