Research - ESLint and Prettier for Linting and Formatting

[jamescd18]

Research ESLint and Prettier for potentially using them in linting and formatting the codebase. See this article as a primer on the differences. Potentially consider alternative packages to achieve the same goals.

Put longer notes here in this issue, along with potential sample code and any other thoughts. And then you can put a couple bullets summary / thoughts in this document.

See Northeastern-Electric-Racing/NER-PM-Dashboard#114 as an excellent and thorough example.

[eshwaribhide]

1. ESLint

ESLint is advertised as the "best" linter so we should definitely use it; it seems simple to use and there is a lot of documentation. ESLint is technically a JS Linter but there is support for TS through the open source typescript-eslint.

Also, I believe there's a VSCode extension for ESLint (which can be configured to support TS), so not sure if the things below really matter unless you don't use VSCode.

Installation is simple through npm. Configuration is simple; to create starter configuration, you can make a .eslintrc file and utilize the same configuration as described in the README file for typescript-eslint.

You can also create a .eslintignore file if you have some things you don't want linted.

Then, you can run this command
npx eslint . --ext .ts which will lint all TS files and then display the results in the terminal.
Or you create a lint script in package.json and then run it (shown in this article).

[eshwaribhide]

2. Prettier

I think Prettier is a common / good choice for a formatter. It has support for TS. Also, I believe there's a VSCode extension for it, so not sure if the things below really matter unless you don't use VSCode. This article explains how to set it up and also describes some settings to add in settings.json if you use VSCode.

Otherwise, installation is simple through npm. Configuration is simple; create a prettierrc file where you add some basic settings (example settings in this article). The article also describes how you can create a formatting script in package.json and then run it to get the code formatted.

[jamescd18]

Fabulous! It looks like the only next step is to go ahead and implement ESLint and Prettier. I've created an issue for that.