Илья

У меня в проектах это так сделано:

"husky": {
        "hooks": {
            "pre-commit": "lint-staged"
        }
    },
    "lint-staged": {
        "!(_*).scss": [
            "csscomb --tty-mode",
            "stylelint --fix --color --config ./.stylelintrc",
            "git add"
        ],
        "*.js": [
            "eslint --fix --color",
            "prettier --write",
            "git add"
        ]
    },

И все отлично работает. Файлы с префиксом _, например _filename.scss, csscomb пропускает.

P.S. можно по-порядку указать, какие инструменты использовать перед коммитом, т.к. это просто cli-интерфейс, как будто командная строка.

Prettier не умеет расставлять порядок свойств. Это вообще очень простой инструмент, который заботится только о базовом форматировании.

То, что вам нужно, реализуется средствами stylelint и его плагина stylelint-order.
Вот очень толковая статья, после прочтения которой вопросов не должно остаться.

$oldTime = strtotime('10:30');
$newTime = date("H:i", strtotime('+10 minutes', $oldTime));

php sandbox

Сначала группируете данные:

const grouped = Object.entries(list.reduce((acc, n) => (
  (acc[n.part] = acc[n.part] || []).push(n.title),
  acc
), {}));

Потом можно html собрать:

document.body.insertAdjacentHTML('beforeend', grouped
  .map(([ k, v ]) => `<div>${k}</div>${v.map(n => `<div>${n}</div>`).join('')}`)
  .join('')
);

Или создать элементы напрямую:

document.body.append(...grouped.flat(2).map(n => {
  const div = document.createElement('div');
  div.innerText = n;
  return div;
}));

const data = list.reduce((acc, {title, part}) => {
  acc[part] = acc[part] || [];
  acc[part].push(title); 
  return acc;
}, {});


Object.entries(data).forEach(([part, titles]) => {
  [part, ...titles].forEach((item) => {
    const div = document.createElement('div'); 
    div.textContent = item; 
    document.body.appendChild(div);
  });
});

1. Жестокий хардкодинг.

subtopicList1: false,
subtopicList2: false,

Что там в пропущенных частях кода даже сложно представить. JSX тоже похоже выводится для каждой темы отдельно. Лучше все повторяющиеся части делать в цикле

2. Вместо

data-subtopic-list="subtopicList1"
 onClick={handleTopicClick}

лучше просто написать

onClick={e => { e.preventDefault(); handleTopicClick('subtopicList1'); }}

и

const handleTopicClick = subtopicList => {
  setSubtopicLists({
    ...subtopicLists,
    ...{ [subTopicList]: !subtopicLists[subTopicList] }
  });
};

Первый вариант однозначно лучше, так как родитель теперь не знает про имплементацию детей. Но почему бы вам не инкапсулировать логику внутри Counter в кастомный хук? Он будет использоваться только компонентом Counter, так код будет ещё чище — родитель не знает про имплементацию детей, компонент Counter прост, а внутренняя логика этого компонента описана внутри кастомного хука.

По поводу «сделать лучше»: сделайте две переменных стейта внутри app и передавайте каждому счётчику свои [countN, setCountN] — зачем счётчикам знать про другие счётчики? Тогда внутри счетчика будет меньше кода — нужно обрабатывать данные для конкретно этого счетчика, без необходимости делать setValues({ ...values, })

prompt() - всегда возвращает строку. Но это может быть строка с символом числа: "3" например.
Надо попытаться перевести ее в строку: Number(n) - получим либо число, либо NuN. Например Number("2") даст 2, а Number("a") даст NaN
Чтобы проверить, что в переменной NaN надо вызвать Number.isNaN. Number.isNaN(2) даст false, Number.isNaN(NaN)
В итоге получаем

var n=prompt();
if(Number.isNaN(Number(n)))
alert('Это строка');

Для решения проблемы необходимо понять порядок правил и параметров в компоненте

import React from 'react';
import styled from 'styled-components';

const Column = styled.div`
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
`;

const columnCount = 12;

const ColumnStyled = styled(Column)`    
            
    ${props => props.xs ?
        `
        @media (min-width: 576px) {
            flex: 0 0 ${(100 / columnCount) * props.xs}%;
            max-width: ${(100 / columnCount) * props.xs}%;
        }
        `
        :
        ''
    }
    
    ${props => props.sm ?
    `
        @media (min-width: 768px) {
            flex: 0 0 ${(100 / columnCount) * props.sm}%;
            max-width: ${(100 / columnCount) * props.sm}%;
        }
        ` 
        :
        ''
    }
    
    ${props => props.md ?
    `
        @media (min-width: 992px) {
            flex: 0 0 ${(100 / columnCount) * props.md}%;
            max-width: ${(100 / columnCount) * props.md}%;
        }
        ` 
        :
        ''
    }
    
    ${props => props.lg ?
        `
        @media (min-width: 1200px) {
            flex: 0 0 ${(100 / columnCount) * props.lg}%;
            max-width: ${(100 / columnCount) * props.lg}%;
        }
        ` 
        :
        ''
    }
`;

export default (props) => {
    return (
        <ColumnStyled lg={8} md={4} sm={4} xs={4}>
            { props.children }
        </ColumnStyled>
    )
}

вот прям всегда такой формат? тогда можно тупо в лоб в цикле

s = 'Arthur Conan Doyle – The Adventures of Sherlock Holmes, George Newnes 1892'
author = s.split('–')[0].trim()
by = s.split('–')[1].trim()
last = by.lastIndexOf(' ')
book = by.slice(0, l).trim()
year = by.slice(l).trim()

UPD
ах, это про php вопрос, в нем я не силен :) ну как-то так же можно по любому тоже

Mamp, xampp и прочие это не веб-серверы, а наборы программ с панелью управления. Все они содержат в себе веб-сервер Apache, СУБД MySQL и интерпретатор PHP.
Поэтому вообще не важно какую именно сборку вы выберете. На начальном этапе между ними нет никакой разницы - включил и работает. Дальше либо придётся копать глубже и вы полюбому будете пробовать разное и даже научитесь работать напрямую с программами. Либо глубже копать не придётся и тогда тем более не важно что вы поставите.

// Вариант 1. Привязываем контекст и первые по порядку параметры
function someFunk(a, b, event) {
	console.log(a, b, event);
}
element.addEventListener('click', someFunk.bind(null, 1, 2));

// Вариант 2. Используем интерфейс EventListener
function someFunk(event) {
	console.log(this.a, this.b, event);
}
element.addEventListener('click', {handleEvent: someFunk, a: 1, b: 2});

За всю свою практику продолжительностью более 20 лет я прочитал только одну книжку по программированию, это был Фигурнов про программирование на паскале под ДОС, и это было в середине девяностых... С тех пор читаю только документацию и то по мере необходимости.

Обычно всегда ситуация так складывалась, что приходилось сначала ввязываться в бой, а по ходу уже разбираться что к чему, как, зачем и почему. В результате в начале было катастрофически сложно, зато сразу изучаешь только актуальные вещи. К тому же вырабатывается привычка постоянно искать и находить, осмыслять, переиначивать и использовать.

В первые годы любой начинающий программист должен бессовестно красть чужой код и препарировать его, пытаясь понять ход мысли более опытных товарищей. Это гораздо лучше, чем витать в облаках, считая что прочитал умную книжку и все в порядке.

В общем критерий истины - практика и никак иначе.

Я не говорю что книжки читать не нужно - нужно. А вот уповать на книжки и надеяться на мощный обучающий эффект - это вряд ли. Память устроена таким образом, что сохраняет в себе только то, что действительно очень нужно, а все остальное отвалится так или иначе, практически сразу или чуть позже.

Поэтому выбери себе проект, и начинай делать. Сначала будет все плохо, непонятно и вообще адский адов ад. И только если тебе хватит упорства и настойчивости, усидчивости, концентрации и везения, то, постепенно, все начнет меняться.

Короче говоря ключевое слово тут ДЕЛАТЬ, а все остальное - лишь вспомогательные элементы.

ЗЫ: Я встречал немало народу, почитавших книжек, прошедших курсов, знающих команды, но не умеющих их использовать, в результате не способных программировать. Для того, чтобы программировать, т.е. транслировать машине свою волю, на понятном ей языке, необходимо иметь эту самую волю для начала, а остальное уже приложится по ходу дела.