GIT Commit Stats using Command Line to analyse in Excel

git log --all --no-merges  --pretty=format:"%aE - %aI : %s" --after="2019-04-01 00:00"  > git.log

Static code analysis and source code complexity tool - Plato for Typescript

I was looking for a tool which can report code complexity for an Angular application. The application is written in Typescript and there are hardly any tools for it.

The first place to look was Wikipedia : https://en.wikipedia.org/wiki/List_of_tools_for_static_code_analysis#JavaScript which has some tools for Javascript but none for Typescript.

Looking across the web : https://www.npmjs.com/search?q=keywords:complexity , I came across tools like Plato and Complexity Report based on EsComplex. I was quickly drawn to Plato for it nice graphical reports.

npm install -g plato

Still the problem was how to make Plato run on TypeScript. Yes there were people asking for it on the web but no answers.

Now I knew all the TS code of my angular application is compiled and put into main.js. So I applied Plato on the file directly. First thing I hit was a memory constraint put by node that it can use a maximum memory of around 1.5GB. So had to increase it using:

node --max_old_space_size=4096 ./node_modules/es6-plato/bin/plato -r -d report -e .eslintrc.json -t "MyApp" -x .json dist\MyApp\main.js.

It worked but resultant report was so big that beyond the basic summary, navigating it was causing browser to error out. Looking into it in notepad++, I found that it a lot of Angular internal code around Webpack and then a small amount of the application code.

So had to work out a better solution. Need to compile the individual TS files in to JS file and run plato only on them.

Luckily we have a tsc compiler for TS which will output the JS and then can run plato on it.
So first install:

npm install -g typescript

Now we can run the build task from VS Code directly using CTRL+SHIFT+B i.e. Run Build Task and select tsc:build

This will execute the command:

node_modules\.bin\tsc.cmd -p tsconfig.json

Depending on your tsconfig.json, your output will normally be at :

"outDir": "./dist/out-tsc",

Now when I look at ./dist/out-tsc/src/app, I see all by TS files compiled and resulting in to JS and JS.MAP files.

Now I can run plato and it does not even hit the 1.5 GB memory as it has smaller files to look into :

plato -r -d report -e .eslintrc.json -t "MyApp" -x .json dist/out-tsc/src

and see some wonderful results:

TSLint to ESLint

As a active Angular developer, maintaining a good based is pretty important. All along, the standard was TSLint which has now been deprecated in favour of ESLint.

Luckily tools are available to do the migration at : https://github.com/typescript-eslint/typescript-eslint

Unfortunately the documentation is not elaborate and did not work for me. So wanted to note down what worked for me.

First install / update your ESLint as it already has configured to support TypeScript:

npm install eslint --save-dev

Create the configuration file

node_modules\.bin\eslint --init

You can choose your options. I chose:

? How would you like to use ESLint? To check syntax and find problems
? What type of modules does your project use? JavaScript modules (import/export)
? Which framework does your project use? None of these
? Does your project use TypeScript? Yes
? Where does your code run? Browser, Node
? What format do you want your config file to be in? JSON
The config that you've selected requires the following dependencies:

@typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest
? Would you like to install them now with npm? Yes

Installing @typescript-eslint/eslint-plugin@latest, @typescript-eslint/parser@latest

It will create a .eslintrc.json file which will look like:

{
    "env": {
        "browser": true,
        "es6": true,
        "node": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:@typescript-eslint/eslint-recommended"
    ],
    "globals": {
        "Atomics": "readonly",
        "SharedArrayBuffer": "readonly"
    },
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaVersion": 2018,
        "sourceType": "module"
    },
    "plugins": [
        "@typescript-eslint"
    ],
    "rules": {
    }
}

Now you check your file or folder :

node_modules\.bin\eslint src\app\app.component.ts

node_modules\.bin\eslint --ext .ts,.js src/

That's all good from command line. Lets not integrate it with VS Code : 

Open File -> Preferences-> Settings -> Open Settings (JSON) (on top right corner)

Append:

"eslint.validate": [
  "javascript",
  "javascriptreact",
  { "language": "typescript", "autoFix": true },
  { "language": "typescriptreact", "autoFix": true }

]

PPP Rates

Something which I refer to but getting data in one place is tough.

Ref: https://data.worldbank.org/indicator/PA.NUS.PPPC.RF?end=2017&locations=IN&start=1990&view=chart

LOCATION	INDICATOR	MEASURE	TIME	Value	PPP	Ratio	1/x
IND	EXCH	NATUSD	2000	44.94	10.14	4.43	0.23
IND	EXCH	NATUSD	2001	47.19	10.23	4.61	0.22
IND	EXCH	NATUSD	2002	48.61	10.45	4.65	0.21
IND	EXCH	NATUSD	2003	46.58	10.64	4.38	0.23
IND	EXCH	NATUSD	2004	45.32	10.95	4.14	0.24
IND	EXCH	NATUSD	2005	44.10	11.06	3.99	0.25
IND	EXCH	NATUSD	2006	45.31	11.42	3.97	0.25
IND	EXCH	NATUSD	2007	41.35	11.76	3.52	0.28
IND	EXCH	NATUSD	2008	43.51	12.54	3.47	0.29
IND	EXCH	NATUSD	2009	48.41	13.20	3.67	0.27
IND	EXCH	NATUSD	2010	45.73	14.21	3.22	0.31
IND	EXCH	NATUSD	2011	46.67	15.11	3.09	0.32
IND	EXCH	NATUSD	2012	53.44	16.01	3.34	0.30
IND	EXCH	NATUSD	2013	58.60	16.73	3.50	0.29
IND	EXCH	NATUSD	2014	61.03	16.99	3.59	0.28
IND	EXCH	NATUSD	2015	64.15	17.15	3.74	0.27
IND	EXCH	NATUSD	2016	67.20	17.52	3.83	0.26
IND	EXCH	NATUSD	2017	65.12	17.73	3.67	0.27
IND	EXCH	NATUSD	2018	68.40	18.88	3.62	0.28