Join us and get access to hundreds of tutorials and a community of expert Pythonistas.

Unlock This Lesson

This lesson is for members only. Join us and get access to hundreds of tutorials and a community of expert Pythonistas.

Unlock This Lesson

Hint: You can adjust the default video playback speed in your account settings.
Hint: You can set the default subtitles language in your account settings.
Sorry! Looks like there’s an issue with video playback 🙁 This might be due to a temporary outage or because of a configuration issue with your browser. Please see our video player troubleshooting guide to resolve the issue.

Settings and Workspaces in VS Code

Give Feedback

Take a quick look at how to configure VS Code and how to work with workspaces. You’ll learn:

  • How to change editor and workspace settings
  • What workspaces are and how to create them
  • The difference between user settings and workspace settings
  • How to create workspace specific settings

00:00 VS Code can be configured in what seems like a million different ways. To change a setting, choose the Manage icon, and then select Settings. This will open a new tab and you’ll see a list of commonly used settings that we can change. On the left, you’ll see that we can change editor settings, workbench settings, and at the very bottom, extensions.

00:24 This is where you can change extension-specific settings. Let’s go back to the top where it says Commonly Used. And as I scroll down, we’ll eventually see a setting that can’t be changed in this interface, like right here—Files: Associations.

00:42 This is something that has to be changed in settings.json, so if I click on this, you’ll see we have access to this file. This directly links to the interface we saw before, so we can change things like font size, cursor width, and much more.

00:58 I’ve got lots of settings here to help make the tutorials easier to read on small screens. Let’s add a new setting.

01:06 I’ll add a new line and I’ll type "editor.cursorSmoothCaretAnimation", with the help of IntelliSense. Now let’s change this to true.

01:17 If I save the file with Command + S and I move my cursor around, you’ll see that it now glides around the screen, just like it does in Microsoft Word on Windows.

01:27 Some people aren’t crazy about this animation, but I like it. Let’s move back to the Settings tab, and you’ll notice at the top we have User Settings and Workspace Settings.

01:39 Everything we’ve been changing so far have been user settings, which are global settings used by this installation of VS Code for this user account on the computer. I’m using a separate account called rp-demo, which I use for these videos, and so I just make all of my video-specific changes in these user settings.

02:00 In my main computer account, my User Settings looks very different since I don’t need to configure my editor for screen recordings.

02:09 We also have Workspace Settings at the top. Workspace settings apply to the specific workspace you’re using and they automatically override the more global user settings.

02:21 A workspace allows us to work with multiple folders in VS Code. To demonstrate this, I’ll first close this Demo/ folder by choosing File > Close Folder,

02:34 and now we’re back to our starting look. So now I’ll minimize VS Code. Let’s pretend I’m writing a Python program along with some documentation for it. I might have the folder for the program files in one place on my computer, and another folder with all the documentation in another place.

02:54 I’m going to open a new Finder window, and I’ll switch to the Downloads folder here on the left. And now we’ll create a new folder called My Cool Program, for lack of a better name.

03:07 Now I’ll move to the Documents folder and create another folder called Documentation. Of course, this isn’t where you’d normally keep project files, but I’m just using these locations for demonstration purposes.

03:20 What I want to do is have some easy way to quickly open both of these folders in VS Code, and I want certain workspace-specific settings to override whatever the user settings are.

03:33 So I’ll move back into VS Code, and I’ll choose File > Save Workspace As…. This is going to create a special .code-workspace file that will contain information about where all of my folders are, as well as the workspace-specific settings I have saved. Some people like to store these config files in one place on disk, and others prefer to keep this close to the project in case they want to commit it to source control. I’ll name this workspace My Workspace and I will save it to my desktop. When I press Save, you’ll see that nothing has happened, but the title bar now says My Workspace. Let’s add those folders we created earlier to this new workspace. I’ll choose File > Add Folder to Workspace…, and first I will add my program folder in the Downloads folder.

04:32 And now I’ll do that one more time, but for the Documentation folder.

04:40 Now you’ll see that on the left, we have the workspace name as well as each folder in the workspace presented as a dropdown. Any files that we create within these folders will show up under these dropdowns. Let’s go back to our Settings here, and this time I want to change a workspace-specific setting.

05:02 I’ll bump up the font size a bit here, just like this, and now I’ll save this with Command + S. Now let’s create a new file with File > New File, just like before, and I’ll press Command + S to save this file.

05:19 I’ll call this program.py and save it in the My Cool Program folder.

05:25 You’ll notice that it shows up on the left in the Explorer.

05:30 When I start typing, you’ll see that the font size is now a lot smaller. That’s because my user setting was originally 23-point font, but this specific workspace setting we created was smaller than that, and so now any files in this workspace will use the workspace settings instead of the user settings. To see what a workspace configuration actually looks like, we can hit Command + O, or Control + O, to open a file and then choose the My Workspace file that we saved to the desktop.

06:05 You’ll notice that this is just a JSON file with a path to all of the folders we’ve added to this workspace, as well as the settings that we’ve overridden.

06:15 If I change the font setting to 30 and save this, you’ll see our font immediately grows and our workspace settings have reflected the new change.

06:25 That’s a quick look at how to configure VS Code and how to work with workspaces. In the next video, we’ll learn how to run unit tests within VS Code.

csharma19 on Aug. 2, 2019

Hi Austin - thanks for creating this video. Newbie here and experiment. I noticed that there is a .vsCode folder under my workspace, and a settings.json file there. To differentiate from the “global json file (this other json file points to the C Drive) I renamed it to “GeneralSettings.json”. When I changed the editor font size in this file, I don’t see any impacts on the editor. However, I do see it changes in font size when I edit in the the “global settings” json file. Any suggestions on what I’m doing wrong? Thanks ,Chet

csharma19 on Aug. 2, 2019

Hmm…I think I found the answer. The settings file was under .vsCode. Turns out I can’t change the name of this file (I changed the name to GeneralSettings.json)…and that’s what messed it up. When I changed the name back to the general “settings.json” and changed the font, it worked fine. I guess we have to keep the same name for all the settings.json files and just be careful to check the paths to see if it’s a global or folder specific path. If you have any other comments about naming conventions for this file (to differentiate b/w global and folder or workspace specific) do let me know. Thanks!

Jon Fincher RP Team on Aug. 2, 2019

Hi csharma19:

The way to differentiate between the global (or user) and local settings.json files is their location.

The global settings file, called the user settings file, will live in a central location based on your user profile – on my Ubuntu system, that’s ~/.config/Code/User/settings.json. On your Windows system, it should be under %APPDATA%\Code\User\settings.json.

In contrast, the workspace settings file is always relative to the workspace folder. As you found, it is the folder ./.vscode/settings.json.

And as you also discovered, you cannot change the name.

You can always learn more in the VS Code documentation – this information can be found at https://code.visualstudio.com/docs/getstarted/settings.

–Jon

csharma19 on Aug. 2, 2019

Noted Jon - thanks!

ThangHoang on Aug. 22, 2019

Please help me set path python interpreter in VS Code

viraj7k on April 13, 2020

when ever i import cv2 in vs code it shows an error pls do needful

gracetan on Jan. 6, 2021

Hi Austin, I am thinking can you help me to fix the json setting error? I have not used it for a while, when I opened it last night. It gave me error. I tried to fix it but I failed. Two red lines, one is under “javascript” in the 4 line. Another one is under “editor.renderControlCharacters”: in 59 line.

{   "python.pythonPath":"//Users/lichangtan/.local/share/virtualenvs/hello_world-76z2ozxf/bin/python3",
        "code-runner.executorMap":     
        "javascript": "node",
        "java": "cd $dir && javac $fileName && java $fileNameWithoutExt",
        "c": "cd $dir && gcc $fileName -o $fileNameWithoutExt && $dir$fileNameWithoutExt",
        "cpp": "cd $dir && g++ $fileName -o $fileNameWithoutExt && $dir$fileNameWithoutExt",
        "objective-c": "cd $dir && gcc -framework Cocoa $fileName -o $fileNameWithoutExt && $dir$fileNameWithoutExt",
        "php": "php",
        "python": "/Library/Frameworks/Python.framework/Versions/3.8/bin/python3",
        "perl": "perl",
        "perl6": "perl6",
        "ruby": "ruby",
        "go": "go run",
        "lua": "lua",
        "groovy": "groovy",
        "powershell": "powershell -ExecutionPolicy ByPass -File",
        "bat": "cmd /c",
        "shellscript": "bash",
        "fsharp": "fsi",
        "csharp": "scriptcs",
        "vbscript": "cscript //Nologo",
        "typescript": "ts-node",
        "coffeescript": "coffee",
        "scala": "scala",
        "swift": "swift",
        "julia": "julia",
        "crystal": "crystal",
        "ocaml": "ocaml",
        "r": "Rscript",
        "applescript": "osascript",
        "clojure": "lein exec",
        "haxe": "haxe --cwd $dirWithoutTrailingSlash --run $fileNameWithoutExt",
        "rust": "cd $dir && rustc $fileName && $dir$fileNameWithoutExt",
        "racket": "racket",
        "scheme": "csi -script",
        "ahk": "autohotkey",
        "autoit": "autoit3",
        "dart": "dart",
        "pascal": "cd $dir && fpc $fileName && $dir$fileNameWithoutExt",
        "d": "cd $dir && dmd $fileName && $dir$fileNameWithoutExt",
        "haskell": "runhaskell",
        "nim": "nim compile --verbosity:0 --hints:off --run",
        "lisp": "sbcl --script",
        "kit": "kitc --run",
        "v": "v run",
        "sass": "sass --style expanded",
        "scss": "scss --style expanded"
    }

    "editor.renderControlCharacters": true,
    "window.zoomLevel": 2,
    "editor.formatOnSave": true,
    "files.autoSave": "afterDelay",
    "workbench.colorTheme": "Solarized Light",
    "python.pythonPath": "/Library/Frameworks/Python.framework/Versions/3.8/bin/python3",
    "kite.showWelcomeNotificationOnStartup": false,
    "json.schemas": [],
    "files.associations": {},
    "terminal.integrated.shell.osx": "/bin/bash",
    "launch": {},
    "workbench.iconTheme": "vscode-icons",
    "workbench.editorAssociations": [
    {
        "viewType": "",
        "filenamePattern": ""
    }
]
}

Bartosz Zaczyński RP Team on Jan. 7, 2021

@gracetan Your JSON data is invalid due to syntax errors. You can copy-and-paste it into your favorite editor or an online JSON validator to quickly find out the details.

These are the problems:

  • Line 2: Missing value for the code-runner.executorMap key
  • Line 48: Missing comma (,) right before the editor.renderControlCharacters key
  • Line 48: Unbalanced bracket }

It looks like the file might have had something pasted in the wrong place.

Become a Member to join the conversation.