Blog

I won’t be saying that you should be using a sub version but the main reason behind this post is how important code consistence is when using subversion.

If you are like me, whenever you complete a line of code, you hit your key combination to auto format your code. This is a common practice followed by many developers. The thing is, your code format is probably different than mine because we use different IDE’s or different formatting settings.

This is a pain specially when we need to track code changes across sub version systems. Having a hole file modified by a developer while only one line of code was modified is a real pain.

Here’s how I solved this issues in my team projects.

Please notice that this tools are suited for Node.js projects and Angular projects and js variant projects.

Step 1: Install Husky

npm install husky -D

Step 2: Update package.json

{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  }
}

Step 3: Install prettier

npm install prettier -D

Step 4: Create a .prettierrc file

touch .prettierrc

And add the following content

{
  "singleQuote": true,
  "tabWidth": 2,
  "useTabs": false,
  "bracketSpacing": true
}

If you have files to ignore then create a .prettierignore and specify the relative path to the files you dont want prettier to touch.

Step 5: Install tslint-config-prettier

This tool will help you setup prettier and tslint and avoid conflicts.

npm install -D tslint-config-prettier

You must update your tslint.json to include the “extends” property as follows. If you don’t have one, create it and make sure you install tslint in your project.

{
  "extends": [
    "tslint:latest",
    "tslint-config-prettier"
  ]
…

On angular projects, tslint.json is supplied by default. You will have to make some additional changes:

// add the line below to the scripts in your projects package.json
// this will allow to detect conflicts among prettier and your tslint file.
"tslint-check": "tslint-config-prettier-check ./tslint.json"


// Then run 
$ npm run ts-lint-check

// If you like me are using Angular 8, you will probably see the following conflicts.Go to your tslint.json and remove the conflicts.
- Max-line-length
- Object-literal-key-quotes
- Quotemark

To complete this guide:

// 1) Install lint-staged 

$ npm install -D lint-staged

/// or with npx

$ npx mrm lint-staged 

// This command will (if everything goes well, automatically update you package.json)

// You can check the project on github at https://github.com/okonet/lint-staged





// 2) Then make you sure you add a configuration to your package.json
{
  ...
  "lint-staged": {
    "*.ts": [
      "prettier --write",
      "git add"
    ]
  }
}

Optionally you can add a “format” script tag to your package.json

"format": "prettier --write ./src/**/*.ts"

Shipping a changelog with your app release

Everytime I build a project, I like to include very minimalistic changelog file. Here’s how to do this:

$ npm install auto-changelog

$ npm install htz-auto-changelog-tmpl

// Now let's configure the package.json

{
....
  "auto-changelog": {
    "output": "./path/to/output/changelog.txt",
    "template": "./node_modules/htz-auto-changelog-tmpl/tmpl/basic.hbs",
    "unreleased": true,
    "commitLimit": false,
    "includeBranch": []
  }
....
}




// in the above config we are using a custom template. You can also use the auto-changelog internal templates

Then make sure to add the following script to package.json scripts:

"changelog": "npx auto-changelog"

The you can run you npm run changelog whenever you want to generate your change log