How do I update my config file in vs code?

Question

When I see example config files on VS Code they are often lengthy and offer two panels for updating (one for default settings and the other for customization). For some reason my config file is only a few lines and whenever I try to update it, nothing happens:

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [

        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:3000",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

For example I'm trying add a line of code to get rid of the error displayed for using .jsx in a .js file as found here and here but it doesn't work. This is just an example, I've tried other modifications as well. How do I add the below code my launch.json (and is there more than one launch.json?). As you can see, I'm super new to this so thanks for any help.

"rules": {
  "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
}

score 2 · Accepted Answer · edited Jun 10 '21 at 08:10

You can open:

default settings: Ctrl+Shift+P/Cmd+Shift+P -> Open Default Settings (JSON).
VS Code setting (applied to whole VS code instance): Ctrl+Shift+P / Cmd+Shift+P` -> Open Settings (JSON).
workspace settings (applied only to current "project"/folder): create in root directory '.vscode' folder -> 'settings.json' file.

All these you can find in UI instead of JSON.

In your example, you provided Launch configuration (it is not vs code settings), it is used to configure how to launch/debug your application.

And if you want to get rid of errors, you don't need to use VS Code settings. These rules:

"rules": { "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }], }

are configuration for eslint plugin (based on links you provided). So, you need to place these lines to .eslintrc file and eslint and appropriate plugins should be installed and properly configured.

Thanks for directing me to the right location! I thought for sure this would be down-voted and closed. For some reason, the suggestion still pops up when I hover over jsx in the default code, but now it no longer offers quick fixes. Anyway, thanks again! — Mountain Scott, Dec 24 '19 at 11:00

score 0 · Answer 2 · edited Jan 06 '20 at 11:39

The launch.json file is used for launching commands like building, running or debugging, you need to change some settings, not launching any thing. vsCode offers you couple of ways to declare your settings:

Workspace - will save a settings.json file on your root workspace dir.
User - will save a settings.json file on one of those pathes (according your os):
1. Windows %APPDATA%\Code\User\settings. json.
2. Mac $HOME/Library/Application Support/Code/User/settings. json.
3. Linux $HOME/. config/Code/User/settings. json.

On vsCode docs you can read all about it.

You can edit your settings by ctrl+shift+p to open the command palette and search settings, or File > Preferences > Settings (Code > Preferences > Settings on Mac).

How do I update my config file in vs code?

2 Answers2