HW-Reactjs-6.1 #2
Conversation
| @@ -0,0 +1,4 @@ | |||
| dist | |||
| help | |||
There was a problem hiding this comment.
Как вариант на будущее, однако сейчас в проекте отсутствует папка help
.gitignore
Outdated
| @@ -0,0 +1 @@ | |||
| node_modules | |||
There was a problem hiding this comment.
Желательно еще добавить папку dist, так как она используется для сборки проекта
There was a problem hiding this comment.
Также, можно использовать универсальный файл .gitignore для проекта Node/React.js
| @@ -31,7 +31,7 @@ | |||
| // "editor.formatOnSave": true, // optional | |||
| "editor.codeActionsOnSave": ["source.fixAll.eslint"] | |||
| }, | |||
| "[typescript]": { | |||
| "[javascript][javascriptreact]": { | |||
There was a problem hiding this comment.
Новые настройки для правильной работы ESLint:
{
"editor.formatOnSave": false,
"eslint.useFlatConfig": false,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": "explicit"
},
"[json][jsonc]": {
"editor.formatOnSave": true
}
}
| @@ -8,7 +8,7 @@ module.exports = { | |||
| extends: [ | |||
There was a problem hiding this comment.
- Установите дополнительно
npm i @typescript-eslint/parser -D, так как у вас используется парсерparser: '@typescript-eslint/parser'в конфигурации ESLint. - Обновите конфигурацию в файле
.eslintrc.js.
Полная конфигурация:
module.exports = {
env: {
browser: true,
es2021: true,
node: true,
},
extends: [
'eslint:recommended',
'plugin:unicorn/recommended',
// 'plugin:@typescript-eslint/recommended',
'plugin:react/recommended',
'prettier',
],
globals: {
//'Promise': 'off',
},
overrides: [],
parser: '@typescript-eslint/parser',
// 'parser':'espree',
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module',
ecmaFeatures: {
jsx: true,
},
},
ignorePatterns: ['eslintrc.js', 'prettier.config.js'],
plugins: ['unicorn', 'react', 'prettier'], //'prettier'
rules: {
'prettier/prettier': 'warn',
'unicorn/no-array-callback-reference': 'off',
'unicorn/no-array-method-this-argument': 'off',
'Missing semicolon.': 'off',
'react/no-unknown-property': 'off',
'arrow-parens': 'off',
'unicorn/prevent-abbreviations': 'off',
'unicorn/no-null': 'off',
'no-obj-calls': 'off',
'no-unreachable': 'off',
'react/react-in-jsx-scope': 'off',
'unicorn/no-new-array': 'off',
'no-unused-vars': 'off',
'no-dupe-keys': 'off',
'unicorn/consistent-function-scoping': 'off',
'react/jsx-key': 'off',
'react/jsx-no-undef': 'off',
quotes: 'off',
'@typescript-eslint/no-require-imports': 'off',
'@typescript-eslint/no-unused-vars': 'off',
'unicorn/prefer-module': 'off',
'@typescript-eslint/no-inferrable-types': 'off',
//'prettier/prettier': 'error',
'arrow-body-style': 'off',
'prefer-arrow-callback': 'off',
//indent: ['error', 2],
//'linebreak-style': ['error', 'unix'],
// quotes: ['error', 'single'],
semi: ['error', 'always'],
'no-var': 'error',
// 'no-use-before-define': 'error',
//'arrow-parens': ['error', 'as-needed'],
'object-curly-spacing': ['error', 'always'],
//'array-bracket-spacing': [ 'error', 'always' ],
//'no-trailing-spaces': 'error',
//'no-tabs': 'error',
//camelcase: 'error',
// 'unicorn/prefer-spread': 'warn',
// 'unicorn/no-null': 'off',
'unicorn/no-empty-file': 'off',
'unicorn/filename-case': 'off',
'no-undef': 'off',
// 'no-console': 'warn',
'react/prop-types': 'off',
},
};- Перезапустите IDE, ESLint должен работать правильно после этого.
| // apiGet; | ||
| // }; | ||
| return ( | ||
| <div className="container"> |
There was a problem hiding this comment.
Отступы в коде слева сейчас не соответствуют стандартам ESLint, после настройки ESLint форматирование кода должно заработать правильно автоматически
| <Button > | ||
| movie | ||
|
|
||
| </Button> |
There was a problem hiding this comment.
Можно удалить переводы строк.
Также, это сделает ESLint автоматически при правильной настройке.
Это мелочь.
Пример: <Button>movie</Button>
| export default function Button(properties) { | ||
| return ( | ||
|
|
||
|
|
||
| <button> | ||
|
|
||
| {properties.children} | ||
| </button> | ||
|
|
||
| ); | ||
| } |
There was a problem hiding this comment.
Можно сразу сделать деструктуризацию параметров компонента, чтобы сократить код.
Пример:
export default function Button({ children }) {
return <button>{children}</button>;
}| const ranM = randomMovie.map((number) => | ||
| <ul key={number.id}> | ||
| <li>{number.data}</li> | ||
| <li>{number.title}</li> | ||
| </ul> | ||
| ); |
There was a problem hiding this comment.
Это лучше всего перенести прямо в код компонента, так как здесь используется jsx
| } | ||
|
|
||
| //export default function movieData() { | ||
| const movies =[ |
There was a problem hiding this comment.
Можно сразу сделать export данных.
Пример:
export const movies = [...]| import React from 'react'; | ||
| import axios from 'axios'; | ||
| //export default function movieData() { | ||
| function randomElements(array, count) { |
There was a problem hiding this comment.
Функцию, которая возвращает случайный фильм, можно упростить.
Пример:
export function randomElement(array) {
if (!Array.isArray(array) || array.length === 0) {
throw new Error('Expected a non-empty array');
}
const randomIndex = Math.floor(Math.random() * array.length);
return array[randomIndex];
}
No description provided.