ElderByte Code Style

This package contains shared frontend code style rules for Prettier, ESLint and TypeScript..

Installation

npm install @elderbyte/code-style --save-dev

Instructions for IDE setup

All repos should use the shared web-code-style package for frontend linting and formatting.

To add this to a service you may copy the setup ngx-components master or follow the instructions below.

This issue replaces https://gitlab.com/elderbyte/shelf/eldorado/-/issues/80

Steps Necessary

In your web root run the following command

npm install @elderbyte/code-style --save-dev

Prettier

In the projects web root should only be the following prettier config: .prettierrc.js with this linet:

module.exports = require('@elderbyte/code-style/src/prettier/elder-prettier-config.js')

Eslint

In your projects web root should only be the following eslint config file: .eslintrc.json and it typically looks like the following example from ngx-components.

{
  "extends": "./node_modules/@elderbyte/code-style/src/eslint/.eslintrc.json",
  "overrides": [
    {
      "files": ["**/.ts"],
      "rules": {
        "@angular-eslint/directive-selector": [
          "error",
          {
            "type": "attribute",
            "prefix": ["elder", "starter"],
            "style": "camelCase"
          }
        ],
        "@angular-eslint/component-selector": [
          "error",
          {
            "type": "element",
            "prefix": ["elder", "starter"],
            "style": "kebab-case"
          }
        ]
      }
    }
  ]
}

The first line must extend the @elderbyte/code-style eslint settings ("extends": "./node_modules/@elderbyte/code-style/src/eslint/.eslintrc.json"). The "overrides" rules in the following example define projects specific rules for component / directive selector prefixes and should be adjusted as needed in the individual projects.

tsconfig

The root tsconfig.json should extend the default @elderbyte/code-style tsconfig.json settings ("extends": "./node_modules/@elderbyte/code-style/src/typescript/tsconfig.elder.json"). These settings only concern a hand full of TS code-style rules such as "strict: true". These rules can then be opted out if needed, the following is an example from ngx-components tsconfig.json:

{
  "extends": "./node_modules/@elderbyte/code-style/src/typescript/tsconfig.elder.json",
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "importHelpers": true,
    "module": "es2020",
    "esModuleInterop": true,
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "target": "ES2022",
    "useDefineForClassFields": false,
    "lib": ["es2020", "dom"],
    "paths": {
      "@elderbyte/ngx-starter": ["dist/elderbyte/ngx-starter"],
      "@elderbyte/ngx-starter/*": ["dist/elderbyte/ngx-starter/*"]
    },
    "strictNullChecks": false, // opt-out of strict check
    "noImplicitAny": false, // opt-out of strict check
    "noImplicitThis": false, // opt-out of strict check
    "noImplicitReturns": false, // opt-out of strict check
    "noImplicitOverride": false // opt-out of strict check
  }
}

Prettier format full project

To format the full codebase according to prettier rules you can add the following script to your project's package.json:

"format": "prettier --write \"src/**/*.{ts,js,json,css,scss,html}\""

This command will completely format all frontend specific files in your repo.

Using IDE plugins

VSCode

Install plugins ESLint and prettier. It's recommended to the set the prettier plugin to "format on save" benefit from auto code formatting.

IntelliJ

Install plugin "Prettier" if not already installed. ESLint should already be included in IntelliJ.

In your Prettier settings select "Automatic Prettier configuration" and make sure that the correct filetypes are listed. It is recommended in most cases to check "Run on Save" to benefit from auto-formatting.

Check your EsLint settings. The config must also be detected automatically and the files list must at least include ts and ts.

Some words on "eslint --fix"

EsLint features an automatic --fix option. Experience has shown this feature to not be as helpful as one might hope, so typically this can be ignored until a more useful way to use it is discovered in the future.