Improving Your Development Environment on VS Code

You can enhance your productivity by improving your development environment, with these few steps you will save time to focus only in the code part!

Starting with extensions

Prettier: Automatically format your code

Prettier is a code formatter that ensures your code looks consistent across your project. It supports a variety of languages and integrates with most editors. Your code is formatted on save, no need to discuss style in code review, it saves you time and energy.

Live Server: See changes instantly in your browser

Live Server is a development tool that provides a local development server with live reload functionality. It is widely used for web development as it allows developers to see changes in their code in real time, without the need to manually refresh the browser.

ESLint: Keep your code clean and error-free

ESLint is a powerful and highly configurable linting tool for JavaScript and TypeScript. It helps developers maintain code quality by identifying and fixing problems in your code.

Keyboard Shortcurts

General Shortcuts

Ctrl + Shift + P / Cmd + Shift + P (Mac): Show Command Palette
Ctrl + P / Cmd + P (Mac): Quick Open (Go to File)
Ctrl + Shift + N  / Cmd + Shift + N (Mac): New Window
Ctrl + "," / Cmd + , (Mac): Open Settings
Ctrl + K / Cmd + K, Cmd + S (Mac): Keyboard Shortcuts

Integrated Terminal

Ctrl + ` / Cmd + ` (Mac): Toggle terminal
Ctrl + Shift + ` /  Cmd + Shift + ` (Mac): Create new terminal
Ctrl + Shift + C / Cmd + Shift + C (Mac): Open external terminal

You can customize your own in File > Preferences > Keyboard Shortcuts.

Sync Settings Across Devices

You can sync your settings via Settings Sync.

Go to File > Preferences > Settings Sync to set it up.

Got more tips? Share them! 👇