SHIFT-WIKI

--- Sjoerd Hooft's InFormation Technology ---

User Tools

Site Tools


vscode

My Own VS Code

I use VS Code in my day to day life for a lot. It took me a while to get to know it but it made my (work) life a lot easier. Each time I get a new computer or workplace I follow these steps. And as automation should make everyone's life a lot easier, I made a settings and extension file so I don't have to do a lot of settings manually anymore.

Program Installation

Start with Git and then VS Code.

Git Installation

  • Go to https://git-scm.com/ and download and install the latest version
  • Set Visual Studio Code as Git's default editor
  • Choose the Native Windows Secure Channel Library as the HTTPS transport backend
  • Keep everything else default

Once the installation is done, start Git Bash from the start menu and enter the following commands to set your username and email address:

  git config --global user.email "you@example.com"
  git config --global user.name "Your Name"

Use Windows Certificate Store

If the git server changes certificates, you'll also need to update your Git's Certificate store. In a managed environment it might be better to use the Windows Certificate store:

  git config --global http.sslBackend schannel
Note that this is possible starting Git 2.14

Overview Git Settings

git config --global credential.usehttppath true
git config --global --list 
 
core.editor="C:\Users\sjoer\AppData\Local\Programs\Microsoft VS Code\bin\code" --wait 
user.email=sjoerd@xxx.xxx 
user.name=Sjoerd Hooft 
credential.usehttppath=true 
http.sslbackend=schannel

See here for more information on the usehttppath in combination with dev.azure.com.

Visual Studio Code Installation

  • Go to https://code.visualstudio.com/docs/setup/windows and download and install the latest version
  • You can keep everything default which performs a user installation. Installing the user setup does not require Administrator privileges as the location will be under your user Local AppData (LOCALAPPDATA) folder. User setup also provides a smoother background update experience.

User Settings

Use “ctrl-shift-p” “Preferences: Open User Settings (JSON)” to open your user settings and add the following preferences:

{
  "editor.renderWhitespace": "all",
  "workbench.colorCustomizations": {
    "tab.activeBorder": "#ff0000",
    "tab.unfocusedActiveBorder": "#000000"
  }
}

Repo Settings and Extensions

In your repo, create the following folder and files:

  • .vscode
    • settings.json
    • extensions.json
settings.json
// https://code.visualstudio.com/docs/getstarted/settings#_workspace-settings
{
    "editor.rulers": [
        {
            "color": "#c58414",
            "column": 100
        },
        {
            "color": "#ab0707",
            "column": 120
        }
    ],
    "editor.codeActionsOnSave": {
        "source.fixAll.markdownlint": "explicit"
    },
    "editor.defaultFormatter": null,
    "editor.formatOnSave": true,
    "editor.formatOnPaste": true,
    "editor.tabSize": 4,
    "editor.insertSpaces": true,
    "editor.renderWhitespace": "all",
    "editor.renderControlCharacters": true,
    "files.insertFinalNewline": true,
    "files.trimFinalNewlines": true,
    "files.trimTrailingWhitespace": true,
    "files.eol": "\n",
    "files.associations": {
        "*.md": "markdown",
        "**/*.yml": "azure-pipelines",
        "**/arm-*.json": "arm-template",
        "*.json": "json",
        "*.xml": "xml",
        "*.nuspec": "xml",
        "*.config": "xml",
        "*.sql": "sql",
        "*.tf": "terraform",
        "*.tfvars": "terraform",
        ".github/workflow/*.yml": "github-actions"
    },
    "[terraform]": {
        "editor.defaultFormatter": "hashicorp.terraform"
    },
    "[azure-pipelines]": {
        // no format, keep outlined comments and variables
        "editor.formatOnSave": false,
        "editor.formatOnPaste": false
        //"editor.defaultFormatter": "esbenp.prettier-vscode",
    },
    "[plaintext]": {
        "editor.unicodeHighlight.ambiguousCharacters": true,
        "editor.unicodeHighlight.invisibleCharacters": true,
        "editor.formatOnSave": false,
        "files.insertFinalNewline": false
    },
    "[markdown]": {
        "editor.defaultFormatter": "yzhang.markdown-all-in-one",
        "files.trimTrailingWhitespace": true,
        "files.insertFinalNewline": true
    },
    "[powershell]": {
        "editor.defaultFormatter": "ms-vscode.powershell",
        "editor.language.brackets": [
            [
                "{",
                "}"
            ],
            [
                "(",
                ")"
            ],
            [
                "#region",
                "#endregion"
            ]
        ]
    },
    "[csharp]": {
        "editor.defaultFormatter": "csharpier.csharpier-vscode"
    },
    "[bicep]": {
        "editor.defaultFormatter": "ms-azuretools.vscode-bicep",
        "editor.tabSize": 2
    },
    "[css]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode",
        "editor.suggest.insertMode": "replace"
    },
    "[html]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode",
        "editor.suggest.insertMode": "replace",
        "editor.formatOnType": true
    },
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[arm-template]": {
        "editor.defaultFormatter": "msazurermtools.azurerm-vscode-tools"
    },
    "[github-actions]": {
        "editor.defaultFormatter": "github.vscode-github-actions"
    }
    "files.autoSave": "off",
    "git.autofetch": true,
    "markdown.extension.tableFormatter.normalizeIndentation": true,
    "markdown.extension.orderedList.autoRenumber": false,
    "powershell.codeFormatting.autoCorrectAliases": true,
    "powershell.codeFormatting.useCorrectCasing": true,
    "powershell.codeFormatting.alignPropertyValuePairs": true,
    "powershell.codeFormatting.addWhitespaceAroundPipe": true,
    "powershell.codeFormatting.avoidSemicolonsAsLineTerminators": false,
    "powershell.codeFormatting.ignoreOneLineBlock": true,
    "powershell.codeFormatting.openBraceOnSameLine": true,
    "powershell.codeFormatting.trimWhitespaceAroundPipe": true,
    "powershell.codeFormatting.whitespaceAfterSeparator": true,
    "powershell.codeFormatting.whitespaceAroundOperator": true,
    "powershell.codeFormatting.whitespaceBeforeOpenBrace": true,
    "powershell.codeFormatting.newLineAfterOpenBrace": true,
    "powershell.codeFormatting.whitespaceBeforeOpenParen": true,
    "powershell.codeFormatting.newLineAfterCloseBrace": true,
    "powershell.codeFormatting.whitespaceInsideBrace": true,
    "powershell.codeFormatting.whitespaceBetweenParameters": false,
    "powershell.codeFormatting.useConstantStrings": false,
    "powershell.codeFormatting.pipelineIndentationStyle": "IncreaseIndentationForFirstPipeline", // https://learn.microsoft.com/en-us/powershell/utility-modules/psscriptanalyzer/rules/useconsistentindentation
    "powershell.codeFormatting.preset": "OTBS", //https://poshcode.gitbook.io/powershell-practice-and-style/style-guide/code-layout-and-formatting#one-true-brace-style
    "powershell.integratedConsole.showOnStartup": true,
    "powershell.integratedConsole.suppressStartupBanner": true,
    "powershell.powerShellDefaultVersion": "PowerShell (x64)",
    "powershell.promptToUpdatePowerShell": true,
    "prettier.disableLanguages": [
        "yml",
        "yaml",
    ],
    "window.title": "${folderName}" //https://code.visualstudio.com/updates/v1_10#_configurable-window-title
}
extensions.json
{
    "recommendations": [
        // AWS
        "amazonwebservices.aws-toolkit-vscode", // AWS Toolkit, SAM, Lambda, Step functions, S3
        // Azure
        "msazurermtools.azurerm-vscode-tools", // Azure ARM
        "ms-azuretools.vscode-bicep", // Azure BICEP
        "ms-azure-devops.azure-pipelines", // Azure pipelines
        "ms-vscode.azurecli", // Azure CLI
        // Docker
        "ms-azuretools.vscode-docker", // Docker
        // Formatting
        "esbenp.prettier-vscode", // Default formatting - note that prettier can try to be very persuasive. Use save without formatting when required.
        // Git
        "niclasvaneyk.am-i-behind", // Checks for commits in remote repo
        "mhutchie.git-graph", // Git graph
        "eamodio.gitlens", // Git Lens
        // Live Share
        "ms-vsliveshare.vsliveshare", // Live share VS Code for pair programming
        // Markdown
        "yzhang.markdown-all-in-one",
        "davidanson.vscode-markdownlint", // markdown linter
        "ni.azdo-wiki-md", // enables support for Azure DevOps table of content [[_TOC_]]
        "bierner.markdown-mermaid", // enables support for mermaid diagrams
        // Misc
        "gruntfuggly.todo-tree", // Add TODO in code
        "alefragnani.bookmarks", // Create bookmarks in code for easy navigation
        "lukapetrovic.image-resizer", // Image resizer, right click: width[x]height 50x50 256x100 autox400 400xauto
        "hediet.vscode-drawio", // draw.io integration
        "brunnerh.insert-unicode", // Insert Unicode
        "chrisdias.vscode-opennewinstance", // Adds reopen / new workbench to folder menu
        "github.copilot", // Github CoPilot
        "oderwat.indent-rainbow", // Indent rainbow coloring
        "sonarsource.sonarlint-vscode", // Sonar linter
        "postman.postman-for-vscode", // Postman API tester
        // Powershell
        "ms-vscode.powershell", // Powershell
        // Python
        "ms-python.python", // Python
        "ms-python.black-formatter", // Python formatter
        // Terraform
        "hashicorp.terraform", // Terraform
        // xml
        "dotjoshjohnson.xml", // xml
        // sql
        "ms-mssql.mssql", //sql
        // linux
        // "timonwong.shellcheck", // shell scripts
        // csharp
        "ms-dotnettools.csdevkit", // csharp development kit
        "csharpier.csharpier-vscode", // formatter
        // csv
        "mechatroner.rainbow-csv",
        // pdf
        "tomoki1207.pdf",
        // GitHub Actions
        "github.vscode-github-actions"
    ]
}

Optionally, you can add .prettierignore to the root of your project to limit prettier:

.prettierignore
# https://prettier.io/docs/en/ignore.html
# Ignore all Yaml files:
**/*.yaml
**/*.yml

Working with Files

You need a root folder to store the locally synced repository. I have some experience with both that folder on an onedrive location as well as out of it. Both work, but without oneDrive makes it less complex. So on your local drive create a folder like “AllRepos” and then later on, place the projects below this root folder. And then don't forget to sync before you start working and commit and sync when you're done working.

Connect to TFS Server

From with the TFS Server Console, follow these steps:

  • Go to your project
  • Click on Code
  • Click on Clone
  • Create a subdirectory below your root directory created in the previous step
  • In Visual Studio Code select File → Add folder to workspace → Select the new created directory
  • Right click the folder as it shows in the explorer section and select Open in Terminal
  • Issue the command git clone https://tfs.getshifting.local/tfs/GetShifting/DevOps/_git/DevOps-Maintenance

Error: fatal: Authentication failed for

If you get the error fatal: Authentication failed for <name repo> you have either no authentication for the TFS server in your Credential Manager or the wrong one.

  • Go to Control Panel
  • Credential Manager
  • Manage Windows Credentials
  • Add a Windows credential
    • Enter the server name without protocol: servername.domain.ext
    • Enter your username with domain: domain\username
    • Enter your password
  • Click OK

Edit a File And Commit

After you changed a file follow these steps to have it committed back to the repository:

  • Go to Source Control, click the check icon.
  • A message shows that a changed file is unsaved yet, Click “Save All & Commit”
  • Provide a commit message (Use ***NO_CI*** to not trigger Continuous Integration)
  • Click the three dots for more action, select sync. A message shows that this action will push and pull commits to and from origin/master.
  • Click OK
To stay up to date with remote repository, enable git.autofetch, which will be asked after your first commit → sync.

Changed Passwords

If, due to for example password policies, your password for TFS changes you might have to change your password on two places. The error you'll get is something like “Git fatal authentication failed for (url or team project)”

  1. The documentation states you should do a “team signout” and a “team signin”
  2. Change the password in the Windows Credential Manager as well: Control Panel –> Credential Manager –> Manage Windows Credentials –> Choose the entry of the git repository, and Edit the user and password.

Connect to Azure DevOps

Fron the Azure DevOps website, follow these steps:

  • Go to your project
  • Click on Repos
  • Click on Clone
  • Select and then click “Clone in VS Code”
  • A message shows that an extension want to open a url, Click Open. This opens Visual Studio Code. Continue with these steps in Visual Studio Code:
  • Select the folder you created above as your Repository Location as under this folder a directory will be created named after the project in Azure DevOps
  • Log into your Azure DevOps
  • A question shows, open the repository when asked
  • A message shows that you're not signed in, and to click on Teams below.
  • To login use either:
    • a personal access code (from Azure DevOps → User profile → Security → New Token)
    • the new experience which enables your device through your browser

Resources

vscode.txt · Last modified: 2024/11/23 13:32 by sjoerd