Master ESLint: A Complete Frontend Guide to Linting JavaScript Code

Why Use ESLint

JavaScript is flexible but prone to runtime errors; linting helps enforce code quality.

ESLint is a pluggable JavaScript code detection tool that can check errors and enforce style.

Installation

Install globally:

npm install -g eslint

Sample Code

class User {
    constructor(name) {
        this.name = name;
    }
    get name() {
        return this._name;
    }
    set name(value) {
        if (value.length < 5) {
            console.log('too short');
        } else {
            this._name = value;
        }
    }
    sayHi() {
        console.log('my name is : ', this.names);
    }
}
class SportMan extends User {
    constructor(name, speed) {
        super(name);
        this.speed = speed;
    }
    sayHi() {
        super.sayHi();
        console.log('speed is : ', this.speed);
    }
}
let user = new User('John');
user.sayHi();
let liu = new SportMan('刘翔', 200);
liu.sayHi();
xxx;

Run ESLint on the file: eslint classes.js Typical errors:

no-console – console statements are prohibited.

no-undef – variable ‘xxx’ is not defined.

Configuration

Initialize a config file: eslint --init Example .eslintrc.js:

module.exports = {
    env: {
        browser: true,
        es6: true
    },
    extends: 'eslint:recommended',
    rules: {
        'no-console': 'off',
        semi: ['error', 'never']
    }
};

The rule ‘no-console’: off allows console, and ‘semi’ set to never removes the need for semicolons.

IDE Integration

For Sublime Text 3, install SublimeLinter and SublimeLinter-contrib-eslint . Use ESLint-Formatter to auto‑format code.

Conclusion

Using this frontend linting setup provides immediate feedback, reduces debugging time, and gradually corrects bad coding habits.