A few days ago, I read an article made by Austin Tackaberry, and his journey to success inspired me a lot. His article convinced me that I can be a software developer if I have a goal, build a plan on it, and act on it.

I then made a commitment to add more hours learning JavaScript, Vue.js, and NativeScript, by building more projects and writing more code.

The plan looks really good on paper. However, I feel like I need a tool to monitor my programming activity.

I can track my activity by manually tracking my hours but I reckon that it would be inaccurate.

The Visual Studio Code Extension

Good thing I found “Coding Tracker” by Liu Yue.

This Visual Studio Code Extension gives developers the ability to monitor and generate reports regarding our coding activities.

With this extension, users can now can know how much time is spent on each projects, files, computers, programming languages, and branches.

Here are the screenshots of my visual studio code activities recorded by the extension:

That’s it! I hope this article help developers who are looking for ways to track their coding productivity.

This is my story on how I was able to incorporate ESLint in my VS Code project.

I am eager to learn ESLint because I want my code to be more consistent and I also wanted to avoid ugly bugs.

I have my NPM and Visual Studio Code ready in my laptop and so I installed the ESLint extension by Dirk Baeumer.

I then referred to ESLint’s getting started guide, opened my Command Prompt, and ran the npm command to install the eslint package.

$ npm install eslint --save-dev

I then executed the command below to open my local project:

$ code .

I noticed a few changes in my Visual Studio Code and in my local project. First, my project directory showed a new folder named ‘node_modules’. This was due to the npm command I ran earlier. Second, I noticed that there is an ESLint status with an exclamation point at the bottom of my Visual Studio Code.

Curious, I clicked the ESLint status and found an error:

It said that I did not have a configuration file named .eslintrc.json file.

After searching for answers over the web, I found out that I need to execute ‘eslint --init’ in the node_modules/eslint sub folder that contains a package.json file.

Back in my Command Prompt, I navigated to node_modules\eslint sub folder and executed the command below.

$ eslint --init

Important Note: You may run this command directly in to the node_modules\eslint sub folder if you have already installed eslint globally.

// Install eslint globally
$ npm install eslint -g

Running the command prompted me with a set of questions that requires answers. This is the basis of the .eslintrc.json configuration file that will be created.

Here’s how I answered these questions:

I went back to my VS Code and reloaded my Project window by pressing CTRL + Alt + R. I noticed that my node_modules\eslint sub folder now contains the .eslintrc.json file.

Here is the content of the file:

Unfortunately, however, I still found an issue in my ESLint status as shown below:

The error message still says that VS Code cannot find my .eslintrc.json file.

After further googling, I found out that I need to add the following lines in my settings.json in Visual Studio Code:

   "eslint.options": {
        "configFile": "node_modules/eslint/.eslintrc.json"
   }

I then pressed Ctrl + , to open the VS Code Settings page

In the Search box, I typed eslint.options to search for the setting. I then clicked the ‘Edit in settings.json’ link to open the settings.json file.

I then added the code snippet at the bottom of my settings.json file > User Settings tab and then saved it.

I reloaded my VS Code window again by pressing CTRL + Alt + R.

When I opened a JavaScript file, I found out that the Exclamation point on the ESLint status is gone (Hooray!!!). This meant that I had successfully incorporated ESLint in to my project.

How to deal with errors?

Since I have installed the ESLint extension, I went to VS Code’s Command Palette by pressing Ctrl + Shift + P, and then ran ‘ESLint: Fix all auto-fixable Problems’. This command applies ESLint auto-fix resolutions to all fixable problems. You may check this link to view all the rules that can be automatically fixed.

I then reviewed all of the remaining errors I found after running the command.

How to disable some of the ESLint rules?

I heavily used JQuery and other plugins (i.e. Superslides) in my project that’s why ESLint is throwing these remaining errors:

1. ‘$’ is not defined. [no-undef]
2. ‘typed’ is assigned a value but never used. [no-unused-vars]
3. ‘Typed’ is not defined. [no-undef]

For this reason, I opted to remove some rules that doesn’t seem to apply in my Project. Actually, I do not recommend doing this because you may overlook important rules that could cause some bug in the future.

I found out that I can exclude some ESLint rules by adding a couple of parameters in to my in .eslintrc.json file.

Before:

After:

I added “jquery”: true in order for the system to recognize the presence of JQuery related syntax (i.e. the usage of ‘$’ for DOM manipulation) in my JavaScript code.

I also turned off “no-undef” and “no-unused-vars” rules because ESLint is tagging some parts of my code as erroneous when it should not. You may refer to this link for Typed.js Plugin usage.

I then reloaded my VS Code window and found out that my Project is now cleared of ESLint problems.

That’s it! I hope my experience could be of help to anyone who is planning to set up ESLint in to their own projects in Visual Studio Code.