6

Configure Prettier and TSLint with Angular

 3 years ago
source link: https://dev.to/balajipatnam/configure-prettier-and-eslint-with-angular-1ldn
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client
Cover image for Configure Prettier and TSLint with Angular
Balaji

Posted on Feb 23

• Updated on Feb 24

Configure Prettier and TSLint with Angular

In this post we will walk through configuring Tslint and Prettier to angular project step by step.

At some point we will need a lint tool to help us identify possible errors in our code.

In this short article I will explain a practical and quick way to configure Tslint (lint used in JavaScript) coupled with Prettier (Code formatter).

As previously mentioned, Tslint has the function of identifying possible errors and making them visible and used together with Prettier and the perfect junction because Prettier corrects the error.

Note: Lint has removed in Angular 12+ versions

Step1: Add lint architect in the angular.json file

{
  "lint": {
    "builder": "@angular-devkit/build-angular:tslint",
    "options": {
      "tsConfig": [
        "tsconfig.app.json",
        "tsconfig.spec.json",
        "e2e/tsconfig.json"
      ],
      "exclude": ["**/node_modules/**"]
    }
  }
}

Enter fullscreen mode

Exit fullscreen mode

Required packages to install:

  1. tslint is an extensible static analysis tool that checks TypeScript code for readability, maintainability, and functionality errors. It is widely supported across modern editors & build systems and can be customized with your own lint rules, configurations, and formatters.

  2. prettier is an opinionated code formatter with support for Javscript, Angular,React,Vue HTML, Css

  3. tslint-config-prettier disables all conflicting rules that may cause such problems. Prettier takes care of the formatting whereas tslint takes care of all the other things.

You can read more about prettier here

Step 2: Commands to install following packages tslint , prettier and tslint-config-prettier

Npm Command

npm install --save-dev tslint tslint-config-prettier prettier

Enter fullscreen mode

Exit fullscreen mode

Yarn Command

yarn add --dev tslint tslint-config-prettier prettier

Enter fullscreen mode

Exit fullscreen mode

Step 3: Create .prettierrc file and add following code

{
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
  "trailingComma": "es5"
}

Enter fullscreen mode

Exit fullscreen mode

Step 4: Create .prettierignore file and add following code

package.json
package-lock.json
yarn.lock
node_modules

Enter fullscreen mode

Exit fullscreen mode

Step 5: Create tslint.json file and add following code

{
  "extends": ["tslint:recommended", "tslint-config-prettier"],
  "rules": {
    "align": {
      "options": ["parameters", "statements"]
    },
    "array-type": false,
    "arrow-return-shorthand": true,
    "curly": true,
    "deprecation": {
      "severity": "warning"
    },
    "component-class-suffix": true,
    "contextual-lifecycle": true,
    "directive-class-suffix": true,
    "directive-selector": [true, "attribute", "app", "camelCase"],
    "component-selector": [true, "element", "app", "kebab-case"],
    "eofline": true,
    "import-blacklist": [true, "rxjs/Rx"],
    "import-spacing": true,
    "max-classes-per-file": false,
    "max-line-length": [true, 280],
    "member-ordering": [
      true,
      {
        "order": [
          "static-field",
          "instance-field",
          "static-method",
          "instance-method"
        ]
      }
    ],
    "no-console": "error",
    "no-unused-variable": [
      true,
      {
        "ignore-pattern": "^_"
      }
    ],
    "no-empty": false,
    "no-inferrable-types": [true, "ignore-params"],
    "no-non-null-assertion": true,
    "no-redundant-jsdoc": true,
    "no-switch-case-fall-through": true,
    "no-var-requires": false,
    "object-literal-key-quotes": [true, "as-needed"],
    "quotemark": [true, "single"],
    "semicolon": {
      "options": ["always"]
    },
    "space-before-function-paren": {
      "options": {
        "anonymous": "never",
        "asyncArrow": "always",
        "constructor": "never",
        "method": "never",
        "named": "never"
      }
    },
    "typedef-whitespace": {
      "options": [
        {
          "call-signature": "nospace",
          "index-signature": "nospace",
          "parameter": "nospace",
          "property-declaration": "nospace",
          "variable-declaration": "nospace"
        },
        {
          "call-signature": "onespace",
          "index-signature": "onespace",
          "parameter": "onespace",
          "property-declaration": "onespace",
          "variable-declaration": "onespace"
        }
      ]
    },
    "variable-name": {
      "options": ["ban-keywords", "check-format", "allow-pascal-case"]
    },
    "whitespace": {
      "options": [
        "check-branch",
        "check-decl",
        "check-operator",
        "check-separator",
        "check-type",
        "check-typecast"
      ]
    },
    "no-conflicting-lifecycle": true,
    "no-host-metadata-property": false,
    "no-input-rename": true,
    "no-inputs-metadata-property": true,
    "no-output-native": true,
    "no-output-on-prefix": true,
    "no-output-rename": true,
    "no-outputs-metadata-property": true,
    "template-banana-in-box": true,
    "template-no-negated-async": true,
    "use-lifecycle-interface": true,
    "use-pipe-transform-interface": true
  },
  "rulesDirectory": ["codelyzer"]
}

Enter fullscreen mode

Exit fullscreen mode

Step 6: Add Husky and pretty-quick to run prettier in your staged files

Npm Command

npm install --save-dev husky pretty-quick

Enter fullscreen mode

Exit fullscreen mode

Yarn Command

yarn add --dev husky pretty-quick

Enter fullscreen mode

Exit fullscreen mode

Step 7: Add this code in the package.json

"husky": {
    "hooks": {
      "pre-commit": "pretty-quick --staged --check && ng lint && npm run format"
    }
  }

Enter fullscreen mode

Exit fullscreen mode

Step 8: Add followed two properties inside scripts in package.json

"scripts": {
   "lint": "ng lint",
   "format": "prettier --write ."
},

Enter fullscreen mode

Exit fullscreen mode

Usage 

npm run lint

Enter fullscreen mode

Exit fullscreen mode

Troubleshooting

When the hooks not picking while pre-commit follow below process

rm -rf .git/hooks
npm i --save-dev [email protected]

Enter fullscreen mode

Exit fullscreen mode

Conclusion

In this article, you learned how to setup Prettier and Tslint with Angular Application.

You can modify the configuration as per your needs.

Github source-code:- https://github.com/balajipatnam/angular/tree/main/lint

Suggestions are welcome to improve this package.


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK