Discussion on: Migrating and configuring Eslint with Angular 11

[John Tsombakos]

Unless I miss something, it looks like this change removes the TSlint requirement of semi-colons on the end of lines? And mis-aligned statements (whitespace)? Is there a way to get this back?

[Giovanni Sarciotto]

This config enforces semi-colons at the end of lines and should fix alignment with Prettier. Did you run the eslint command or are trying to see in your editor? In the latter case, install the eslint extension to allow for the editor to lint when you save etc

[John Tsombakos]

I didn’t install the prettier part (I don’t like it’s default settings and some I can’t configure). I have the eslint extension in VSCode but it does not show an error if I don’t have a semi. Before I made the changes you suggest for the “recommended” settings, it does show a message for missing semi’s. Once I made the changes, that setting is not there. I had to copy the rule from the “all” rules into my eslint config to get it to work. I also could not get it to mark mis-aligned lines (though formatting the document fixes that)

[Giovanni Sarciotto]

Fair enough, maybe eslint-angular is disabling these rules since I know that at least the semi one is enabled by @typescript-eslint/recommended, will check it out later. Glad you could figure it out tho!

[John Tsombakos]

As far as I can see, looking through the rules, semi is not enabled by @typescript-eslint/recommended

rules: {
        '@typescript-eslint/adjacent-overload-signatures': 'error',
        '@typescript-eslint/ban-ts-comment': 'error',
        '@typescript-eslint/ban-types': 'error',
        '@typescript-eslint/explicit-module-boundary-types': 'warn',
        'no-array-constructor': 'off',
        '@typescript-eslint/no-array-constructor': 'error',
        'no-empty-function': 'off',
        '@typescript-eslint/no-empty-function': 'error',
        '@typescript-eslint/no-empty-interface': 'error',
        '@typescript-eslint/no-explicit-any': 'warn',
        '@typescript-eslint/no-extra-non-null-assertion': 'error',
        'no-extra-semi': 'off',
        '@typescript-eslint/no-extra-semi': 'error',
        '@typescript-eslint/no-inferrable-types': 'error',
        '@typescript-eslint/no-misused-new': 'error',
        '@typescript-eslint/no-namespace': 'error',
        '@typescript-eslint/no-non-null-asserted-optional-chain': 'error',
        '@typescript-eslint/no-non-null-assertion': 'warn',
        '@typescript-eslint/no-this-alias': 'error',
        'no-unused-vars': 'off',
        '@typescript-eslint/no-unused-vars': 'warn',
        '@typescript-eslint/no-var-requires': 'error',
        '@typescript-eslint/prefer-as-const': 'error',
        '@typescript-eslint/prefer-namespace-keyword': 'error',
        '@typescript-eslint/triple-slash-reference': 'error',
    },

which extends:

           rules: {
                'constructor-super': 'off',
                'getter-return': 'off',
                'no-const-assign': 'off',
                'no-dupe-args': 'off',
                'no-dupe-class-members': 'off',
                'no-dupe-keys': 'off',
                'no-func-assign': 'off',
                'no-import-assign': 'off',
                'no-new-symbol': 'off',
                'no-obj-calls': 'off',
                'no-redeclare': 'off',
                'no-setter-return': 'off',
                'no-this-before-super': 'off',
                'no-undef': 'off',
                'no-unreachable': 'off',
                'no-unsafe-negation': 'off',
                'no-var': 'error',
                'prefer-const': 'error',
                'prefer-rest-params': 'error',
                'prefer-spread': 'error',
                'valid-typeof': 'off', // ts(2367)
            },

the no-extra-semi rule just warns if there is more than one semi-colon (;;)

[John Tsombakos]

This is what I had to add to my eslintrc.json to get the behavior I wanted:

"@typescript-eslint/member-delimiter-style": [
"error",
{
"multiline": {
"delimiter": "semi",
"requireLast": true
},
"singleline": {
"delimiter": "semi",
"requireLast": false
}
}
],
"quotes": "off",
"@typescript-eslint/quotes": [
"error",
"single",
{
"allowTemplateLiterals": true
}
],
"@typescript-eslint/semi": [
"error",
"always"
],

(copied from ./node_modules/@angular-eslint/eslint-plugin/dist/configs/ng-cli-compat--formatting-add-on.json)