lint.md

Lint

This project use eslint for code linting, as tslint has been deprecated and migrated to typescript-eslint, now there are good ts linting support for eslint.

Errors reported by linters won't block webpack compilation (for convenience purpose), so be aware of webpack output for compilation status.

It's confirgured with syntax and style rules, so it's both linter and formatter.

To Run Lint

• While running yarn start or yarn start:renderer, after webpack has been started, linter services will print the results to console
• Run eslint ./src/ [--fix] to lint all files.
• Configure eslint for vscode

Configure eslint for vscode

1. install dbaeumer.vscode-eslint

2. Open settings.json (press F1 and select "Open Settings (JSON)")

3. Add the following settings, it would enable eslint for js,jsx,ts,tsx, and apply autofix on save.

{
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ],
  "[javascript]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint",
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
    }
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint",
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
    }
  },
  "[typescript]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint",
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
    }
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint",
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
    }
  }
}

4. Or manually run command eslint.executeAutofix (Eslint: Fix all auto-fixable Problems).

5. Added jsx?/tsx? in .prettierignore, As it would conflict with eslint

When configured as above, after coding and press ctrl/cmd + s to save to auto-fix all autofix-able problems (most are styling issues). Problems that can't be auto-fixed would need a manual fix.