Standard VS ESLint

Sorry, I've gone too far. I'm not here to persuade you to use Standard JS. My intention is to provide information and guidance on configuring JavaScript Standard Style for your team, should you agree with me or have other reasons to choose it.

I picked up standard[1] a while back for this reason, I don't want to have to think about it. It works fine, I have no complaints (took me a while to get used to not using semi-colons but now I prefer it) Same reason I use `cargo fmt` as well.

[1] https://standardjs.com/

# question 1: ? How would you like to use ESLint? … To check syntax only To check syntax and find problems ❯ To check syntax, find problems, and enforce code style # question 2: ? What type of modules does your project use? … ❯ JavaScript modules (import/export) CommonJS (require/exports) None of these # question 3: ? Which framework does your project use? … ❯ React Vue.js None of these # question 4 (select "No", because we won't add TypeScript support for this project): ? Does your project use TypeScript? › No / Yes # question 5: ? Where does your code run? … Browser ✔ Node # question 6: ? How would you like to define a style for your project? … ❯ Use a popular style guide Answer questions about your style Inspect your JavaScript file(s) # question 7 (we'll rely on Airbnb's JavaScript style guide here): ? Which style guide do you want to follow? … ❯ Airbnb: https://github.com/airbnb/javascript Standard: https://github.com/standard/standard Google: https://github.com/google/eslint-config-google # question 8: ? What format do you want your config file to be in? … JavaScript YAML ❯ JSON # the final prompt here is where eslint will ask you if you want to install all the necessary dependencies. Select "Yes" and hit enter: Checking peerDependencies of eslint-config-airbnb@latest The config that you have selected requires the following dependencies: eslint-plugin-react@^7.21.5 eslint-config-airbnb@latest eslint@^5.16.0 || ^6.8.0 || ^7.2.0 eslint-plugin-import@^2.22.1 eslint-plugin-jsx-a11y@^6.4.1 eslint-plugin-react-hooks@^4 || ^3 || ^2.3.0 || ^1.7.0 ? Would you like to install them now with npm? › No / Yes

A Thin JavaScript Document Storage with Middleware Stack

https://github.com/standard/standard/issues/384

For example, if you use https://standardjs.com/ - it will error on your second code snippet and if you ask it for an autofix - it will transfer the minus sign to the first line.

I get it. If you're just here to find a good, working ESLint configuration for a NextJS project, then look no further. Copy what's below. Although, it's probably out of date, so you can find a version that's been updated since I published this post in my open source project Historio ➡️ in Github here ⬅️.

Does the library run in production, or is it limited to development or testing environments? Vulnerabilities in libraries like mocha or eslint can typically wait, while issues in runtime-critical libraries like express need immediate action.

Use tools like ESLint with security plugins:

Today was a great day, because I got to work on integrating ESLint into our codebase! I'm a funny code monkey. I enjoy good coding practices like linting, user/technical/product documentation, testing, accessibility, and security. These are topics that are usually deprioritized over shipping working code, because code can work without any of the things I listed as my programming passions. But if all those practices are implemented the code will rarely break (or be broken) and is more reliable code. Why not create "reliable working code" from the start?

The commonly used ones in this section are ESLint and Prettier, but there are also some confusion in their usage

There are two tools for that: Prettier and ESLint.

ESLint: Also static analysis

For the linter, I chose ESLINT. I chose it because ESLINT is a very common linter for javascript code, and there's a lot of useful guides on setting it up. Here's the link for ESLINT: https://eslint.org/

ESLint is another VSCode extension and/or npm module that can be used to check for lint warnings and errors live while programming, or with a simple command run. I chose ESLint as I have chosen to have it in react projects in the past and figured it would be easy to start with. The documentation can be found here

ESLint