@j1n/lint-a-lot v0.2.0

Lint-a-lot

The purpose of this package is to wrap common eslint and stylelint extensions in order to set them up as quickly as possible for a angular-project. Also this project contains a .editorconfig that should be used.

Table of Contents

• Get started
  • Install
  • ESLint
  • Stylelint
  • Editorconfig
  • IDE-setup
  • Test locally
• Publish a new version
• TODO / Improvement
• 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:

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

module.exports = tseslint.config(
  {
    files: ["**/*.ts"],
    extends: [
      lal.esLintConfig.configs.angular.tsRecommended,
    ],
  },
  {
    files: ["**/*.html"],
    extends: [
      lal.esLintConfig.configs.angular.htmlRecommended,
    ],
  }
);

Stylelint

In stylelint.config.js:

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

module.exports = 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

TODO / Improvement

• Optimise ci/cd (do not build twice)
• include eslint-plugin-jest
• write an init-script that sets up everything

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