5 Best emacs plugins for web development

Since you are here, you are already using Emacs for text editing, possibly for email, and certainly for coding tasks. When you start doing serious web development, you want as many advantages as are possible. Here are some tools that will make your experience coding for the web using Emacs.

As the saying goes, Emacs is an operating system lacking a decent editor. You can set things up so that Emacs runs the entire workflow for you, including git, compiling, and many more things.

What web project are you aiming for?

This list is short to get you started, not exhaustive. After you have used the tips here, find the special section for your frameworks and special web tools. The list of tools is so long that you just have to find your own favorite.

The list is split into sections so you can find what you need to improve in your workflow. Enjoy your coding, handle your own mistakes, and find bugs much simpler when setting these tools up correctly.

In this list, you will not even find any of the great Python tools available for Emacs. Those tools include a REPL so that you can test code interactively. You even have an iPython mode, where you can build your code with comments.

Prepared snippets

Much of programming involves using functions that have a special structure. A web document always has a and a tag that must be closed correctly. You will always have constructs where the code you want follows a special format to uses a snippet. In Emacs, one of the best plugins is Yasnippets!

Yasnippets

With Yasnippets, you define what text you need to have in your code. You can also use variables and fill in the result as a form. A similar plugin that is available for many editors is Emmmet-mode.

Emmet

Emmet-mode is a tool where an abbreviation creates the whole code. The first example on their webpage shows how you use an asterisk to multiply to get a list. The syntax works similar to CSS, but it is adapted to the markup languages, including HTML. To extend the functionality, you use JSON files. In these, you can add snippets that match your needs closer than the standard tool.

Flycheck

Flycheck will check your code for syntax errors as you type. For this to work, you need an underlying library or toolkit that actually knows the language. There are these tools for many languages. For web development, look for tools like html-tidy, jshint, and pylint. Many other tools and languages are supported. This is an essential part of making Emacs powerful for software development.

In your emacs setup, you also need to add the specific language that you support with. The languages supported are obvious when you check MELPA, or any other site, for Flycheck. In fact, it is a good idea to check what Flycheck can do for you, irrespective of the language you are developing. The array of languages is huge!

Live editing mode

There are many ways you can use Emacs to get your web pages to look great and work correctly. You also have many ways to see the result of your code live in a browser as you type. This gives you instant feedback on any changes you made, making debugging an integral part of developing your software. One solution to do this is with skewer-mode.

Skewer-mode

Skewer-mode sets up your directory as a webpage but locally on your current system. It then starts a web server and serves the code to the web browser of choice. With this setup, you have the browser showing you the page in the next window. The web server is configured to reload the page as soon as a file is changed. No compiling, transferring, and restarting the webserver necessary.

JavaScript

When programming in JavaScript, you have many pitfalls to stumble over. While Flycheck will check your syntax, js2-mode will do syntax highlighting while also showing you syntax errors as you type. This mode is essential for getting through many codes to reach your dream outcome when coding in JavaScript.

This mode also supports JSX and Closure.

Indium

After reading through all this, you will be pleased to know that you can also find bundles that pack everything neatly. One of the best of these is Indium. Indium is actually split into two pieces. One piece is your emacs package available on MELPA; the other is an NPM package. The NPM package is easy to install using ‘npm install indium.’ After these two are installed, you need to create settings in your project directory, named ‘.indium.json’. Requirements are modest in NodeJS, but they are stringent. It also realizes on Chromium to work since all the debugging tools come from there.

Conclusion

To get started with web development, you may think that you need a fancy IDE. Where else can you get all the bells and whistles? In Emacs, is where you can find them. Using these tools and more will get you very far, and you probably need no other tool to make great webpages! However, if you do not agree with some of these tools, there are many awesome tools available for Emacs if you look around. One good starting point is available on GitHub and is indeed named ‘Awesome Emacs.’

from Linux Hint https://ift.tt/3umctRp