Angular项目返回类型的esLint规则

Question

I would like to have an esLint rule to notify about the return type of the method. But I was not able to do that. I have tried this "@angular-eslint/explicit-function-return-type": "on" But no effect.Any clue and also good rules for the new Angular project?

I would like to have an error (rule) here hence no return type;

signUp() 
{
}

I like to adjust it like so after warning or error

signUp() : void
{
}

MRE:

Please see it here: https://github.com/Sampath-Lokuge/esLint

This is an Ionic/ Angular project. You can see this file: https://github.com/Sampath-Lokuge/esLint/blob/main/src/app/folder/folder.page.ts

I have default file like so:

"@angular/core": "~11.2.0",

.eslintrc.json

{
  "root": true,
  "ignorePatterns": [
    "projects/**/*"
  ],
  "overrides": [
    {
      "files": [
        "*.ts"
      ],
      "parserOptions": {
        "project": [
          "tsconfig.json",
          "e2e/tsconfig.json"
        ],
        "createDefaultProgram": true
      },
      "extends": [
        "plugin:@angular-eslint/ng-cli-compat",
        "plugin:@angular-eslint/ng-cli-compat--formatting-add-on",
        "plugin:@angular-eslint/template/process-inline-templates"
      ],
      "rules": {
        "@angular-eslint/component-class-suffix": [
          "error",
          {
            "suffixes": [
              "Page",
              "Component"
            ]
          }
        ],
        "@angular-eslint/component-selector": [
          "error",
          {
            "type": "element",
            "prefix": "app",
            "style": "kebab-case"
          }
        ],
        "@angular-eslint/directive-selector": [
          "error",
          {
            "type": "attribute",
            "prefix": "app",
            "style": "camelCase"
          }
        ]
      }
    },
    {
      "files": [
        "*.html"
      ],
      "extends": [
        "plugin:@angular-eslint/template/recommended"
      ],
      "rules": {}
    }
  ]
}

package.json

{
  "name": "A",
  "version": "0.0.1",
  "author": "A",
  "homepage": "A",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^11.2.13",
    "@angular/common": "~11.2.0",
    "@angular/core": "~11.2.0",
    "@angular/forms": "~11.2.0",
    "@angular/platform-browser": "~11.2.0",
    "@angular/platform-browser-dynamic": "~11.2.0",
    "@angular/router": "~11.2.0",
    "@capacitor/core": "2.4.7",
    "@ionic/angular": "^5.5.2",
    "aws-amplify": "^3.3.27",
    "primeicons": "^4.1.0",
    "primeng": "^11.4.0",
    "rxjs": "~6.6.0",
    "tslib": "^2.0.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.1102.4",
    "@angular-eslint/builder": "2.0.2",
    "@angular-eslint/eslint-plugin": "2.0.2",
    "@angular-eslint/eslint-plugin-template": "2.0.2",
    "@angular-eslint/template-parser": "2.0.2",
    "@angular/cli": "~11.2.4",
    "@angular/compiler": "~11.2.0",
    "@angular/compiler-cli": "~11.2.0",
    "@angular/language-service": "~11.2.0",
    "@capacitor/cli": "2.4.7",
    "@ionic/angular-toolkit": "^3.1.1",
    "@types/node": "^12.11.1",
    "@typescript-eslint/eslint-plugin": "4.16.1",
    "@typescript-eslint/parser": "4.16.1",
    "eslint": "^7.6.0",
    "eslint-plugin-import": "2.22.1",
    "eslint-plugin-jsdoc": "30.7.6",
    "eslint-plugin-prefer-arrow": "1.2.2",
    "ts-node": "~8.3.0",
    "typescript": "~4.0.2"
  },
  "description": "A"
}

Answer 1

This is a typescript-eslint rule so in your eslintrc file, you need to add the following rule to the rules section:

"rules": {
  ...
  "@typescript-eslint/explicit-function-return-type": ["error"]
}

Note, to turn this feature on, you provide an array of options including the type of error/warning instead of "on".

Answer 2

Do you have prettier installed as well? Here is what I use for IntelliJ and it works for the purpose you are requesting. Could you also post your package.json perhaps?

module.exports = {
  parser: '@typescript-eslint/parser',
  extends: ['plugin:@typescript-eslint/recommended', 'plugin:prettier/recommended'],
  parserOptions: {
    ecmaVersion: 2018,
    sourceType: 'module',
  },
  rules: {
    '@typescript-eslint/array-type': ['error', { default: 'array' }],
  },
};

EDIT: After looking at your package.json I would suggest installing prettier.