项目初始化

ng new my-proj --directory=my-proj --create-application=false --new-project-root='' --package-manager=yarn --skip-install --strict=false

创建项目应用

若项为空项目创建应用，则该应用会被设置成默认应用，修改默认应用需要修改angular.json 的 defaultProject设置。

ng g application jd-demo-app --style=scss --routing --skip-install --strict=false

ESLint

yarn add eslint -D @typescript-eslint/parser @typescript-eslint/eslint-plugin @typescript-eslint/eslint-plugin-tslint
.eslintrc.yml

env:
  es6: true
  node: true
extends:
  - "plugin:@typescript-eslint/recommended"
parser: "@typescript-eslint/parser"
parserOptions:
  sourceType: module
  # project: 'tsconfig.json'
plugins:
  - "@typescript-eslint"
  # - '@typescript-eslint/tslint'
  - "prettier"
ignorePatterns:
  - "dist/"
  - "node_modules/"
  - "*.d.ts"
  - "*.json"
  - "*/assets/*"
rules:
  ## Coding style
  no-nested-ternary: error
  quotes:
    - error
    - single
    - avoidEscape: true
      allowTemplateLiterals: false
  comma-style:
    - error
    - last
  no-mixed-spaces-and-tabs: error
  no-trailing-spaces: error
  no-multi-str: error
  semi:
    - error
    - always
  ## Error-prone
  eqeqeq:
    - error
    - smart
  no-func-assign: error
  no-prototype-builtins: error
  no-redeclare: error
  no-sequences: error
  no-unreachable: error
  ## eslint rule no-unused-vars gonna have problem when lint typescript
  no-unused-vars: "off"
  "@typescript-eslint/no-unused-vars":
    - error
    - args: all
      argsIgnorePattern: "^_"
      vars: all
      varsIgnorePattern: "^_"
  ## -------------Prettier ---------------
  "prettier/prettier": ["warn"]
  ## -------------Override typescript-eslint recommended rules ---------------
  "@typescript-eslint/array-type":
    - error
    - default: "array"
      readonly: "array"
  # "@typescript-eslint/await-thenable": ["error"]
  "@typescript-eslint/ban-types":
    - "error"
    - extendDefaults: true
  "@typescript-eslint/no-use-before-define":
    - error
    - classes: false
  "@typescript-eslint/no-inferrable-types":
    - "off"
    - ignoreParameters: false
      ignoreProperties: false
  # "@typescript-eslint/explicit-module-boundary-types":
  #     ["error"]
  # "@typescript-eslint/no-empty-interface":
  #     ["error"]
  # '@typescript-eslint/no-explicit-any': ['warn', { 'fixToUnknown': false, 'ignoreRestArgs': true }]
  # "@typescript-eslint/no-extra-non-null-assertion":
  #     ["error"]
  # "@typescript-eslint/no-floating-promises":
  #     ["error"]
  # "@typescript-eslint/no-for-in-array":
  #     ["error"]
  # "@typescript-eslint/no-implied-eval":
  #     ["error"]
  # "@typescript-eslint/no-misused-new":
  #     ["error"]
  # "@typescript-eslint/no-misused-promises":
  #     ["error"]
  # "@typescript-eslint/no-namespace":
  #     ["error"]
  # For now the framework is using TypeScript ~2.7.0.
  # If you are not using TypeScript 3.7 (or greater), then you will not need to use this rule, as the operator is not supported.
  # "@typescript-eslint/no-non-null-asserted-optional-chain":
  #     ["error"]
  # '@typescript-eslint/no-this-alias': ['error', { 'allowDestructuring': true, 'allowedNames': ['self'] }]
  # Magic number
  # Need to turnoff ESLint rule and valid TSLint rule
  # "no-magic-numbers": ["off"]
  # '@typescript-eslint/no-magic-numbers':
  #   ['off', { 'ignoreEnums': true, 'ignoreNumericLiteralTypes': true, 'ignoreReadonlyClassProperties': true }]
  # Constructors with parameters are valid. No need to add this rule
  #"@typescript-eslint/no-empty-function":
  #   ["error", { "allow": ["constructors"] }]
  ## -------------Tslint config ---------------
  # "@typescript-eslint/tslint/config": ["error", {
  #     "rulesDirectory": ['codelyzer'],
  #     "rules": {
  #     }
  # }]

Prettier

yarn add -D prettier eslint-config-prettier eslint-plugin-prettier

.prettierrc.yml

# recommend 120
printWidth: 120

# indentation-level spaces
tabWidth: 2

# use spaces as indent lines
useTabs: false

# Add a semicolon at the end of every statement
semi: true

# Use single quotes instead of double quotes
singleQuote: true

# Change when properties in objects are quoted
# as-needed - Only add quotes around object properties where required
# consistent - If at least one property in an object requires quotes, quote all properties
# preserve - Respect the input use of quotes in object properties
quoteProps: "preserve"

# Use single quotes instead of double quotes in JSX (not for Angular)
# jsxSingleQuote: false

# Print trailing commas wherever possible when multi-line. (A single-line array, for example, never gets trailing commas.)
# es5 - Trailing commas where valid in ES5 (objects, arrays, etc.)
# none - No trailing commas
# all - Trailing commas wherever possible (including function arguments). This requires node 8 or a transform
trailingComma: "none"

# Print spaces between brackets in object literals.
bracketSpacing: true

# Put the > of a multi-line JSX element at the end of the last line instead of being alone on the next line (does not apply to self closing elements).
# false - Example
# <button
#   className="prettier-class"
#   id="prettier-id"
#   onClick={this.handleClick}>
#   Click Here
# </button>
# true - Example
# <button
#   className="prettier-class"
#   id="prettier-id"
#   onClick={this.handleClick}
# >
#   Click Here
# </button>
# jsxBracketSameLine: false

# Include parentheses around a sole arrow function parameter.
# always - Always include parens. Example: (x) => x
# avoid - Omit parens when possible. Example: x => x
arrowParens: "avoid"

# Specify which parser to use.
# Prettier automatically infers the parser from the input file path, so you shouldn't have to change this setting.
# parser: "angular"

# Specify the file name to use to infer which parser to use.
# filepath: "None"

# Prettier can restrict itself to only format files that contain a special comment, called a pragma, at the top of the file.
# This is very useful when gradually transitioning large, unformatted codebases to prettier.
# requirePragma: false

# Prettier can insert a special @format marker at the top of files specifying that the file has been formatted with prettier.
# This works well when used in tandem with the --require-pragma option.
# If there is already a docblock at the top of the file then this option will add a newline to it with the @format marker.
# insertPragma: false

# By default, Prettier will wrap markdown text as-is since some services use a linebreak-sensitive renderer,
# e.g. GitHub comment and BitBucket. In some cases you may want to rely on editor/viewer soft wrapping instead,
# so this option allows you to opt out with "never".
# proseWrap: "preserve"

# Specify the global whitespace sensitivity for HTML files, see whitespace-sensitive formatting for more info.
# css - Respect the default value of CSS display property.
# strict - Whitespaces are considered sensitive.
# ignore - Whitespaces are considered insensitive.
htmlWhitespaceSensitivity: "css"

# Whether or not to indent the code inside <script> and <style> tags in Vue files.
# Some people (like the creator of Vue) don’t indent to save an indentation level, but this might break code folding in your editor.
vueIndentScriptAndStyle: false

# "lf" – Line Feed only (\n), common on Linux and macOS as well as inside git repos
# "crlf" - Carriage Return + Line Feed characters (\r\n), common on Windows
# "cr" - Carriage Return character only (\r), used very rarely
# "auto" - Maintain existing line endings (mixed values within one file are normalised by looking at what's used after the first line)
endOfLine: "crlf"