# VS Code |  | Visual Studio Code, also commonly referred to as **Vs code**, is a source-code editor made by Microsoft with the Electron Framework, for Windows, Linux and macOS. Features include support for debugging, syntax highlighting, intelligent code completion, snippets, code refactoring, and embedded Git. Users can change the theme, keyboard shortcuts, preferences, and install extensions that add functionality. | |-|-| | | wikipedia:: [Visual Studio Code](https://en.wikipedia.org/wiki/Visual_Studio_Code) | [[VS Code Insiders]] [[Programming]] - Primary code editor - [[Python]] - [[JavaScript]] - text processing ## Setup & Customizations - [[EditorConfig]] - [Profiles in Visual Studio Code](https://code.visualstudio.com/docs/editor/profiles?cmdf=vs+code+editorconfig) ### [[VS Code Hotkeys]] ### Extensions - ESLint - https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint - TSLint - https://marketplace.visualstudio.com/items?itemName=ms-vscode.vscode-typescript-tslint-plugin - Prettier - https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode&source=post\_page--------------------------- - npm Intellisense - https://marketplace.visualstudio.com/items?itemName=christian-kohler.npm-intellisense&source=post\_page--------------------------- - ES7 React/Redux/GraphQL/React-Native snippets - CodeRunner - Liver Server - GitLens - Live Share - Python - vscode-icons - Beautify? - Bracket pair colorizer 2 - https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2 - Debugger for Chrome? - File Utils? - indent-rainbow - https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow - npm? - Path Intellisense? - VS IntelliCode - Rainbow CSV - https://marketplace.visualstudio.com/items?itemName=mechatroner.rainbow-csv - GitHub Pull Requests - https://marketplace.visualstudio.com/items?itemName=GitHub.vscode-pull-request-github - https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow - https://github.com/evanharmon1/evans-vscode-extension - https://marketplace.visualstudio.com/items?itemName=DotJoshJohnson.xml - https://code.visualstudio.com/api/get-started/your-first-extension - https://code.visualstudio.com/api/references/vscode-api\#Thenable - https://code.visualstudio.com/api - [Peacock](https://www.peacockcode.dev/) - [Blockman - Highlight Nested Code Blocks - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=leodevbro.blockman) - [GitHub - lostintangent/codeswing: VS Code extension for building web applications ("swings") using a interactive and editor-integrated coding environment](https://github.com/lostintangent/codeswing) ## Tasks - [Tasks in Visual Studio Code](https://code.visualstudio.com/Docs/editor/tasks) ## Git - https://code.visualstudio.com/docs/editor/versioncontrol - Commit - You can type a commit message above the changes and press Ctrl+Enter (macOS: ⌘+Enter) to commit them. If there are any staged changes, only those will be committed, otherwise all changes will be committed. - Fetch - git.autofetch should be set to false by default for some reason. I set it too true. It automatically fetches from upstream repos periodically and maybe also before ay pulls or pushes? - But I couldn't get it working. Maybe it just does origin not upstream - Push, Pull, and Sync - Given that your repository is connected to some remote and that your checked out branch has an upstream link to a branch in that remote, VS Code offers you useful actions to push, pull and sync that branch (the latter will run a pull command followed by a push command). You can find these actions in the More Actions ... menu. - Status Bar Actions - There is a Synchronize Changes action in the Status Bar, next to the branch indicator, when the current checked out branch has an upstream branch configured. Synchronize Changes will pull remote changes down to your local repository and then push local commits to the upstream branch. - If there is no upstream branch configured and the Git repository has remotes set up, the Publish action is enabled. This will let you publish the current branch to a remote. - Diffs - Compare whole folders or projects - I don't think VS Code can do it but Git Lens can - You can diff any two files by first right clicking on a file in the Explorer or OPEN EDITORS list and selecting Select for Compare and then right-click on the second file to compare with and select Compare with 'file\_name\_you\_chose'. Alternatively from the keyboard hit ⇧⌘P and select File: Compare Active File With and you will be presented with a list of recent files. - Visual Indicators - A red triangle indicates where lines have been deleted - A green bar indicates new added lines - A blue bar indicates modified lines - Merge Conflicts - Differences are highlighted and there are inline actions to accept either or both changes. Once the conflicts are resolved, stage the conflicting file so you can commit those changes. - Git output window - You can always peek under the hood to see the Git commands we are using. This is helpful if something strange is happening or if you are just curious. :) To open the Git output window, run View > Output and select Git from the drop-down list. - GitHub Pull Request Extension v ## How-to's & Tips - Disable showing release notes every month - update.showReleaseNotes boolean is now in settings - https://github.com/Microsoft/vscode/issues/44020 - Move sidebar right since then text will always be aligned left to the same spot instead of jarringly bouncing in and out whenever you enable/disable the sidebar. And when on right the sidebar hovers over the text instead of moving any of the text anywhere - Don't bother with terminal code editors like nano and vim anymore. Just open text files with code someFile or to force open in a new window do code -n someFile - Find and replace in all files in a folder - cmd + shift + h - [How do I find and replace all occurrences (in all files) in Visual Studio Code? - Stack Overflow](https://stackoverflow.com/questions/37346481/how-do-i-find-and-replace-all-occurrences-in-all-files-in-visual-studio-code) - You can wrap lines with a tag with emmet comand via command pallette - wrap with abbreviation and just type p or h2 or whatever - Single clicking on a file in the sidebar opens the file in preview mode (it doesn't stay open when you click on another file). Double clicking on a file will open it and keep it open. Files in preview mode are in italics. - Create Open in VS Code Quick Action and attach hotkey to it - [visual studio code - Open a folder in vscode through Finder in macOS? - Stack Overflow](https://stackoverflow.com/questions/64040393/open-a-folder-in-vscode-through-finder-in-macos) ### Code Folding - Indent arbitrary code and then you can fold on the header of those indented lines, e.g. multiline \#comments - This has the advantage that you don't have to change the actual text - \#region - \#endregion makes the code between foldable ### Refactoring [Refactoring source code in Visual Studio Code](https://code.visualstudio.com/docs/editor/refactoring) - Rename Symbol - F2 - Smartly renames variables, function names, etc. I think works across files - Refactor - Shift-Ctrl-R - Go to implementation, reference, etc. - F12, Shift F12, etc. ## Features ### Dev container [Developing inside a Container using Visual Studio Code Remote Development](https://code.visualstudio.com/docs/remote/containers) ## Sources - [Learn these keyboard shortcuts to become a VS Code ninja - LogRocket Blog](https://blog.logrocket.com/learn-these-keyboard-shortcuts-to-become-a-vs-code-ninja/) - https://vscodecandothat.com - https://egghead.io/browse/tools/vscode Remember - if you select some text, and then hit a symbol like " or { it will guess that you want to wrap that selection with that symbol!