Skip to content

thomas-louvigne/emacs-can-do-that

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

51 Commits
 
 

Repository files navigation

EMACS can do that ?

Intro

  • The website “VSCodeCanDoThat.com” talk about 36 amazing points that VSCode can do.
  • I think EMACS can do all this stuff… And more !
  • If this project works, why not creat a website ? emacsCanDoThat.com ?

Point needed in EMACS :

  • 07 : Share your localhost
  • 09 : Version Lense
  • 12 : Serverless
  • 19 : Deployment on Azure
  • 25 : Debugging Browser Apps
  • 27 : JSON Intellisense
  • 34 : Update Image Size

Comparaison

idTitleVSCode : DescriptionEMACS way of life :
00Refactor Promises to Async/AwaitThis 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.
01Balance Inward/OutwardYou 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.
02Pull RequestsThe 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]]
03Toggle Sidebar FocusYou 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
04BreadcrumbsThis 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.
05Slack ChatThe 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
06Soft UndoUse 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.
07Share your localhostThis 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.
08JavaScript Scratch PadUse 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 !)
09Version LenseThis 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.
10Search User SettingsThere 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
11Refactor To ES6VS 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
12ServerlessThe 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.
13Move Side Bar RightThe 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.
14Toggle Activity BarYou 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)
15NPM Script ExplorerThis 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”: trueUse 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.
16Inline File / Folder NestingThis 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.
17CSS PreviewVS 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.
18Image PreviewThe 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.
19DeploymentVS 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.🤔
20Settings SyncUse 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.
21DockerVS Code can configure, build, deploy, manage and even debug Docker containers with the Docker extension.Docker plugin: https://github.com/Silex/docker.el/
22BookmarksBookmarks 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
23Cosmos DB / Mongo DBThe 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.
24Log PointsLog 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 ,
25Debugging Browser AppsApplications 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.
26Node.js DebuggingRun 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 .
27JSON IntellisenseIntellisense 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.
28JavaScript Type CheckingUse 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 .
29Bracket Pair ColorizerWhen 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
30Font LigaturesFont 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”: trueUse firacode : https://github.com/tonsky/FiraCode/wiki/Emacs-instructions
31PrettierPrettier 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”: trueUse prettier-js
32Wrap Individual LinesWrap 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
33EmmetEmmet 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
34Update Image SizeVS 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`.
35Snippet creation in VSCodeThis describes how easy it is to create your own snippets and become really productiveYasnipet: https://github.com/joaotavora/yasnippet
36Publish your snippet/extension to MarketplaceThis describes how easy it is to create an extension and upload it to the marketplace so other developers can install your extension using VSCodeFor extensions : https://melpa.org/, or simply put your extension on github and use straight.el.

Releases

No releases published

Packages

No packages published