A code style boilerplate for angular8
Angular TypeScriptHTMLLess CSS HTML ts
JSON Bash
TSLint tslint:recommended Angular codelyzer tslint rulescodelyzer
boolean
ng lint
ERROR: /src/app/app.component.ts[9, 16]: " should be '
command+.
> Fix: " Should be '
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
IDE .editorconfig
Angular .editorconfig
VSCode EditorConfig EditorConfig for VS Code
Editorconfig 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.json
Prettier printWidth
tsline.json
max-line-length
Prettier ng lint
tslint.json
TSLint "max-line-length
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"]
}
}
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
>
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 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
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