Hey fellow coders! Are you ready to supercharge your coding experience with Visual Studio Code? 🤩 Whether you're a seasoned developer or just starting out, these productivity hacks will take your coding game to the next level. Let's dive right in and unlock the full potential of VS Code!
🔍 Effortless Navigation:
Want to quickly open a specific directory or file? Say no more! Simply use commands likecode . (To open VS Code from the current directory)code /data/dir1(To open VS Code from the directory: /data/dir1)code my-file.json(To open my-file.json in VS Code)
🎨 Customization Galore:
To change colour theme:
Settings-->color theme-->Browse additional color themes-->Atom One Dark Theme
To change Font:
Settings-->scroll down-->Font Family-->Fira Code
To opt into ligatures -->Settings-->in the search bar(type ligature)-->settings.json--> change it to true
"editor.fontFamily": "Fira Code","editor.fontLigatures": true,
💡 Command palette:
- ctrl+p to display list of files
- Open the Command Palette with ctrl + shift + p
- From the command palette, type @ to quickly navigate to symbols within a file.
💡 To change default file icons:
extensions-->vscode-icons
💡 Smart Editing:
- Say goodbye to manual labor with Intellisense and Parameter Hints. Install third-party extensions like Flutter for Intellisense magic, and effortlessly navigate through your codebase with helpful hints.
- Force Intellisense-->Use the "ctrl + space key" combination to force Intellisense to show up.
- Parameter hints->When inside a method, press "ctrl+shift+space" inside parenthesis to trigger parameter hints.
📁 File explorer:
Open the File Explorer: Press Ctrl + b to swiftly access the File Explorer and browse through your project files with ease.
Close Files Quickly: Need to tidy up your workspace? Simply hit Ctrl + w to close the active file and keep your coding environment organized.
Reveal Hidden Files: By default, Visual Studio Code hides certain files like, .git from the File Explorer to keep clutter at bay. However, if you need to access hidden files, you can customize this setting. Navigate to Settings, search for "exclude," and adjust the patterns to reveal hidden gems in the explorer.
📁 Effortless Directory Creation: Creating directories and files has never been easier!
- Auto-Directory Creation: Simply click on "new file" and input the desired file name, including the directory structure (e.g., /dir/dir1/test.txt). Visual Studio Code will automatically create the necessary directory structure for you, saving you time and effort.
And don't forget these essential shortcuts:
- Undo Shortcut: Press Ctrl + Z to quickly undo your last action and revert to a previous state.
- Redo Shortcut: Need to redo an action? No problem! Hit Ctrl + Shift + Z to redo your last undone action with ease.
🐭 Swift Mouse Navigation:Navigate your code swiftly and efficiently with these mouse-moving tips:
Symbol Search: Press Ctrl + P followed by "@" to quickly search for the symbol or code snippet you're looking for within your project files.
Highlight Current Line: Highlight the current line by pressing Ctrl + L. Pressing it again will extend the selection to include lines below, streamlining your editing process.
Go to Specific Line: Use Ctrl + G and enter the line number to jump directly to a specific line in your code, saving you valuable time during code navigation.
🔃 Line Movement Mastery: Master the art of moving lines up and down effortlessly with these tricks:
To move a line nearby up or down, navigate to the desired line and press "Alt + Up Arrow" or "Alt + Down Arrow" respectively.
Need to move a line a bit farther? Simply go to that line without highlighting it, press "Ctrl + X" to cut it, and paste it at the desired location.
Want to duplicate a chunk of boilerplate code? Hold "Shift + Alt" and press the "Down Arrow" to copy the lines below, saving you time and effort.
📁 Code Folding Techniques: Explore different methods to fold and unfold sections of code seamlessly:
Fold Everything: Press Ctrl + P, then type ">foldall" or ">unfoldall" to collapse or expand all code sections at once for better organization.
Fold Section Shortcut: Quickly collapse a section by pressing Ctrl + Shift + [.
Unfold Section Shortcut: Expand a collapsed section by pressing Ctrl + Shift + ].
🎨 Bracket Beautification: Enhance your coding experience with beautifully colorized brackets:
Settings Shortcut: Access settings quickly by pressing Ctrl + ,.
Enable Bracket Pair Colorization: In settings, search for "coloriz" and enable Bracket PairColorization to add color to your brackets for improved readability.
Adjust Settings if Needed: If the changes are not reflecting, manually add the following lines to your settings.json:
"editor.language.colorizedBracketPairs": [["[", "]"],["(", ")"],["{", "}"]]
Explore extensions like "Bracket Pair Colorizer 2" for additional customization options and an enhanced bracket colorization experience.
✨ Multi-Cursor Magic: Unlock the power of multiple cursors and streamline your editing process:
Manual Cursor Placement: Hold "Alt" and click on the locations where you want to type. Your cursor will appear at each clicked position, allowing you to edit multiple lines simultaneously.
Drag to Select: Alternatively, Hold Shift + Alt and drag your mouse cursor from top to bottom or vice versa. This action creates multiple cursors along the selected area, empowering you to edit multiple lines effortlessly.
🔗 Linked Editing: HTML Editing Made Easy :Simplify your HTML editing tasks with linked editing
Access Settings: Press Ctrl + , to open settings.
Enable Linked Editing: Within settings, activate linked editing to seamlessly edit related HTML elements.
✍️ Multiline Editing Mastery: Press Ctrl + D to select the current word or variable. Repeatedly pressing the same shortcut will extend the selection to the next occurrence, streamlining your editing process.
🚀 Emmet Snippets: Streamline Your Coding: Supercharge your coding speed with Emmet snippets:
- Try typing article>div+h1+p and hit the tab key. Watch as it generates the following code for you:
<article><div></div><h1></h1><p></p></article>
✨ Emmet Wrap Abbreviation: Enhance Your HTML Workflow :Elevate your HTML editing with Emmet Wrap Abbreviation:
- Step 1: Press Ctrl + P to open the command palette.
- Step 2: Type
emmet balance(outward)to select the element on top of which you want to insert another element. - Step 3: Press Ctrl + P again and select
Emmet: wrap with abbreviation. Type the new element you want to insert, likespan.
Effortlessly wrap elements and streamline your HTML editing process with Emmet Wrap Abbreviation!
💡 Snippets: Enhance Your Coding Efficiency
Boost your coding productivity with snippets:
Installation: Easily install snippets from extensions by searching for "Javascript snippets"
Creating Custom Snippets:
- Press Ctrl + P to open the command palette.
- Search for ">snippets" and select "Configure User Snippets."
- Create a new snippet file and define your custom snippet.
Inserting Snippets:
- Press Ctrl + P and select "Insert Snippet" Provide the prefix to insert the desired snippet.
- Alternatively, in the editor, type the prefix and hit tab (e.g., type "log" and hit tab) to insert the snippet.
- Installation: Install the GitHub Copilot extension to access its premium features.
- AI Programming: Enjoy magical suggestions and code snippets tailored to the context within your file. Let AI assist you in your coding journey like never before!
🔍 Find References: Explore Your Code: Uncover the references to variables and functions with ease:
- Keyboard Shortcut: Press Ctrl + Shift + F to initiate a comprehensive search throughout your project.
- Alternative Methods:
- Right-click on the variable or function and select "Go to References" from the context menu.
- Alternatively, right-click on the variable or function, hover over "Peek," and choose "Peek References" or "Peek Definition" for a quick glance at the references.
- Right-click on the function, then select "Peek Implementations" from the menu.
- Next, right-click again and choose "Rename Symbol" Watch as the references in other files are automatically updated, ensuring a smooth transition.
- Utilize the yellow bulb icon in VSCode to take action on specific code segments.
- Alternatively, right-click on the code and select "Refactor" for manual intervention.
- For a quick fix, press Ctrl + . to access code actions instantly.
💻 Integrated Terminal: Seamless Command Execution: Access the integrated terminal in VSCode with ease
- Utilize the shortcut Ctrl + ` to open the terminal instantly.
📝 Tasks: Automate Your Workflow: Enhance your productivity with task automation in VSCode
- VSCode automatically generates tasks for commands in the "scripts" section, such as npm build, and tsc && vite build.
- Create custom tasks by navigating to Ctrl + P, then selecting ">tasks:configure task" Choose "create tasks.json from template" and then select "others" to define your custom task.
🔗 Git: Enhance Your Version Control
Discover the GitLens extension for VSCode by GitKraken: a powerful tool for optimizing your version control workflow.
🔍 Debugger: Debug Like a Pro
Harness the power of the VSCode Debugger for seamless code debugging:
- Utilize VSCode Run and Debug to access the Debug console.
- Hover over lines and click on the red button to set breakpoints.
- Right-click on a breakpoint to add a log message instead of using console.log statements, ensuring efficient debugging practices
🌐 HTTP Client: Rest API Integration
Explore Thunder Client, an extension for VSCode, to streamline your REST API interactions.
🐳 Docker Trick: Dockerized Environment Setup
Experience seamless Dockerized environment configuration with this handy trick:
- Install Docker extension, click on extension
- Click the remote button located in the bottom left corner, then select "Reopen in Container" This action automatically generates a Dockerfile and initiates the container setup process. It's an excellent method for testing your code in environments that mirror your production server runtime.
💼 Miscellaneous Tips and Tricks: Explore additional productivity hacks to level up your coding game
- Global Symbol Search: Use Ctrl + P followed by #word or #first_char_in_camel_case to quickly search for symbols.
- Single Line Selection: Press Ctrl + P and type :line_num (:25) to select a single line, then use Shift or Ctrl + left/right arrow to further refine the selection.
- Multi-line Editing: Press Ctrl + D repeatedly to select multiple lines for simultaneous editing.
- Multiple Cursors: Hold Alt and click at multiple places to add multiple cursors.
- Line Movement: Use Alt + up/down arrows to freely move lines up or down.
- Line Copying: Copy lines effortlessly with Alt + Shift + up/down arrow.
- Comment Toggling: Select the code (Ctrl + L) and hit Ctrl + / to toggle comments.
- Terminal Navigation: In the VSCode terminal, use Ctrl + left/right arrow to switch between words in a command. Press Ctrl + K to clear the terminal.
🔌 Other Extensions: Enhance Your Coding Experience
Discover additional extensions to supercharge your development environment:
- Quokka: Execute JavaScript and TypeScript code in the background and receive instant output.
- Auto Rename Tag: Automatically rename closing tags when editing opening tags for enhanced HTML editing.
- Add JSDoc Comments: Simplify comment writing with easy-to-use JSDoc comments in JavaScript documentation standard.
- Better Comments: Improve comment readability with color-coded comments for better code comprehension.
- Remote Repositories: Browse and edit GitHub repositories remotely, right from within VSCode.
- Remote Containers: Seamlessly work with Docker containers by opening any folder or repository directly inside a containerized environment.
- Paste JSON as Code: Convert JSON data into code snippets in various programming languages for quick integration.
- vscode-icons
- Flutter
- Bracket Pair Colorizer 2
- Javascript snippets
- GitHub Copilot
- GitLens by GitKraken
- Thunder Client
Keywords: VS Code productivity, Visual Studio Code tips, coding efficiency, coding productivity, code editing hacks, programming shortcuts, coding workflow, coding environment customization, code navigation, code editing techniques, code optimization, debugging tips, VS Code extensions, coding tools, development environment, software development productivity, programming efficiency, coding efficiency tips, coding productivity techniques, programming optimizations, code editing hacks, Visual Studio Code tricks
Tags: VS Code, productivity, coding tips, programming tricks, development tools, software development, coding hacks, coding shortcuts, debugging, code editing, extensions, development environment, coding workflow, productivity tools
DISCLAIMER
The purpose of sharing the content on this website is to Educate. The author/owner of the content does not warrant that the information provided on this website is fully complete and shall not be responsible for any errors or omissions. The author/owner shall have neither liability nor responsibility to any person or entity with respect to any loss or damage caused or alleged to be caused directly or indirectly by the contents of this website. So, use the content of this website at your own risk.
This content has been shared under Educational And Non-Profit Purposes Only. No Copyright Infringement Intended, All Rights Reserved to the Actual Owner.