Installing VS Code and Useful Settings

01What Is VS Code and Why Use It?

Visual Studio Code is a free, open-source-based code editor developed by Microsoft. It is lightweight, works the same on Windows, macOS and Linux, and with thousands of extensions it adapts to almost any language, from HTML to Python.

A built-in terminal, Git integration, smart code completion and a debugger all come in one window. That is why it has become the default editor for web developers, students and business owners who make small edits to their own sites.

Despite the similar name, it is not the same product as Visual Studio. Visual Studio is a much heavier development environment aimed at large .NET projects; VS Code is an editor that opens fast and grows through extensions.

If you are on a computer where you cannot install software, you can make small edits with the browser-based vscode.dev version. However, the terminal and most extensions work fully only in the desktop version; the steps in this guide are for the desktop installation.

02Installing on Windows, macOS and Linux

The official download address is code.visualstudio.com; do not download installers from other sites. Choose the path that matches your operating system.

Windows

The User Installer installs only for your account without asking for admin rights and is the recommended option for most users. During setup, check Add to PATH and the “Open with Code” options for the Explorer context menu; you can then right-click a folder and open it directly in the editor.

winget install -e --id Microsoft.VisualStudioCode

macOS

Move the downloaded app to the Applications folder. To use the code command from the terminal, open the command palette in the editor with Cmd+Shift+P and run Shell Command: Install 'code' command in PATH.

brew install --cask visual-studio-code

Linux

On Debian and Ubuntu based systems you can install the .deb package from the site, and on systems such as Fedora the .rpm package. The .deb package adds the Microsoft repository to your system for updates. On distributions that use Snap, a single command is enough.

# With the downloaded .deb package (Ubuntu / Debian)
sudo apt install ./code_*.deb

# Snap ile
sudo snap install code --classic

03How to Change the VS Code Language

To switch the interface to another language, such as Turkish, you only need to install Microsoft's official language pack extension, for example the Turkish Language Pack. In the Extensions panel (Ctrl+Shift+X), type the language name and install it; confirm when the editor suggests restarting.

To change the language later, run the Configure Display Language command in the command palette and choose a language from the list. Since most examples online are written with English menu names, some developers deliberately stay on the English interface; this is entirely a personal choice.

code --install-extension MS-CEINTL.vscode-language-pack-tr

04Useful Extensions for a First Setup

There are many extensions, but few and well-chosen ones are better: every extension adds to startup time and memory use. For web development we suggest the following list to begin with; you can also install them from the command line using the extension IDs.

• Before installing an extension, check the publisher name and download count; watch out for fake extensions with similar names.
• Remove extensions you do not use, or enable them only in the relevant workspace.

code --install-extension esbenp.prettier-vscode
code --install-extension dbaeumer.vscode-eslint
code --install-extension EditorConfig.EditorConfig

# Kurulu eklentileri listele
code --list-extensions

05Recommended VS Code Settings

You can change settings from the interface (Ctrl+, ) or edit the settings.json file directly from the command palette with Preferences: Open User Settings (JSON). The settings below are a good starting point for most web projects.

The most effective setting is format on save: every time you save a file, Prettier tidies the code and indentation debates disappear.

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.tabSize": 2,
  "editor.wordWrap": "on",
  "files.autoSave": "onFocusChange",
  "files.trimTrailingWhitespace": true,
  "files.insertFinalNewline": true,
  "files.eol": "\n"
}

Project-level settings

If rules vary from project to project, put the settings in the .vscode/settings.json file in the project folder. When this file is added to the repository, everyone on the team works with the same formatting rules.

Organizing with profiles

If you use different extension sets for different jobs, the profiles feature makes it easier. For example, in a “Web” profile Prettier and ESLint are on, and in a “Python” profile only the Python extensions are on. Profiles are created from the Profiles menu under the gear icon at the bottom left and can be switched per folder. That way only the extensions you need are loaded in each project, and the editor opens faster.

WSL and remote connections

If you work with Linux tools on Windows, Microsoft's WSL extension connects VS Code directly to files in the Linux environment; the terminal, extensions and Git run on the Linux side. The Remote - SSH extension from the same family lets you edit files on a server as if they were on your local computer.

Syncing settings

If you use more than one computer, turn on Settings Sync from the account icon at the bottom left. Your settings, extensions and shortcuts sync automatically with your Microsoft or GitHub account.

06Git Integration and the Built-In Terminal

VS Code automatically detects the Git installed on your computer. In the source control panel on the left (Ctrl+Shift+G) you see changed files, review line-by-line differences, write a commit message and commit with one click. We covered pushing a repository to GitHub in detail in our uploading a project to GitHub guide.

The built-in terminal opens with the Ctrl+` shortcut and starts directly in the project folder. If you want to make Git Bash the default shell instead of PowerShell on Windows, use the Select Default Profile option from the dropdown in the terminal panel.

• If Git is not installed, the panel shows a warning; install Git first and restart the editor.
• In JavaScript projects, once Node.js setup is complete, you can run npm commands from this terminal.
• To start a new React project, our setting up React with Vite guide is a good next step.

07Time-Saving Shortcuts

Memorizing a few shortcuts noticeably reduces how often you reach for the mouse. On macOS, Cmd is used instead of Ctrl, and Option instead of Alt.

08Common Problems and Solutions

VS Code usually runs without trouble; most problems come from extensions or the PATH setting. If the editor has slowed down, you can see which extension is causing the load with Developer: Show Running Extensions from the command palette.

If the code command is not recognized in the terminal, rerun the installer on Windows with the Add to PATH option, and repeat the Shell Command step on macOS. If format on save does not work, the default formatter has usually not been selected; right-click in the file and make Prettier the default from the Format Document With menu.

In a web project, results matter as much as editor settings: clean, consistent code also makes speed and performance management and UI/UX design work easier to maintain. We work with the same discipline in Aurora Yazılım's web design projects.