Forem: Dmytro

ReactJS: infinite scroll using IntersectionObserver

Dmytro — Sun, 16 Jul 2023 10:25:43 +0000

In this guide, we'll be creating an infinite scroll feature in a React app using the IntersectionObserver API, which currently is one of the easiest ways of implementing an adaptive infinite scroll component without any libraries like react-scroll.

Initial Setup

Assuming you already have a React project setup, we will start by creating a new component, let's call it InfiniteScroll.

import React from 'react';

const InfiniteScroll = () => {
  return (
    <div>
      <h1>Infinite Scroll Component</h1>
    </div>
  );
};

export default InfiniteScroll;

Implementing Infinite Scroll with IntersectionObserver

In the InfiniteScroll component, we need to initialize our IntersectionObserver and attach it to a marker element that will be observed.

Whenever our marker comes into view, our callback will be fired, and we can fetch more data.

import React, { useEffect, useRef } from 'react';

const InfiniteScroll = ({ fetchMoreData }) => {
  const marker = useRef();

  useEffect(() => {
    const observer = new IntersectionObserver((entries) => {
      if (entries[0].isIntersecting) {
        fetchMoreData();
      }
    });

    if (marker.current) {
      observer.observe(marker.current);
    }

    return () => observer.disconnect();
  }, []);

  return (
    <div>
      <h1>Infinite Scroll Component</h1>
      <div ref={marker}>Loading...</div>
    </div>
  );
};

export default InfiniteScroll;

In the above code, we have added a new div with a ref of marker. This is the element we'll be observing with our IntersectionObserver. When this element comes into the viewport, our callback will fire and call the fetchMoreData function.

The fetchMoreData function should be a function that fetches more data and appends it to your current list of data.

How to solve the repeating data problem?

You may have faced an issue that you keep loading the same page of data each time more data is loaded. This is caused by the fetchMoreData function being locked inside of the expression, which is passed inside IntersectionObserver. This means that this expression uses the version of fetchMoreData which was created on the very first render of the page, and it is not changed afterwards.

To fix this - you need to provide a fresh value of the fetchMoreData function each time it is called. It can easily be reached with using useRef hook.

Modify your code to look similar:

import React, { useEffect, useRef } from 'react';

const InfiniteScroll = ({ fetchMoreData }) => {
  const marker = useRef();
  const fetchMoreDataRef = useRef(fetchMoreData);

  useEffect(() => {
    const observer = new IntersectionObserver((entries) => {
      if (entries[0].isIntersecting) {
        fetchMoreDataRef.current();
      }
    });

    if (marker.current) {
      observer.observe(marker.current);
    }

    return () => observer.disconnect();
  }, []);

  return (
    <div>
      <h1>Infinite Scroll Component</h1>
      <div ref={marker}>Loading...</div>
    </div>
  );
};

export default InfiniteScroll;

By passing the fetchMoreData into useRef, we made its value to be updated, with the fresh current value all the time. This means that when the IntersectionObserver calls fetchMoreDataRef.current() - it calls the latest value of the function, which triggers loading of the new page of data.

Drawbacks of using an IntersectionObserver for infinite scroll implementation

Performance Issues: If not implemented correctly, infinite scrolling can cause performance issues. As more and more content is loaded and added to the DOM, the website can become slow and unresponsive over time. Therefore, it's essential to implement some sort of cleanup or "virtual scrolling" where off-screen elements are removed from the DOM.
SEO Challenges: Infinite scroll can be a challenge for SEO. Search engines traditionally crawl websites by following links and may not be able to fully index content that is loaded via infinite scroll. However, this can be mitigated by providing a traditional pagination fallback for search engine crawlers.
User Navigation: Infinite scroll can make it difficult for users to reach the footer of your page. If important links or information are located there, users might never see them because new content keeps loading. A potential solution can be to have a static footer or include important links elsewhere.
Browser Compatibility: IntersectionObserver is not supported in all browsers, although support is now widespread and includes all modern browsers. However, if you're developing an app that needs to support older browsers, this could be a significant drawback.

Remember, these are potential drawbacks, but many of them can be mitigated with careful planning and good implementation practices. The correct use of the IntersectionObserver API for infinite scroll really depends on your specific application and user needs.

Conclusion

We have explored how to create an infinite scroll feature in a React application using the IntersectionObserver API. By initializing an IntersectionObserver and linking it to a designated marker element, we've seen how we can progressively load more content as the user scrolls, providing a seamless user experience.

We have also addressed a common issue regarding the inadvertent reloading of the same data page by encapsulating our data fetching function (fetchMoreData) within a useRef hook. This solution ensures we always reference the latest iteration of our function, enabling us to load new pages of data consistently.

While the IntersectionObserver API provides an effective and straightforward solution, it's essential to remember that more complex apps may require more sophisticated error handling and optimization. The principles outlined here, however, will lay a solid foundation for creating an efficient and user-friendly infinite scroll feature.

As you implement these strategies in your applications, you'll be well on your way to creating a more immersive, engaging user experience that keeps your audience scrolling for more. Happy coding!

Find more interesting articles about JavaScript development On my personal website

Also, it has ukrainian translation

MongoDB: Query Writing With ChatGPT

Dmytro — Mon, 03 Jul 2023 13:56:00 +0000

Ukrainian translation

Writing effective MongoDB queries can be a complex task, requiring a deep understanding of the database's query language. However, with ChatGPT, an advanced language model developed by OpenAI, crafting accurate and efficient MongoDB queries becomes more accessible. In this article, we'll explore how ChatGPT's natural language processing capabilities can assist developers in formulating MongoDB queries through a conversational interface. By the end, you'll have the knowledge and tools to streamline your MongoDB querying process and unlock new possibilities for extracting meaningful insights from your data.

Why Should I use ChatGPT for Writing MongoDB Queries?

The complexity of the database's query language and the need for a deep understanding of its syntax and structure can make it difficult for developers to write queries accurately, especially for the beginners.

Writing queries with ChatGPT can significantly speed up the process of writing and debugging, due to the following reasons:

Instant and accurate generation of simple queries

Even the simplest MongoDB query can take a lot of time for debugging and finding the correct query operator. However, it is quite easy for ChatGPT to turn your words into the working query.

Example:

Automatic Performance Optimization

You can ask ChatGPT to automatically optimize the queries it generates. The more info you provide to him - the better optimization will be. However, even providing info about MongoDB collection indexes can benefit the generated queries.

For example, it can provide the following query:



db.products.find({ category: "Electronics" }).sort({ price: -1 })

However, it can automatically generate the query which enforces using the index for your query.



db.products.find({ category: "Electronics" }).sort({ price: -1 }).hint({ category: 1, price: -1 })

Easier Query Debugging and Rewriting

If you face any problems in debugging the query, ChatGPT can easily detect and fix the issue, even if it requires major changes. At the same time, fixing queries yourself can cause multiple new bugs and will take much more time.

Tips For Writing MongoDB Queries With ChatGPT

Provide as much necessary info, as you can

If you are going to write a complex and heavily optimized query - provide ChatGPT with a full model, if possible. Give it information about your MongoDB collection indexes, or any other nuances it should know, to perform its job.

If you write queries really often - create a template message with this info, so you can quickly paste it, and begin working immediately.

Ask ChatGPT to remove explanation from results.

Asking the AI, to remove explanations can significantly increase the speed of the generation (especially in the free version), and will not make your chat too long, so it will be easier to find old queries if you will need them.

To remove explanations - provide it with the following message: "I am going to ask you to write mongodb queries. Provide me only the queries I asked you for, wrapped in code block. I do not want you to send anything else in the response. If you understood, give me the query wich will get product with field "name" equal to "Hello World". It should not contain any explanations, as I asked."

Result:

Do not provide sensitive information to ChatGPT

Remember, the ChatGPT IS NOT CONFIDENTIAL. Never provide ChatGPT with any passwords/keys/users personal information. Even if it seems like nobody sees your queries - it doesn't mean that the message you write will not be used for training, or will not be viewed by one of the OpenAI data engineers. Moreover, the sensitive data can leak even through hackers reading your message history.

Conclusion

In conclusion, using ChatGPT can greatly simplify the process of writing MongoDB queries by leveraging its natural language processing capabilities. With instant query generation, automatic performance optimization, and easy query debugging and rewriting, developers can streamline their workflow and save time. By providing necessary information and removing explanations from results, developers can enhance the efficiency of their interactions with ChatGPT. However, it's important to note that sensitive information should never be shared with ChatGPT, as it is not confidential.

Fixing Prettier not working with VSCode

Dmytro — Fri, 09 Jun 2023 06:49:46 +0000

Ukrainian version

Problem Description

You have installed and enabled Prettier in your JS application, but Visual Studio Code does not format or highlight your code.

If you have not yet installed Prettier in your application - you can see the guide for its installation at the link

Ways of Fixing:

There are several possible problems that can occur with code analysis. Here are the main ones:

Prettier is Not Installed

Check your package.json for the Prettier version installed:

If prettier is installed, try running npm install, just in case.

Prettier Extension in VSCode is Not Installed

Make sure you have installed the Prettier extension in VSCode. If it is missing, you can find it at the link: https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

Invalid or Missing Configuration File

Check that the .prettierrc or prettier.config.js file is present and correct.

Try replacing your configuration file with another, verified file. You can use the basic config from the documentation:



{

  "trailingComma": "es5",

  "tabWidth": 4,

  "semi": false,

  "singleQuote": true

}

Prettier is Not Set as a Default Code Formatter

Go to File -> Preferences -> Settings or (Ctrl + comma). And do a search on the word formatter.

In the opened tab, select 'Default Formatter' - `Prettier'.

Disabled File Extensions or Incorrect Language Configurations

Prettier can be configured to disable parsing for certain file types - so check that the required files are not included in the prettier-ignore file.
Also, check that your file extension is spelled correctly.

Also, make sure that the settings correspond to the programming language you are using.

Conflicting VSCode Extensions

Try disabling other VSCode extensions. Conflicting extensions can interfere with Prettier.

Obsolete Prettier version

Newer versions of VSCode extensions may not support older versions of Prettier. If necessary, raise the Prettier version in package.json.

Conclusion

In this article, we looked at possible problems with the integration of Prettier and VSCode. I hope that these tips will help you solve the problems you encountered.

Using Prettier with ESLint? See also:

ESLint: Правила чи Плагіни?

Dmytro — Mon, 05 Jun 2023 12:39:23 +0000

Find this and other articles in English: https://devcenter.space/posts/eslint-rules-vs-plugins/

ESlint - це потужний інструмент для перевірки якості коду в проектах JavaScript. Однак, два основних поняття, з якими стикаються користувачі ESlint, - це "правила" та "плагіни". Давайте розберемося у відмінностях між ними.

Правила (Rules)

Правила в ESlint - це набір правил, які визначають правильний або неправильний стиль написання коду. Вони допомагають виявити потенційні проблеми в коді та стильові недоліки, такі як відсутність крапки з комою, використання неоголошених змінних, використання заборонених функцій тощо. ESlint має вбудований набір правил, які можна використовувати за замовчуванням. Проте, ви також можете налаштовувати правила згідно з власними потребами.

Наприклад, ось декілька прикладів правил:

semi - це правило вимагає використовувати крапку з комою в кінці кожного оператора.
no-console - це правило забороняє використання функції console.log() та інших методів console у продакшн-коді.

Плагіни (Plugins)

Плагіни в ESlint - це додаткові модулі, які дозволяють розширити функціональність ESlint. Вони надають додаткові правила та можливості перевірки коду, які не включені в основний набір правил. Плагіни можуть бути розроблені спільнотою ESlint або створені вами самостійно. Щоб використовувати плагін, спочатку потрібно його встановити через менеджер пакетів, такий як npm або yarn.

Наприклад, плагін eslint-plugin-react - це популярний плагін для перевірки React коду

Висновок

Правила та плагіни є важливими складовими ESlint. Правила допомагають забезпечити правильний стиль коду та виявити потенційні проблеми, тоді як плагіни дозволяють розширити функціональність ESlint та використовувати специфічні правила для конкретних технологій або фреймворків. З правильним налаштуванням правил та використанням плагінів, ви можете покращити якість свого коду та забезпечити більш однорідний стиль розробки.

Дізнайтеся більше

Як встановити ESlint: посилання.
Oфіційна документація ESlint: посилання.

Більше цікавих статей.

SEO: hreflang attribute for content with multiple translations

Dmytro — Sat, 03 Jun 2023 18:26:49 +0000

Read this article in ukrainian: https://devcenter.space/uk/posts/how-to-setup-hreflang/

What is a hreflang Attribute?

hreflang attribute is a part of the HTML tag:

<link rel="alternate" href="https://example.com" hreflang="uk-ua" />

The presence of this tag means that the page on which it is placed has translations in other languages.

This tag is intended to facilitate the indexing of your site by search engines. Google uses "hreflang" to determine which version of the page to suggest to the user.

Adding the hreflang

For example, you have a website localized in two languages: the main language - Ukrainian, and an additional one - English. In this case, your <head> tag should contain the following:

<head>
  ...
  <link rel="alternate" hrefLang="en" href={`https://example.com/en`} />
  <link rel="alternate" hrefLang="uk-UA" href={`https://example.com/uk`} />
  <link rel="alternate" hrefLang="x-default" href={`https://example.com`} />
  ...
</head>

In this example, hrefLang attributes contain locale names.

Look at the hreflang value for the Ukrainian localization: in addition to the translation language value, it also has the specified region "UA". Thus, for another region, you can create your own localization in this language. However, if the region is not important - it can be omitted, for example, both users from "en-NZ" and from "en-US" will get to the "en" locale.

The x-default value will be used by the search engine if the user's locale does not match any of the listed ones. Then the page specified in the tag with x-default will be returned to the user.

Href Attribute Value

There is a nuance related to the value of the href attribute - the link to the localized page must be absolute, along with https:// and the domain name. Google will not accept links example.com/en, /en and others.

Common Mistakes

Make sure that each version of the page has a return link to all available localization options.

Suppose we have two versions of the same page, in languages X and Y. It follows that page X should have link tags with "hreflang=X" and "hreflang=Y".

Page Y must have identical hreflang, too. If page Y does not have, for example, `hreflang=X', then Google will refuse to index it.

Check that you have entered the values exactly in ISO_639-1 format. Localization names in this standard differ from country codes. As an example, you may have already noticed that the "uk" localization means the Ukrainian localization. The British localization is indicated as "gb".
The specified locale "hreflang" must match the value specified in the <html lang=""> tag. The value of this attribute should change with localization.
Not specified or invalid x-default.
The specified relative, not the absolute value of href. Only links of the format "https://example.com/en" will be valid, not "example.com/en" or "/en".

How to Check the Validity of the hreflang on Your Website?

For automatic analysis of errors related to localization, I recommend the site https://technicalseo.com/tools/hreflang/. Although you can find more similar services by searching on Google.

More articles in my personal blog: https://devcenter.space/

ESLint: How to install and configure?

Dmytro — Thu, 01 Jun 2023 07:20:21 +0000

Read this article in ukrainian: https://devcenter.space/uk/posts/eslint-setup/

Read more articles about ESLint in my personal blog: https://devcenter.space/

What is ESLint?

ESLint is a linter for NodeJS applications. Its purpose is to automatically detect potential problems in your code. Linters, and ESLint in particular, can identify not only problems in code formatting, but also see potential bugs, problems in operation, gaps in the security of your application.

This is what makes ESLint different from the code formatting tool, Prettier, which can only find and fix code style issues, but won't tell you if your code contains an error. Prettier can be used in combination with ESLint to promote code styles. More about how to install Prettier - (in a separate article).

Installation

In order to automatically install ESLint and add all the necessary files for work, it is enough to write the following command in the terminal:



npm init @eslint/config

After entering the command, you will be asked which ESLint feature you plan to use. The selection is made with the keyboard arrows, and the selection window itself looks like this:

Based on your selection, the linter settings will be selected.

Configuration process

There is no point in describing the full process at this time, but I would like to draw your attention to a few points:

"How would you like to define a style for your project?"

In this option, I advise you to choose the guide option if you are setting up ESLint for the first time. Any settings you need can be changed after installation whenever you need.

"Which style guide do you want to follow?"

Again, for the first time I advise you to set Standard, and change if necessary.

"What format do you want your config file to be in?"

Here you can choose any of the formats. But I would like to emphasize that most articles on the Internet use the JSON format. This article will be no exception.

After the installation process, a .eslintrc.* file with the selected extension should appear in your project.

My .eslintrc.json looks like this:

ESLint plugins

ESLint, in addition to the standard set of rules, has an interface for installing add-ons (plugins) into your project. In order to use a custom plugin, you need to install it via npm/yarn, and then add the plugin to the plugins list.

An example of setting up the Prettier plugin for ESLint can be seen in the previous article.

Useful plugins for ESLint found here.

IDE support

Some IDEs require additional configuration to enable ESLint error highlighting in the editor. Plugins or guides for configuring ESLint for popular IDEs:

Summary

ESLint is a linter for NodeJS applications with extensive functionality that will help you monitor compliance with code styles in your project, help you find potential bugs or syntax errors. ESLint can be configured quite flexibly by point-editing its rules and installing external add-ons. ESLint has integration with an extensive list of development environments.

ESLint Configuration: Strictness vs Flexibility

Dmytro — Mon, 29 May 2023 06:01:14 +0000

An article from my personal blog: https://devcenter.space/

ESLint is a powerful tool for enforcing coding standards and catching potential errors in JavaScript code. When configuring ESLint rules, finding the right balance between strictness and flexibility is crucial. Overly strict rules can lead to an overwhelming number of linting errors, while being too lenient may allow problematic code to slip through. In this article, we will explore strategies for striking the ideal balance in ESLint rule configuration to ensure code quality while maintaining developer productivity.

If you still don't have the ESLint in your project - check out the ESLint installation guide

1. Understand Your Project's Requirements

Before configuring ESLint rules, it's important to understand your project's specific requirements and coding style. Consider factors such as the project's size, complexity, team dynamics, and targeted audience. A project with a large team or strict code review process might benefit from more strict rules, while a small project or prototype might prioritize flexibility to iterate quickly. Understanding the project context will guide your decision-making process.

2. Start with a Sensible Baseline Configuration

To strike the initial balance, start with a sensible baseline configuration such as eslint:recommended or a popular shareable configuration. These configurations are widely accepted and cover many best practices. They provide a solid foundation to ensure code quality without overwhelming developers with excessive rule violations. Starting with a baseline allows you to fine-tune rules based on your project's needs.

3. Customize Rules for Your Project

Every project has its unique set of requirements and coding style preferences. Customize ESLint rules to align with your project's specific needs. Enable rules that enforce coding standards relevant to your project while disabling rules that may conflict with your chosen coding style or cause excessive noise. Strike a balance between enforcing best practices and allowing developers the flexibility to work efficiently.

How to customize your ESLint rules: Official Documentation Link

4. Gradually Increase Strictness

Striving for perfection from the start may hinder productivity and create resistance from the development team. Instead, consider gradually increasing the strictness of ESLint rules over time. Begin with a conservative configuration that catches critical issues and gradually add more rules as the team becomes accustomed to the linting process. This incremental approach helps developers embrace linting while maintaining a balance between productivity and code quality.

5. Leverage Rule Severity Levels

ESLint rules have severity levels: "off," "warn," and "error." Use these levels strategically to fine-tune the balance between strictness and flexibility. Consider assigning the "warn" severity to rules that catch potential issues or deviations from coding standards, allowing developers to address them at their discretion. Reserve the "error" severity for critical issues that must be fixed before the code can be considered valid. This approach ensures flexibility while highlighting important issues.

6. Collaborate with the Development Team

ESLint rule configuration should be a collaborative effort involving the development team. Encourage discussions and feedback regarding the rules and their impact on productivity. Conduct regular meetings or open channels for developers to express their concerns or suggest rule adjustments. By involving the team, you can foster a sense of ownership and consensus on the linting rules, leading to a more balanced and effective configuration.

7. Regularly Evaluate and Refine Rules

Maintaining the balance between strictness and flexibility requires regular evaluation and refinement of the ESLint rules. As the project evolves and coding standards mature, review the rules periodically. Seek feedback from the development team and consider adjustments based on the project's needs. Keep up to date with new ESLint releases and rule updates to take advantage of improved best practices and adapt to changing coding standards.

Conclusion

In conclusion, achieving the right balance between strictness and flexibility in ESLint rule configuration is a continuous process that requires a deep understanding of your project's requirements and the dynamics of your development team. By starting with a sensible baseline configuration, customizing rules to fit your project's needs, gradually increasing strictness, leveraging rule severity levels, collaborating with the team, and regularly evaluating and refining the rules, you can strike an optimal balance that promotes code quality without hindering developer productivity. Remember that finding the sweet spot may require experimentation and adjustments over time as your project evolves. With a well-balanced ESLint rule configuration, you can maintain coding standards, catch potential errors, and foster a productive and collaborative development environment.

ESLint: Plugins vs Rules (EN)

Dmytro — Thu, 25 May 2023 19:40:07 +0000

Article from my personal blog: https://devcenter.space/

ESLint is a powerful tool for checking code quality in JavaScript projects. However, the two main concepts that ESLint users encounter are "rules" and "plugins". Let's find out the differences between them.

Rules

Rules in ESLint are a set of rules that define the correct or incorrect style of writing code. They help identify potential code problems and stylistic flaws such as missing semicolons, use of undeclared variables, use of forbidden functions, etc. ESLint has a built-in set of rules that you can use by default. However, you can also customize the rules according to your own needs.

For example, here are some examples of rules:

semi - this rule requires the use of a semicolon at the end of each statement.
no-console - this rule prohibits the use of the console.log() function and other console methods in production code.

Plugins

Plugins in ESlint are additional modules that allow you to extend the functionality of ESlint. They provide additional rules and code inspection capabilities that are not included in the core ruleset. Plugins can be developed by the ESLint community or created by you. To use a plugin, you must first install it via a package manager such as npm or yarn.

For example, the eslint-plugin-react plugin is a popular plugin for checking React code.

Summary

Rules and plugins are important components of ESlint. Rules help ensure correct code style and identify potential problems, while plugins allow you to extend ESlint's functionality and use specific rules for specific technologies or frameworks. With the right rules setup and use of plugins, you can improve the quality of your code and ensure a more consistent development style.

ESLint: Що? Чому? Де? Як?

Dmytro — Tue, 23 May 2023 17:49:57 +0000

Стаття з мого блогу: https://devcenter.space/

Що таке ESLint?

ESLint - це лінтер, для NodeJS застосунків. Його призначення - автоматично виявляти можливі проблеми у вашому коді. Лінтери, і ESLint зокрема, можуть визначати не тільки проблеми у форматуванні коду, а й бачити потенційні баги, проблеми в роботі, пробіли в безпеці вашого застосунку.

Саме цим ESLint і відрізняється від інструмента для форматування коду, Prettier, який може лише знаходити та фіксити проблеми код-стайлів, але не скаже якщо ваш код містить помилку. Prettier можна використовувати в комбінації з ESLint, для просування код-стайлів. Детальніше про те як встановити Prettier - (в окремій статті).

Встановлення та конфігурація ESLint

Для того щоб автоматично встановити ESLint та додати усі потрібні для роботи файли, достатньо прописати в терміналі наступну команду:

npm init @eslint/config

Після введення команди, вас запитає про те, який функціонал ESLint ви плануєте використовувати. Вибір здійснюється стрілками клавіатури, а саме вікно вибору виглядає так:

Відповідно до вашого вибору, будуть підібрані налаштування лінтера.

Процес налаштування

Наразі немає сенсу описувати повний процес, проте хочу звернути вашу увагу на кілька пунктів:

**"How would you like to define a style for your project?"**

В цій опції раджу обрати варіант з `guide`, якщо ви налаштовуєте ESLint вперше. Будь-які потрібні вам налаштування можна буде змінити після встановлення, коли вам це буде потрібно.



**"Which style guide do you want to follow?"**

Знову ж таки, для першого разу раджу встановити `Standard`, і змінити в разі потреби.



**"What format do you want your config file to be in?"**

Тут можете обирати будь-який з форматів. Але наголошу, що більшість статтей в інтернеті використовують саме JSON формат. Ця стаття не буде виключенням.

Після процесу установки, у вашому проекті має з'явитися .eslintrc.* файл з вибраним розширенням.

Мій .eslintrc.json виглядає так:

Плагіни ESLint

ESLint окрім стандартного набору правил, має інтерфейс для встановлення доповнень(плагінів) у ваш проект. Для того, щоб використати кастомний плагін необхідно встановити його через npm/yarn, після чого додати плагін у список plugins.

Приклад встановлення плагіна Prettier для ESLint можна побачити у минулій статті.

Корисні плагіни для ESLint можна знайти тут.

Інтеграція з IDE

Деякі IDE потребують додаткової конфігурації, щоб увімкнути підсвітку помилок ESLint у редакторі. Плагіни або гайди для налаштування ESLint для популярних IDE:

Підсумок

ESLint - лінтер для NodeJS застосунків з обширним функціоналом, який допоможе контролювати дотримання код-стилів у вашому проекті, допоможе у знаходженні потенційних багів, або помилок у синтаксисі. ESLint можна доволі гнучко налаштовувати за допомогою точкового редагування правил його роботи, та встановлення зовнішніх доповнень. ESLint має інтеграцію з обширним списком середовищ розробки.

Більше про ESLint

Різниця між Плагінами та Правилами ESLint: посилання
Oфіційна документація: посилання.

Більше цікавих статей.

Forem: Dmytro

ReactJS: infinite scroll using IntersectionObserver

Initial Setup

Implementing Infinite Scroll with IntersectionObserver

How to solve the repeating data problem?

Drawbacks of using an IntersectionObserver for infinite scroll implementation

Conclusion

MongoDB: Query Writing With ChatGPT

Why Should I use ChatGPT for Writing MongoDB Queries?

Instant and accurate generation of simple queries

Automatic Performance Optimization

Easier Query Debugging and Rewriting

Tips For Writing MongoDB Queries With ChatGPT

Provide as much necessary info, as you can

Ask ChatGPT to remove explanation from results.

Do not provide sensitive information to ChatGPT

Conclusion

Fixing Prettier not working with VSCode

Problem Description

Ways of Fixing:

Prettier is Not Installed

Prettier Extension in VSCode is Not Installed

Invalid or Missing Configuration File

Prettier is Not Set as a Default Code Formatter

Disabled File Extensions or Incorrect Language Configurations

Conflicting VSCode Extensions

Obsolete Prettier version

Conclusion

Using Prettier with ESLint? See also:

ESLint: Правила чи Плагіни?

Правила (Rules)

Плагіни (Plugins)

Висновок

Дізнайтеся більше

SEO: hreflang attribute for content with multiple translations

What is a hreflang Attribute?

Adding the hreflang

Href Attribute Value

Common Mistakes

How to Check the Validity of the hreflang on Your Website?

ESLint: How to install and configure?

What is ESLint?

Installation

Configuration process

ESLint plugins

IDE support

Summary

Read more about ESLint

ESLint Configuration: Strictness vs Flexibility

1. Understand Your Project's Requirements

2. Start with a Sensible Baseline Configuration

3. Customize Rules for Your Project

4. Gradually Increase Strictness

5. Leverage Rule Severity Levels

6. Collaborate with the Development Team

7. Regularly Evaluate and Refine Rules

Conclusion

Read more about ESLint

ESLint: Plugins vs Rules (EN)

Rules

Plugins

Summary

More on this topic

ESLint: Що? Чому? Де? Як?

Що таке ESLint?

Встановлення та конфігурація ESLint

Процес налаштування

Плагіни ESLint

Інтеграція з IDE

Підсумок

Більше про ESLint