@akio/eslint-plugin

Personal ESLint plugin for JavaScript, TypeScript and Angular with mainly configuration and some self-written rules. Feel free to suggest changes but I'll be keeping my tabs :)

Installation

Install via npm:

npm i --save-dev @akio/eslint-plugin

Setup

Create your .eslintrc.json file and configure it according to the steps in the Configuration section.

After ESLint is configured, run the following command:

npx akiolint checkdeps auto

This will show you all the dependencies you are missing so that your configuration can work. Executing the above command will print you an npm install command. You need to execute it.

Finally the editor needs to be restarted after installation for ESLint to properly work.

Updating

To update this package, follow all the steps of the installation guide again, except configuring the .eslintrc.json file.

For easier access, you can put the following in your package.json:

{
    "scripts": {
        "update-akiolint": "npm view @akio/eslint-plugin version && npm i --save-dev @akio/eslint-plugin@latest && akiolint checkdeps auto"
    }
}

Run npm run update-akiolint to update and check dependencies. If there's an npm install command printed, execute it.

Configuration

Put the .eslintrc.json file into the root folder of your project. Some default environments may be given, but they should be configured according to https://eslint.org/docs/user-guide/configuring#specifying-environments

For JavaScript linting

.eslintrc.json:

{
    "extends": [
        "plugin:@akio/javascript"
    ],
    "env": {

    },
    "ignorePatterns": [
        "node_modules/",
        "dist/",
        "build/"
    ]
}

For TypeScript linting

.eslintrc.json:

{
    "extends": [
        "plugin:@akio/typescript"
    ],
    "env": {
        "es2020": true,
    },
    "ignorePatterns": [
        "node_modules/",
        "dist/",
        "build/"
    ]
}

For Angular linting

.eslintrc.json:

{
    "extends": [
        "plugin:@akio/typescript",
        "plugin:@akio/angular-typescript",
        "plugin:@akio/angular-template"
    ],
    "env": {
        "es2020": true,
        "browser": true
    },
    "ignorePatterns": [
        "node_modules/",
        "dist/",
        "build/"
    ]
}

Also place the following .eslintrc.json file into the project folder of your Angular application and replace the comments with the projects component / directive prefix.

{
    "extends": "../../.eslintrc.json",
    "rules": {
        "@angular-eslint/component-selector": [
            "error",
            {
                "type": "element",
                "prefix": /* Replace with prefix for components */,
                "style": "kebab-case"
            }
        ],
        "@angular-eslint/directive-selector": [
            "error",
            {
                "type": "attribute",
                "prefix": /* Replace with prefix for directives */,
                "style": "camelCase"
            }
        ]
    }
}