Effective code navigation for web development

  |   Source

UPDATED: <2020-03-27 Fri>

I use AngularJS as an example. The technique is actually generic and not limited to Angular Only.

Problem

In Angular application, a function is defined in a javascript file and called in a html file.

Javascript file: 

<div ng-controller="MyController" ng-init="init()">
  <button ng-click="onClick()"></button>
</div>

html file: 

angular.module['myapp'].controller('MyController', function ($scope, $http) {

  $scope.init = function () {
  };

  $scope.onClick= function() {
  };
});

As you can see, the keyword we are interested is just a string, like "MyController". The only way to extract it is regular expression.

In this article, I focus on how I combine Emacs and Ctags. If you use other text edit like Visual Studio Code, you still can use Ctags.

Solution

Ctags is good at parsing files with regular expression.

I use Ctags because:

  • New web frameworks keep popping up. I don't want to waste time&money on upgrading IDE from time to time
  • As a freelancer, I have to deal with in-house frameworks which IDE developers NEVER heard of
  • Setup of ctags and text editors is easy. Once the first project is set up, others are just five minutes of copy&paste jobs.

Old solution

Here is my ~/.ctags.

Please note on Windows, you can place ".ctags" anywhere. Then create an environment variable named "HOME" whose value is the parent directory of ".ctags".

Run ctags -e -R -f /app/path/TAGS at least once to generate tags file named "TAGS".

You can use builtin Emacs command find-tag to find tag.

If you prefer Helm UI, install it and M-x helm-etags-select instead.

Please install the latest helm because I enhanced helm-etags-select.

Latest solution (recommended)

I have developed some ctags packages on code completion and code navigation. No manual setup is needed. Everything just works out of box. My packages are very popular in the Emacs community right now,

Here are my packages,

Usage is simple,

  • Install Ctags and configure it with ~/.ctags
  • Install company-ctags which dependent on company-mode
  • Install counsel-etags and start use it immediately like M-x counsel-etags-find-tag-at-point
  • Done. The tags file is automatically created and updated from time time
Comments powered by Disqus