| id | Title | VSCode : Description | EMACS way of life : |
|---|
| 00 | Refactor Promises to Async/Await | This tip and video brought to you by Umar Hansa. VS Code can refactor promises in TypeScript into Async/Await. This includes multiple then statements, Promise.all() and Promise.race(). Requires TypeScript 3.1.1. | JS2-refactor : https://github.com/magnars/js2-refactor.el . `ts` is toggle-function-async: Toggle between an async and a regular function. |
| 01 | Balance Inward/Outward | You can select a whole tag in VS Code by using the balance inward and balance outward Emmet commands. It’s helpful to bind these commands to keyboard shortcuts, like Ctrl + Shift + Up Arrow for Balance Outward and Ctrl + Shift + Down Arrow for Balance Inward. | expand-region.el can do that. Just expand until it selects the whole tag. |
| 02 | Pull Requests | The Github Pull Requests extension from Github allows you to view and interact with your Pull Requests directly from within VS Code. | Use magit : https://magit.vc/ + [[https://github.com/magit/forge/][forge]] |
| 03 | Toggle Sidebar Focus | You can navigate in and out of the sidebar without ever touching the mouse. Use ⌃/⌘+ 0 to set focus to the Siebar and ⌃/⌘+ 1 to set it to the editor. On a Mac, you can use ⌃/⌘+ ⇣ to select a file in the Sidebar Explorer with your keyboard. On Windows just press the enter key. | C-x o |
| 04 | Breadcrumbs | This tip is brought to you by Brian Holt. Use the Breadcrumbs feature in VS Code to quickly jump between folders, files and even sections in code without ever leaving your current tab. | doom-modeline ? https://github.com/seagle0128/doom-modeline C-x C-f or find-files allows one to open easily files on the same folder or on higher level folders using auto completion. |
| 05 | Slack Chat | The Slack Chat extension for VS Code embeds a chat window in the editor. This is paticularly useful for chatting during Live Share sessions. It has the added benefit of being able to start a Live Share session with the “/live share” command. | Use EMACS slack client : https://github.com/yuya373/emacs-slack |
| 06 | Soft Undo | Use the Soft Undo (⌘/⌃ + U) to move the cursor back to it’s previous location. This is particularly useful when you need to move down in a long file to copy a variable or function name and then go back to your original position. | Use the mark ring. Use C-SPC C-SPC to add a mark to the ring, C-u C-SPC to go back to the last mark. Helm helm-mark-ring allows you to see and navigate on the whole ring, instead of one element at a time. Use the global mark ring, to get the same effect on multiple buffers. |
| 07 | Share your localhost | This tip is brought to you by Jonathan Carter. VS Code Live Share enables you to share any TCP process on your computer with people who are currently connected to your Live Share session. Choose “Share Server” from the Command Palette and select a port to share. Now they can access your localhost like it’s their localhost. | |
| 08 | JavaScript Scratch Pad | Use the Quokka.js extension to create a JavaScript scratchpad that executes JavaScript/TypeScript as you type it with output in the terminal and inline with VS Code. Note that this is based on a paid service, but there is a free plan that works by default. | M-x eshell then $ node . (And it’s based on free services !) |
| 09 | Version Lense | This tip is brought to you by Elijah Manor. Easily see what npm packages are out of date with the Version Lense plugin. Toggle errors and warnings on and off as well as updating to the latest available version of a package. | |
| 10 | Search User Settings | There are over 400 settings in VS Code, and that doesn’t include settings for extensions. VS Code uses a search AI that helps you find what you need, even if you aren’t sure exactly what you’re looking for. Just search settings the way that you would search the internet. | M-x customize |
| 11 | Refactor To ES6 | VS Code can refactor your JavaScript to ES6. It can update imports, convert prototype functions to ES6 classes and more. Anytime you see an ellipsis, you may be able to refactor that code. Check the lightbulb to find out. | JS2-refactor: https://github.com/magnars/js2-refactor.el , you can also look at tide package : https://github.com/ananthakumaran/tide |
| 12 | Serverless | The Azure Functions extension for VS Code enables a full Serverless development experience in the editor. Create new projects and triggers locally, debug, manage Functions projects in Azure and setup deployments wthout ever leaving VS Code. | |
| 13 | Move Side Bar Right | The code we write left-aligned by default. When the sidebar is on the left, expanding and collapsing it causes the jarring effect of moving the code in the viewport. Keeping the Side Bar on the right ensures that the viewport always stays the same. The Side Bar in VS Code can be collapsed with ⌘/⌃ + B. It can be moved to the right-hand side by selecting ‘View / Move Side Bar Right”. | In Emacs by the default new horizontal windows C-x 3 are created on the right. |
| 14 | Toggle Activity Bar | You might know that the Sidebar can be toggled with Cmd/Ctrl B. The ActivityBar can also be toggled to make even more room. The Multi-Key Extension allows for multiple commands to be bound to a single keystroke. This keystroke can then hide both the sidebar and the activity bar at the same time. | You can hide emacs graphical elements quite easily with a couple of lines of Elisp (Example) |
| 15 | NPM Script Explorer | This tip is brought to you by Brian Clark. View and run all of the available npm scripts in your package.json file by enabling the NPM Scripts viewlet. Add the following line to your User Settings file… “npm.enableScriptExplorer”: true | Use npm.el where you can explore your npm scripts, install/update packages and run your tests. You can also use eshell to run your npm script or try compile mode to launch a commande with keys. If you need to launch your test, use Mocha.el or Jest.el. |
| 16 | Inline File / Folder Nesting | This tip is brought to you by @ChendrayanV Create nested file and folder structures inline in the File Explorer by specifying a relative path. This works for both new files/folders and editing ones that already exist. | This is the default behavior in C-x C-f on a directory/file that doesn’t exist. |
| 17 | CSS Preview | VS Code will automatically show a selector in CSS when you hover over your selectors. It uses a visual representation of the markup that will be selected by the CSS to make it easier to compose your rules with confidence. | For CSS color, you can use xah-css-mode . For the doc and auto-complete, you can use LSP-Mode with the CSS sub-module. |
| 18 | Image Preview | The Image Preview extension provides inline previews for images included HTML file types. The extension shows a pop-up window in the editor surface, and an optional image preview in the gutter, which can be toggled on or off in User Settings. | Yes, in build-in emacs. |
| 19 | Deployment | VS Code can deploy applications directly to Azure with the Azure App Service Tools extension. The extension creates the site via a wizard and then generates a shell script which automates the CLI commands to check code into Git and then pull into Azure. When using AppService for Linux,npm install and npm start are run automatically by Azure. | 🤔 |
| 20 | Settings Sync | Use the Settings Sync extension to synchronize your theme, user preferences and installed plugins across installations of VS Code. Note that these instances do not have to be on the same machine. In fact, you can share your exact setup of VS Code with a friend or collegue simply by publishing your settings publically and sending them the ID. Note that this is particularly useful for keeping VS Code stable and the Insiders Build in sync. | All your setting are set in /home/USER/.emacs.d/init.el . Put it on a git, nextCloud or dropbox. |
| 21 | Docker | VS Code can configure, build, deploy, manage and even debug Docker containers with the Docker extension. | Docker plugin: https://github.com/Silex/docker.el/ |
| 22 | Bookmarks | Bookmarks is an extension you can use to easily mark your place in your file. A blue bookmark icon will appear in the sidebar and you can traverse the file with some quickkeys Command + option + K creates a bookmark, and command + option + J jumps between existing marks. | Emacs bookmarks: https://www.gnu.org/software/emacs/manual/html_node/emacs/Bookmarks.html |
| 23 | Cosmos DB / Mongo DB | The Cosmos DB extension for VS Code puts Mongo DB database access right inside of the editor. | Use inf-mongo . You have also ob-mongo if you want put that in org-mode doc. |
| 24 | Log Points | Log Points allow you to log information out from your application, similar to the way `console.log` works. The difference is that they can be added or removed while the application is running without pausing execution. | It depend of your language: DAP-mode has a cool log system. But you can look at indium for node/js , |
| 25 | Debugging Browser Apps | Applications running in the browser can also be debugged in VS Code. These would be applications running on frameworks like Angular, React, Vue or others. This is facilitated by VS Code Launch Configurations. | |
| 26 | Node.js Debugging | Run and debug any JavaScript file without any launch configuration. VS Code also has support for advanced debugging functionality, such as breakpoint expressions and column breakpoints. | Use indium-mode , DAP-mode or tide . |
| 27 | JSON Intellisense | Intellisense is provided in JSON files. This works not only in the User Preferences file, but also in package.json files allowing you to see the current version of any npm package as you import it. Use Ctrl + Spacebar to trigger intellisense at any time. | |
| 28 | JavaScript Type Checking | Use TypeScript to check your plain JavaScript code by adding a //@ts-check to the top of the file. To enable the setting globally across your entire project, add the following line to your User Preferences (⌘ + ,)… “javascript.implicitProjectConfig.checkJs”: true Drop a .tsconfig file in your project to control specific TypeScript checking features. | There a trick with tide-mode and flyckeck , more info here . |
| 29 | Bracket Pair Colorizer | When you have a lot of brackets, brances and parenthesis, it can get hard to see where a block of code opens and closes. The Bracket Pair Colorizer extension for VS Code makes corresponding brackets, braces and parenthesis the same color. | Rainbow delimiters : https://github.com/Fanael/rainbow-delimiters |
| 30 | Font Ligatures | Font Ligatures are when two ore more characters are joined together to create a special symbols. Ligatures are especially well suited for programming where compound symbols such as >= or === are used. Download FiraCode Font and add to fonts on your computer. Add the following line to yourUser Settings file… “editor.fontFamily”: “Fira Code”, “editor.fontLigatures”: true | Use firacode : https://github.com/tonsky/FiraCode/wiki/Emacs-instructions |
| 31 | Prettier | Prettier is a JavaScript code formatting tool. It is particularly useful to ensure that all developers working on a project are formatting code the same way. Prettier has many settings that can be customized, as well as integration with ESLint. Additionally, Visual Studio Code can be configured to format code with Prettier automatically by setting formatOnSave in User Settings. Add the following lines to your User Preferences : “prettier.singleQuote”: true, “prettier.eslintIntegration”: true, “prettier.tabWidth”: 2, “editor.formatOnSave”: true | Use prettier-js |
| 32 | Wrap Individual Lines | Wrap any text with a tag. This box also supports Emmet. If you have multiple lines that all need to be wrapped in separate tags, use the* symbol. A good idea is to add a keyboard shortcut for this as it’s particularly useful for wrapping links with anchor.I have this mapped to Option + Shift + W in my setup. tags. Refer to the Emmet Cheat Sheet to learn more about the Emmet syntax. | Yes. C-c C-t on html-mode. See Documentation |
| 33 | Emmet | Emmet is a markup expansion tool that makes writing HTML much easier. It has a simple syntax and is not difficult to master. VS Code supports Emmet by default. | emacs web-mode . You can also use it with lsp-mode |
| 34 | Update Image Size | VS Code can automatically update HTML img tags with the correct size of images. This works for images that are local to the project as well as images included by URL. It also works in CSS properties like `background-image`. | |
| 35 | Snippet creation in VSCode | This describes how easy it is to create your own snippets and become really productive | Yasnipet: https://github.com/joaotavora/yasnippet |
| 36 | Publish your snippet/extension to Marketplace | This describes how easy it is to create an extension and upload it to the marketplace so other developers can install your extension using VSCode | For extensions : https://melpa.org/, or simply put your extension on github and use straight.el. |
