Angular

Angular TypeScript

VSCode Angular IDE

Angular TypeScriptHTMLLess CSS HTML ts

JSON Bash

TSLint

Angular tslint.json TSLint

TSLint tslint:recommended Angular codelyzer tslint rulescodelyzer

boolean

ng lint

ERROR: /src/app/app.component.ts[9, 16]: " should be '

TSLint

1. command+. > Fix: " Should be '
2. PROBLEMS

command+. TSLint .vscode/settings.json

{
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  }
}

tsline.json TypeScript codelyzer Angular

directive-selector****component-selector

DirecitveComponent selector app xx-editor tslint.json

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

component-class-suffix****directive-class-suffix

Component``Directive View

"component-class-suffix": [true, "Component", "View"],
"directive-class-suffix": [true, "Directive", "View"]

use-life-cycle-interface

ngOnInit

export class HeroButtonComponent implements OnInit {
  ngOnInit() {
    console.log('The component is initialized');
  }
}

interface-name

TypeScript **** I

"interface-name": [true, "never-prefix"]

// 
export interface IUser {
  id: number;
}
// 
export interface User {
  id: number;
}

TSLint IDE VSCode 4 Tab

EditorConfig

IDE .editorconfig

Angular .editorconfig VSCode EditorConfig EditorConfig for VS Code

Editorconfig Prettier

Prettier

TypeScriptHTMLLess Angular prettier VSCode Prettier - Code formatter

.prettierrc .prettierignore Editorconfig Prettier

# .editorconfig
indent_size = 4

# .prettierrc
{
  "tabWidth": 2
}

Tab 2 Prettier **** EditorConfig tabWidth``useTabs``endOfLine

Prettier

{
  // 
  "printWidth": 140,
  // 
  "semi": true,
  // 
  "singleQuote": true,
  // 
  "trailingComma": "all"
}

Markdown . prettierignore

*.md

.vscode/settings.json

{
  "editor.formatOnSave": true
}

Prettier TSLint

Prettier tslint.json Prettier printWidth tsline.json max-line-length Prettier ng lint tslint.json

TSLint "max-line-length Prettier

tslint-config-prettier

tslint-config-prettier

"extends": [
  "tslint:recommended",
  "tslint-config-prettier"
]

prettier

tslint-config-prettier-check ./tslint.json

Angular max-line-length``object-literal-key-quotes``quotemark tsline.json Prettier

{
  "rules": {
    "max-line-length": [false, 140],
    "object-literal-key-quotes": [false, "as-needed"],
    "quotemark": [false, "single"]
  }
}

HTML

Prettier Angular template templateUrl

printWidth

HTML

<h1 style="color: #f50;" data-long="long" data-long-long="long" data-long-long-long="long" data-long-long-long-long="long">
  Share Component
</h1>

<h1
  style="color: #f50;"
  data-long="long"
  data-long-long="long"
  data-long-long-long="long"
  data-long-long-long-long="long"
>
  Share Component
</h1>

htmlWhitespaceSensitivity

Angular preserveWhitespaces Angular preserveWhitespaces: false strict

<h1
  style="color: #f50;"
  data-long="long"
  data-long-long="long"
  data-long-long-long="long"
  data-long-long-long-long="long"
  >Share Component</h1
>

Less

CSS stylelint stylelintstylelint-config-standard .stylelintrc

{
  "extends": [ "stylelint-config-standard" ],
  "plugins": [ ],
  "rules": { },
  "ignoreFiles": [ "src/assets/**/*" ]
}

package.json

{
  "scripts": {
    "lint:style": "stylelint 'src/**/*.less' --syntax less"
  }
}

; Missed semicolon

:host {
  width: 100px;
  height: 100px
  display: block;
}

src/app/app.component.less
 3:11    Missed semicolon   CssSyntaxError

stylelint stylelint-config-standard

Prettier

Prettier Less prettier-stylelint .stylelintrc

{
  "extends": [
    "stylelint-config-standard",
    "stylelint-config-prettier"
  ],
  "plugins": [ ],
  "rules": {
    "selector-type-no-unknown": [
      true,
      {
        "ignoreTypes": [
          "/^app-/"
        ]
      }
    ],
    "selector-pseudo-element-no-unknown": [
      true,
      {
        "ignorePseudoElements": [
          "ng-deep"
        ]
      }
    ]
  },
  "ignoreFiles": [ "src/assets/**/*" ]
}

VSCode EditorConfig for VS Code .vscode/settings.json

{
  "prettier.stylelintIntegration": true
}

Less .stylelintrc

stylelint-config-rational-order

Css stylelint-orderstylelint-config-rational-order .stylelintrc

{
  "extends": [
    "stylelint-config-standard",
    "stylelint-config-rational-order",
    "stylelint-config-prettier"
  ],
  "plugins": [
    "stylelint-order"
  ],
  "rules": { },
  "ignoreFiles": [ "src/assets/**/*" ]
}

stylelint-declaration-block-no-ignored-properties

display: inline width: 100px

{
  "plugins": [
    "stylelint-declaration-block-no-ignored-properties"
  ],
  "rules": {
    "plugin/declaration-block-no-ignored-properties": true,
  }
}

Angular VSCode

{
  "scripts": {
    "lint": "npm run lint:ts && npm run lint:style",
    "lint:ts": "tslint -p tsconfig.app.json -c tslint.json 'src/**/*.ts' --fix",
    "lint:style": "stylelint 'src/**/*.less' --syntax less --fix"
  }
}

tslint``stylelint

npm run lint CI

Git

huskylint-staged package.json

{
  "lint-staged": {
    "src/**/*.ts": [
      "npm run lint:ts",
      "git add"
    ],
    "src/**/*.less": [
      "npm run lint:style",
      "git add"
    ]
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  }
}

Commit git add

Angular8 ng-code-style-boilerplatef526a0c Angular8 Angular7.x

Angular Angular

Angular ReactVue