Lint-a-lot

Lint-a-lot is an opinionated ESLint and Stylelint configuration for Angular projects using modern Flat Config. Also this project contains a .editorconfig that should be used.

Table of Contents

• Get started
  • Install
  • ESLint
  • Stylelint
  • Editorconfig
  • Test locally
• Publish a new version
• Rules overview
  • Es-lint angular.tsRecommended and angular.htmlRecommended
    • Custom rules
    • Extended packages
  • Stylelint

Get started

Install

Add dependency

npm i --save-dev @j1n/lint-a-lot

This lib supports .cjs and .mjs.

ESLint

In eslint.config.js:

CommonJS

const lal = require("@j1n/lint-a-lot");

module.exports = [
  ...lal.esLintConfig.configs.angular.tsRecommended,
  ...lal.esLintConfig.configs.shared.testingVitestRecommended,
  ...lal.esLintConfig.configs.angular.htmlRecommended,
];

Module

import lal from '@j1n/lint-a-lot';

export default [
  ...lal.esLintConfig.configs.angular.tsRecommended,
  ...lal.esLintConfig.configs.shared.testingVitestRecommended,
  ...lal.esLintConfig.configs.angular.htmlRecommended,
]

Check if you have a builder for eslint in your angular.json:

{
  "lint": {
    "builder": "@angular-eslint/builder:lint",
    "options": {
      "lintFilePatterns": [
        "src/**/*.ts",
        "src/**/*.html",
        "e2e/**/*.ts"
      ]
    }
  }
}

Stylelint

In stylelint.config.js:

CommonJS

const lal = require("@j1n/lint-a-lot");

module.exports = lal.stylelintConfig;

Module

import lal from '@j1n/lint-a-lot';

export default lal.stylelintConfig;

Editorconfig

Move the .editorconfig file to the root of you project.

IDE-setup

See IDE-setup.

Test locally

If you want to test this library you can use npm pack. This will result in the creation of a .tgz-file.

1. Go to the project where you want to use lint-a-lot.
2. Open package.json
3. Add lint-a-lot to devDependencies -> json "@j1n/lint-a-lot": "file:<PATH_TO_YOUR_TGZ_FILE>",
4. Remove node_modules-Dir
5. Remove package-lock.json
6. Run npm i
7. Restart IDE (especially vscode)

Publish a new version

• apply your changes
• merge your branch containing the changes to main
• create new branch from main with bump: version versionumber old → versionumber new
• run cz bump to increase version
• run git push origin --tags
• merge to main
• start publish pipeline manually

Rules overview

Overview of rules and used plugins/configs.

Es-lint angular.tsRecommended and angular.htmlRecommended

Custom rules

• eslint-no-console
• eslint-no-alert
• eslint-no-debugger
• eslint-eqeqeq
• eslint-yoda
• eslint-radix
• typescript-eslint-explicit-function-return-type
• typescript-eslint-naming-convention

Extended packages

• eslint-plugin-prettier
• typescript-eslint
• angular-eslint
• eslint-plugin-jasmine
• eslint-plugin-import

Stylelint

⚠️ CAUTION: stylelint-no-unsupported-browsers-features is normally only a css linting plugin. It configured to ignore most of the rules that are overlapping with scss - if you think this lib would be better without this plugin let me know

• stylelint-config-standard-scss, details
• stylelint-order
• stylelint-config-clean-order
• stylelint-no-unsupported-browsers-features
• stylelint-prettier
• stylelint-plugin-logical-css