Locked learning resources

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

Unlock This Lesson

Locked learning resources

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

Unlock This Lesson

Settings and Workspaces in VS Code

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.

Avatar image for csharma19

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

Avatar image for csharma19

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!

Avatar image for Jon Fincher

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

Avatar image for csharma19

csharma19 on Aug. 2, 2019

Noted Jon - thanks!

Avatar image for ThangHoang

ThangHoang on Aug. 22, 2019

Please help me set path python interpreter in VS Code

Avatar image for viraj7k

viraj7k on April 13, 2020

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

Avatar image for gracetan

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": ""
    }
]
}
Avatar image for Bartosz Zaczyński

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.

Avatar image for Tim W

Tim W on March 29, 2022

Any chance this will be updated to include some of the newer VSCode settings and functions?

I know VSCode is constantly evolving and keeping current will be near impossible but from what I can tell the video is at least two years old and many of the settings have been updated. For example Files:Associations can be editing in settings now without JSON.

Avatar image for Martin Breuss

Martin Breuss RP Team on March 30, 2022

Hi @Tim W is there any of the newer settings and functions that you’re missing specifically?

The course is meant as a basic setup guide, and like you mentioned, there’s a lot of development happening on VS Code constantly so it’s hard to keep up…

We do have an advanced guide to Visual Studio Code for Python developers that covers a lot of additional features. That tutorial might be interesting for you!

Avatar image for Tim W

Tim W on March 31, 2022

Thanks for the reply, @Martin Breuss. I just took a quick look at the link you provided and that looks like what I was looking for. I am bookmarking for later.

Thank you.

Avatar image for lamachinegeo

lamachinegeo on Oct. 10, 2023

Gotta go with Tim W. This is an awesome course, but there are a lot of changes. I could not get to settings.json as described, but you can search for any setting at the top of the list and edit by dropdown.

Great course, will move onto the advanced when I finish this. Thank!

Become a Member to join the conversation.