Company logo
  • Jobs
  • Bootcamp
  • About Us
  • For professionals
    • Home
    • Jobs
    • Courses
    • Questions
    • Teachers
    • Bootcamp
  • For business
    • Home
    • Our process
    • Plans
    • Assessments
    • Payroll
    • Blog
    • Calculator

0

68
Views
What is jsconfig.json

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?

10 months ago · Santiago Trujillo
3 answers
Answer question

0

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:

baseUrl

use . location as the project root (which is where jsconfig.json) is.

paths

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.

include

means to include all folders and files ending with those extensions in providing you with file search, code completetion.

exclude

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.

Remarks

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.

https://www.npmjs.com/package/module-alias

10 months ago · Santiago Trujillo Report

0

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.

10 months ago · Santiago Trujillo Report

0

As other answers have noted, this protocol originated from VSCode - but has been adopted by many frameworks to work at compile-time:

Front-end

Front-end frameworks that support jsconfig.json/tsconfig.json:

  • Create React App (see https://create-react-app.dev/docs/importing-a-component/)
  • NextJS (see Using baseUrl in jsconfig.json not working with NextJS)

Back-end

Back-end NodeJS support for jsconfig.json/tsconfig.json:

  • module-alias (see https://www.npmjs.com/package/module-alias)
10 months ago · Santiago Trujillo Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post job Plans Our process Sales
Legal
Terms and conditions Privacy policy
© 2023 PeakU Inc. All Rights Reserved.