When it comes Linters for TypeScript, the first one that comes to mind is TSLint. TSLint is an extensible static analysis tool, like so many Linters that check TypeScript code. Linters are used to enforce a strict and consistent code style in a project and to check for some simple yet common programming errors. This improves the readability and maintainability of the code.

TSLint is supported by VS Code and other modern editors and build systems. Another interesting feature is that TSLint can be customized with rules you might want to create.

Currently, TSList is available at https://palantir.github.io/tslint/, and the process we will follow to install it is really easy. You just have to go to your Terminal and use npm:

$ npm install tslint typescript -g

The output should be something similar to the following:

/usr/local/bin/tslint -> /usr/local/lib/node_modules/tslint/bin/tslint
/usr/local/bin/tsserver -> /usr/local/lib/node_modules/typescript/bin/tsserver
/usr/local/bin/tsc -> /usr/local/lib/node_modules/typescript/bin/tsc
+ [email protected]
+ [email protected]
added 40 packages from 20 contributors and updated 1 package in 26.926s

To check whether TSLint was installed successfully, check its version:

$ tslint -v

You should be able to see the currently installed version as output.

Now, it is time to add a TSLint extension to the Visual Studio Code (VS Code) editor. For that, you just have to go to the extension options on Visual Studio Code and type in tslint. There will be dozens of different Linters to choose from. We decided to go with TSLint from egamma, which can be found at https://github.com/Microsoft/vscode-tslint:

To install it, click Install and wait for it to complete. When it finishes, click on Reload to Activate:

Now, it is time to test the TSLint plugin. Create a new folder called my-first-tslint-app and run the following command:

$ tsc --init

When you open it with VS Code, you should see the following structure:

The only file you should see is the tsconfig.json file, with a few default values and an extensive list of commented-out possible configurations. The cleaner version of this file, without the commented ones, might look something like this:

{
 "compilerOptions": {
 "target": "es5", 
 "module": "commonjs",
 "strict": true, 
 "esModuleInterop": true
 }
}

We will also add two more there—outDir, which is going to say where compiled files go, and sourceMap, which is used to generate source maps:

{
  "compilerOptions": {
    "target": "es5", 
    "module": "commonjs",
    "strict": true, 
    "esModuleInterop": true,
    "outDir": "dist",
    "sourceMap": true
  }
}

After that, you can create an index.ts file by right-clicking on the explorer view:

It should have the following content:

const message = 'default message';

export function hello(word: string = message): string {
  return `Hello ${message}! `;
}

Now, go to the top navigation menu and click on Terminal | New Terminal:

You will see the Terminal as shown:

To compile the code, run the following command in your Terminal:

$ tsc

The output will be visible through the dist folder, that is, the index.js and index.js.map files:

You can also set the tsc command to run every time that the code changes, also known as watch mode, rather than running the tsc command manually every time a change is made:

$ tsc -w

To get TSLint into this code, run the following command in the my-first-tslint-app folder:

$ tslint --init

This command will initialize TSLint for this application by adding a new file called tslint.json:

{
    "defaultSeverity": "error",
    "extends": [
        "tslint:recommended"
    ],
    "jsRules": {},
    "rules": {},
    "rulesDirectory": []
}

After that, if you go to the index.ts file again, you should see two messages from TSLint there:

• [tslint] ' should be " [quotemark]:

• [tslint] file should end with a newline [eofline]:

Let's say that we agree with the first message. Let's fix it by changing the single quotes to double quotes:

const message = "default message";

export function hello(word: string = message): string {
  return `Hello ${message}! `;
}

However, we don't agree with the second lint. To remove this validation, we can simply add a new rule to the tslint.json file, like so:

{
    "defaultSeverity": "error",
    "extends": [
        "tslint:recommended"
    ],
    "jsRules": {},
    "rules": {
        "eofline": false 
    },
    "rulesDirectory": []
}

After you have saved the file, the message will disappear.

Currently, there are a lot of pre-generated Linters style available on the internet, which could be used if you configure rule by rule every time you want to create a new project. One of the most famous is the Airbnb style, and it is really easy to use it. Use the following command to do so:

$ npm install tslint-config-airbnb

From here, change the tslint.json configuration file so that it extends the Airbnb configuration instead:

{
    "defaultSeverity": "error",
    "extends": [
        "tslint-config-airbnb",
    ],
    "jsRules": {},
    "rules": {
        "eofline": false 
    },
    "rulesDirectory": []
}

To make our lives even easier, we can use gts, which is Google TypeScript style guide, and the configuration for our formatter, Linter, an automatic code fixer.

Let's test it out by creating a new folder called my-first-gts-project. In this folder, type:

$ npx gts init

The preceding command will generate everything you need to get started with a tsconfig.json file and Linting setup. This command will also generate the project's package.json file:

npx: installed 180 in 21.875s
package.json does not exist.
? Generate Yes
Writing package.json...
{ scripts:
   { test: 'echo "Error: no test specified" && exit 1',
     check: 'gts check',
     clean: 'gts clean',
     compile: 'tsc -p .',
     fix: 'gts fix',
     prepare: 'npm run compile',
     pretest: 'npm run compile',
     posttest: 'npm run check' },
  devDependencies: { gts: '^0.9.0', typescript: '~3.1.0' } }
Writing ./tsconfig.json...
{
  "extends": "./node_modules/gts/tsconfig-google.json",
  "compilerOptions": {
    "rootDir": ".",
    "outDir": "build"
  },
  "include": [
    "src/*.ts",
    "src/**/*.ts",
    "test/*.ts",
    "test/**/*.ts"
  ]
}

Writing ./tslint.json...
{
  "extends": "gts/tslint.json"
}

Writing ./.clang-format...
Language: JavaScript
BasedOnStyle: Google
ColumnLimit: 80
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN @0.0.0 No description
npm WARN @0.0.0 No repository field.

added 181 packages from 84 contributors and audited 306 packages in 5.878s
found 0 vulnerabilities

The default skeleton is as shown:

After that, create a folder under the root project folder called src and a file called index.ts:

Now, you can simply install the dependencies:

$ npm install

And we're done! We've just gone through an easy way to get started with TypeScript using TSLint configurations. At the time of writing this book, the gts framework was under development with a non-stable version.