About ES Lint

This is an article about ESLint.

This time around, we’re modifying the settings in the eslintrc.json file and formatting the code around it, with the goal of enforcing Eslint-related rules in our project.

During the process of formatting, we learned some things that we would like to share with you. First, a little background on our team’s project. Our project originally had a weak ESLINT setup, which meant that ESLINT was already installed in our project’s dependencies.

The issue starts here.

issue

When formatting, we were given the eslintrc.json and package.json files to change. I thought that since eslint was already installed, I would only need to change the configuration file and perform the formatting via the lint command. However, in the package.json file, there were dependency codes like “@typescript-eslint/eslint-plugin”. So my thought was, “I already have eslint installed, do I need to install the dependencies separately?” I thought.

So I know I do, but just to be sure, I did some learning.

What is ESLint?

ESLint itself provides code style rules, general JavaScript rules, ECMAScript version-specific rules, and more. However, rules for some specific cases or frameworks may not be included in ESLint’s built-in rules. In these cases, you can enable additional rules by installing an ESLint plugin for that framework or library.

Now that we know about ESLint, why install a separate ESLint-specific plugin as a dependency?

Why install a separate ESLINT plugin?

1. Framework/library specific rules: Certain frameworks or libraries may have their own rules. For example, a React application might have a JSX syntax, rules for using React hooks, etc. You can enable these React-specific rules by installing the React-specific ESLint plugin, eslint-plugin-react.
2. Community contributions: You may want to use custom rules or plugins developed by a specific project or community. You can install these plugins to take advantage of additional rules provided by the community. For example, you can install the @typescript-eslint/eslint-plugin plugin, which provides TypeScript-specific ESLint rules.
3. Project requirements: Specific projects or teams may want to define their own rules to maintain consistent code style and quality. In this case, you can install a plugin that enables those rules to define and manage custom rules for your team or project.

Conclusion

ESLint plugins provide additional rules, settings, and extensions, giving developers the flexibility to extend and adapt ESLint to their specific framework, library, and project needs.