Project initialization

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

Creating the project application

If an application is created as an empty project, it will be set as the default application. Modifying the default application requires modifying the angular.json defaultProject Settings.

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

ESLint

yarn add -D eslint @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": {
  #}
  #}]
Copy the code

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"
Copy the code