Size: a a a

2021 March 15

Вт

Ві тя in Frontend UA
источник

PD

Petya Danchuk in Frontend UA
Можно ли сделать так чтобы Prettier добавлял пустую строку перед
функциями уровня вложенности 1 и 2. Он вообще умеет различять уровни вложенности?
const globalFunc = () => { // это глобальная для файла
 const var1 = "var1";
 const intoFunc1 = () => { // это первая вложенная
   const var2 = "var2";
 };
};
// хотелось бы чтоб он делал такое

const globalFunc = () => {
 const var1 = "var1";

 const intoFunc1 = () => {
   const var2 = "var2";
 };
};
источник

RV

Roman V in Frontend UA
Petya Danchuk
Можно ли сделать так чтобы Prettier добавлял пустую строку перед
функциями уровня вложенности 1 и 2. Он вообще умеет различять уровни вложенности?
const globalFunc = () => { // это глобальная для файла
 const var1 = "var1";
 const intoFunc1 = () => { // это первая вложенная
   const var2 = "var2";
 };
};
// хотелось бы чтоб он делал такое

const globalFunc = () => {
 const var1 = "var1";

 const intoFunc1 = () => {
   const var2 = "var2";
 };
};
Так это не функции, это переменные к которым присвоили стрелочную функцию. И притиер вероятно пытается просто объявление переменных скомбинировать в один блок. Если такая запись через присвоение стрелочной функции не сделана с определенной целью, а "потому что могу", то лучше написать с нормальным синтаксисом function
источник

PD

Petya Danchuk in Frontend UA
Roman V
Так это не функции, это переменные к которым присвоили стрелочную функцию. И притиер вероятно пытается просто объявление переменных скомбинировать в один блок. Если такая запись через присвоение стрелочной функции не сделана с определенной целью, а "потому что могу", то лучше написать с нормальным синтаксисом function
я раньше функции стандартно декларировал. сейчас начал на реакте писать, но там почему-то все пишут стрелочные внутри компонентов. вот и я начал чтоб белой вороной не быть. мда. не подумал я о том что это же переменная...
источник

PD

Petya Danchuk in Frontend UA
не подскажете может есть еще инструменты какие для подобных задач? я только Prettier пользовался. знаю ESLint есть но он вроде для других задач
источник

AL

Andrey Listochkin in Frontend UA
Petya Danchuk
я раньше функции стандартно декларировал. сейчас начал на реакте писать, но там почему-то все пишут стрелочные внутри компонентов. вот и я начал чтоб белой вороной не быть. мда. не подумал я о том что это же переменная...
там так делают, чтобы this.eventHandler.bind(this) в пропсах не писать
источник

PD

Petya Danchuk in Frontend UA
Andrey Listochkin
там так делают, чтобы this.eventHandler.bind(this) в пропсах не писать
сейчас нет. сейчас на функциональных компонентах пишут с хуками. хотя может это простоу всех привычка осталась когда на классах еще писали 😊
источник

EO

Eugene Obrezkov in Frontend UA
Petya Danchuk
не подскажете может есть еще инструменты какие для подобных задач? я только Prettier пользовался. знаю ESLint есть но он вроде для других задач
ESLint тоже форматтером может быть и больше гибкости в настройке даёт

Но я сомневаюсь что он сделает что нужно. Если сильно надо, можно под него плагин сделать
источник

RV

Roman V in Frontend UA
Petya Danchuk
я раньше функции стандартно декларировал. сейчас начал на реакте писать, но там почему-то все пишут стрелочные внутри компонентов. вот и я начал чтоб белой вороной не быть. мда. не подумал я о том что это же переменная...
Как выше сказали, там стрелочные функции строго с определенной целью пишут, чтобы this не менялся.
источник

VS

V7v S6k in Frontend UA
Petya Danchuk
Можно ли сделать так чтобы Prettier добавлял пустую строку перед
функциями уровня вложенности 1 и 2. Он вообще умеет различять уровни вложенности?
const globalFunc = () => { // это глобальная для файла
 const var1 = "var1";
 const intoFunc1 = () => { // это первая вложенная
   const var2 = "var2";
 };
};
// хотелось бы чтоб он делал такое

const globalFunc = () => {
 const var1 = "var1";

 const intoFunc1 = () => {
   const var2 = "var2";
 };
};
Ні. Але насправді, немає причин писати вкладені arrow-functions в такому вигляді, краще писати як () => () =>, або як окремі функції одного рівня.
источник

VS

V7v S6k in Frontend UA
Можна ще форматувати prettier, а потім виправляти косяки eslint)
источник

EO

Eugene Obrezkov in Frontend UA
Можно и в кучу их использовать, да

Но задачу это не решит)
источник

EO

Eugene Obrezkov in Frontend UA
И не согласен, что её нужно решать
источник

RV

Roman V in Frontend UA
Eugene Obrezkov
И не согласен, что её нужно решать
+
источник

VS

V7v S6k in Frontend UA
Eugene Obrezkov
И не согласен, что её нужно решать
так як ж сказав, вище що не треба)
источник

EO

Eugene Obrezkov in Frontend UA
V7v S6k
так як ж сказав, вище що не треба)
Я не проснулся ещё)
источник

VS

V7v S6k in Frontend UA
Petya Danchuk
Можно ли сделать так чтобы Prettier добавлял пустую строку перед
функциями уровня вложенности 1 и 2. Он вообще умеет различять уровни вложенности?
const globalFunc = () => { // это глобальная для файла
 const var1 = "var1";
 const intoFunc1 = () => { // это первая вложенная
   const var2 = "var2";
 };
};
// хотелось бы чтоб он делал такое

const globalFunc = () => {
 const var1 = "var1";

 const intoFunc1 = () => {
   const var2 = "var2";
 };
};
```
const globalFunc = () => {
 const var1 = "var1";

 const intoFunc1 = () => {
   const var2 = "var2";
 };
};

```

це практично те саме що

```
const globalFunc = (var1) => () => {
   const var2 =
var1 + "var2";
}

```
источник

PD

Petya Danchuk in Frontend UA
Roman V
Как выше сказали, там стрелочные функции строго с определенной целью пишут, чтобы this не менялся.
вот сдесь вроде вис нету. но именно так компоненты и пишут сейчас. это правда хук но не суть скопировал из проекта первое попавшееся
export default function useForm(value) {
 const [values, setValues] = useState(value);
 const [touched, setTouchedState] = useState({});
 const [validity, setValidityState] = useState({});

 const generate = type => (name, ownValue) => {
   const isCheck = type === "checkbox";
   const isRadio = type === "radio";
   return {
     name,
     type,
     get checked() {
       return isRadio ? ownValue == values[name] : values[name];
     },
     get value() {
       return isRadio ? ownValue : values[name];
     },
     onChange({ target: { value, checked } }) {
       console.log(value, checked)
       setValues({ ...values, [name]: isCheck ? checked : value });
     },
     onBlur(e) {
       setTouchedState({ ...touched, [name]: true });
       setValidityState({ ...validity, [name]: e.target.validity.valid });
     }
   };
 };
 const factory = {
   input: generate("input"),
   tel: generate("tel"),
   checkbox: generate("checkbox"),
   radio: generate("radio")
 };

 return [{ values, validity, touched }, factory];
}
источник

PD

Petya Danchuk in Frontend UA
V7v S6k
```
const globalFunc = () => {
 const var1 = "var1";

 const intoFunc1 = () => {
   const var2 = "var2";
 };
};

```

це практично те саме що

```
const globalFunc = (var1) => () => {
   const var2 =
var1 + "var2";
}

```
мне без разницы. мне нужно писать как в проекте.
источник

RV

Roman V in Frontend UA
Petya Danchuk
вот сдесь вроде вис нету. но именно так компоненты и пишут сейчас. это правда хук но не суть скопировал из проекта первое попавшееся
export default function useForm(value) {
 const [values, setValues] = useState(value);
 const [touched, setTouchedState] = useState({});
 const [validity, setValidityState] = useState({});

 const generate = type => (name, ownValue) => {
   const isCheck = type === "checkbox";
   const isRadio = type === "radio";
   return {
     name,
     type,
     get checked() {
       return isRadio ? ownValue == values[name] : values[name];
     },
     get value() {
       return isRadio ? ownValue : values[name];
     },
     onChange({ target: { value, checked } }) {
       console.log(value, checked)
       setValues({ ...values, [name]: isCheck ? checked : value });
     },
     onBlur(e) {
       setTouchedState({ ...touched, [name]: true });
       setValidityState({ ...validity, [name]: e.target.validity.valid });
     }
   };
 };
 const factory = {
   input: generate("input"),
   tel: generate("tel"),
   checkbox: generate("checkbox"),
   radio: generate("radio")
 };

 return [{ values, validity, touched }, factory];
}
Тут как раз как и писал @V7vS6k есть HOF, вида () => () => ... и такая конструкция на стрелочных функциях выглядит красиво
источник