An open API service indexing awesome lists of open source software.

https://github.com/JanKru/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.
https://github.com/JanKru/lint-a-lot

angular eslint stylelint tslint

Last synced: 9 days ago
JSON representation

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.

Awesome Lists containing this project

README

          

# 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](#get-started)
- [Install](#install)
- [ESLint](#eslint)
- [Stylelint](#stylelint)
- [Editorconfig](#editorconfig)
- [Test locally](#test-locally)
- [Publish a new version](#publish-a-new-version)
- [Rules overview](#rules-overview)
- [Es-lint `angular.tsRecommended` and `angular.htmlRecommended`](#es-lint-angulartsrecommended-and-angularhtmlrecommended)
- [Custom rules](#custom-rules)
- [Extended packages](#extended-packages)
- [Stylelint](#stylelint)

## Get started

### Install

Add dependency

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

This lib supports `.cjs` and `.mjs`.

### ESLint

In `eslint.config.js`:

#### CommonJS

```javascript
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
```javascript
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`:

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

### Stylelint

In `stylelint.config.js`:

#### CommonJS

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

module.exports = lal.stylelintConfig;
```

### Module

```javascript
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](./docs/ide.md).

### 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:",
`
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](https://eslint.org/docs/latest/rules/no-console)
- [eslint-no-alert](https://eslint.org/docs/latest/rules/no-alert)
- [eslint-no-debugger](https://eslint.org/docs/latest/rules/no-debugger)
- [eslint-eqeqeq](https://eslint.org/docs/latest/rules/eqeqeq)
- [eslint-yoda](https://eslint.org/docs/latest/rules/yoda)
- [eslint-radix](https://eslint.org/docs/latest/rules/radix)
- [typescript-eslint-explicit-function-return-type](https://typescript-eslint.io/rules/explicit-function-return-type/)
- [typescript-eslint-naming-convention](https://typescript-eslint.io/rules/naming-convention/)

#### Extended packages

- [eslint-plugin-prettier](https://www.npmjs.com/package/eslint-plugin-prettier)
- [typescript-eslint](https://www.npmjs.com/package/@typescript-eslint/eslint-plugin)
- [angular-eslint](https://github.com/angular-eslint/angular-eslint)
- [eslint-plugin-jasmine](https://www.npmjs.com/search?q=eslint%20jasmine)
- [eslint-plugin-import](https://www.npmjs.com/package/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](https://www.npmjs.com/package/stylelint-config-standard-scss), [details](./docs/stylelint-no-unsupported-browsers-features.md)
- [stylelint-order](https://www.npmjs.com/package/stylelint-order)
- [stylelint-config-clean-order](https://www.npmjs.com/package/stylelint-config-clean-order)
- [stylelint-no-unsupported-browsers-features](https://www.npmjs.com/package/stylelint-no-unsupported-browser-features)
- [stylelint-prettier](https://www.npmjs.com/package/stylelint-prettier)
- [stylelint-plugin-logical-css](https://www.npmjs.com/package/stylelint-plugin-logical-css)