angular2 tslint 경고를 중지하도록 성분의 기본 접두사를 변경하는 방법

angular2 tslint 경고를 중지하도록 성분의 기본 접두사를 변경하는 방법

Angular cli를 사용하여 Angular 2 앱을 만들 때인 것 같습니다.기본 구성 요소 접두사는 AppComponent용 app-root입니다.선택기를 다른 것으로 변경하면 "abc-root"라고 말합니다.

@Component({
  selector: 'abc-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

vcode에서 경고합니다.

[tslint] The selector of the component "AppComponent" should have prefix "app"

tslint.json 및 .angular-cli.json 파일 두 개를 수정해야 합니다. 내 접두사로 변경하려는 경우:

tslint.json 파일에서 다음 두 가지 특성만 수정하면 됩니다.

"directive-selector": [true, "attribute", "app", "camelCase"],
"component-selector": [true, "element", "app", "kebab-case"],

"app"을 "myprefix"로 변경

"directive-selector": [true, "attribute", "myprefix", "camelCase"],
"component-selector": [true, "element", "myprefix", "kebab-case"],

angular.json 파일에서 특성 접두사를 수정하기만 하면 됩니다. (6 미만의 각도 버전의 경우 파일 이름은 .angular-cli.json입니다.)

"app": [
  ...
  "prefix": "app",
  ...

"app"을 "myprefix"로 변경

"app": [
  ...
  "prefix": "myprefix",
  ...

@Salil Junior가 지적한 것처럼 두 개 이상의 접두사가 필요한 경우:

"component-selector": [true, "element", ["myprefix1", "myprefix2"], "kebab-case"],

Angular cli를 사용하여 새 프로젝트를 작성하는 경우 이 명령줄 옵션을 사용합니다.

ng new project-name --prefix myprefix

1. 사용자의angular-cli.json"prefix": "defaultPrefix"를 사용하여 Angular-cli가 구성 요소를 생성합니다.

2. 정당한tslint.json다음과 같이:

   "directive-selector": [
     true,
     "attribute",
     ["prefix1", "prefix2", "prefix3"],
     "camelCase"
   ],
   "component-selector": [
     true,
     "element",
     ["prefix1", "prefix2", "prefix3"],
     "kebab-case"
   ],
   

위해서angular 6/7앞으로 다음과 같은 일이 있을 것입니다.tslint.json마음속에/src를 저장하는 폴더tslist구성 요소 및 지시사항에 대한 규칙입니다.

{
    "extends": "../tslint.json",
    "rules": {
        "directive-selector": [
            true,
            "attribute",
            "directivePrefix",
            "camelCase"
        ],
        "component-selector": [
            true,
            "element",
            "compoenent-prefix",
            "kebab-case"
        ]
    }
}

해당 파일을 변경하면 문제가 해결됩니다.

사실 Angular CLI를 사용하면 "apps" 어레이 내에서 "prefix" 태그를 변경할 수 있습니다.angular-cli.json루트 앱에 있습니다.

"최고의 접두사"로 바꾸는 것, 이렇게.

"apps": [
  {
    "root": "src",
    "outDir": "dist",
    "assets": [
      "assets",
      "favicon.ico"
    ],
    "index": "index.html",
    "main": "main.ts",
    "test": "test.ts",
    "tsconfig": "tsconfig.json",
    "prefix": "TheBestPrefix",
    "mobile": false,
    "styles": [
      "styles.css"
    ],
    "scripts": [],
    "environments": {
      "source": "environments/environment.ts",
      "dev": "environments/environment.ts",
      "prod": "environments/environment.prod.ts"
    }
  }
]

CLI를 사용하여 새 구성 요소를 생성하는 경우ng g component mycomponent구성 요소 태그의 이름은 다음과 같습니다."TheBestPrefix-mycomponent"

각도 13:

사용한 경우ng lint린팅 프로세스를 사전 초기화하려면:

미리 생성된 데이터가 있습니다..eslintrc.json파일.

이 파일에서는 접두사가 언급되어 있으므로, 단순히 배열로 변경하면 작동합니다.

여기서 "my new prefix"를 보풀의 유효한 접두사로 추가합니다.

"rules": {
  "@angular-eslint/directive-selector": [
    "error",
    {
      "type": "attribute",
      "prefix": ["app", "mynewprefix"],
      "style": "camelCase"
    }
  ],
  "@angular-eslint/component-selector": [
    "error",
    {
      "type": "element",
      "prefix": ["app", "mynewprefix"],
      "style": "kebab-case"
    }
  ]
}

tslint.json

"구성요소-대소문자": [true, "component", "app", "component-case"]

이 'component-case'는 모든 구성 요소 선택기가 이 '-' 케이스와 함께 있어야 합니다.

예를 들어 'app-test', 'app-my'와 같은 선택기를 이렇게 가질 수 있습니다.

또한 오류와 관련하여 방금 예에서 언급한 것처럼 'app'으로 구성 요소 선택기를 시작해야 합니다.

tslint.json을 변경하면 문제가 해결되지만 tslint를 변경하는 것은 좋지 않습니다.

감사해요.

@Aniruddha가 각도 7의 변화를 지적한 덕분입니다.

를 만들다tslint.jsonsrc/app/shared확장하기 위해app/tslint.json:

{
  "extends": "../../tslint.json",
  "rules": {
    "directive-selector": [
      true,
      "attribute",
      "shared",
      "camelCase"
    ],
    "component-selector": [
      true,
      "element",
      "shared",
      "kebab-case"
    ]
  }
}

한 가지 - app.component.spec에서 공유 모듈의 구성 요소를 조롱하는 경우, 모의 선택기가 'app'으로 시작하는 대신 'shared'로 시작한다고 불평합니다.저는 그것이 말이 된다고 생각합니다. 저는 그들이 어디서 왔는지 모듈에서 제 조롱거리를 만들고 있어야 합니다.

언급URL : https://stackoverflow.com/questions/41248142/angular2-how-to-change-the-default-prefix-of-component-to-stop-tslint-warnings