Эти инструменты помогут вам писать чистый код

eti instrumenty pomogut vam pisat chistyj kod

[*]Взгляните на Prettier, ESLint, Husky, Lint-Staged и EditorConfig

Учитесь писать хороший код, но вы не знаете, с чего начать… Просматривайте инструкции по стилям, такие как Руководство по стилю Javascript от Airbnb…

Удаление мертвого кода? Находите неиспользуемые переменные в базе кода? Пытаетесь найти проблемные шаблоны в своем коде? Мол, делает это return или нет?

Кто из этого звучит знакомо?

Поскольку так многому нужно учиться и делать одновременно, это так неспокойно.

Вы руководитель команды, управляющий различной командой? Есть ли у вас новые разработчики в команде? Вы беспокоитесь, что они напишут код не по стандартам? Нужен ли весь ваш день для рецензирования кода, когда обзор больше касается стандартов кода, а не фактической реализации логики?

Я был там и делал это, и это так утомительно и беспокойно.

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

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

Этот учебник больше ориентирован на программы React, но то же самое можно применить к любому веб-проекту.

Также редактором, который я использую для этого учебника, VS Code. Это компания Microsoft, и с тех пор как они начали заниматься открытым кодом, я работал ❤ с этой компанией (хотя было время, когда меня не было).

Повестка дня

  • Красивее
  • ESLint
  • Автоматизируйте форматирование и линт при сохранении
  • хаски
  • Линт-постановка
  • С Husky и Lint-постановка Комбинированная
  • EditorConfig

Начнем с Prettier

Что такое красивее?

Prettier – это уверенный форматировщик кода. Он форматирует код для вас особым образом.

Этот GIF почти это объясняет:

1*opcd-o83ElQvQNP84oDgyQ
Красивее форматировать мой код, как босс!

Зачем нам это нужно?

  • Очищает имеющуюся базу кода: в одной командной строке Представьте себе очистку кодовой базы из более чем 20 000 строк кода.
  • Легко принять: Prettier использует менее противоречивый стиль кодирования при форматировании кода. Поскольку это открытый код, многие работали над несколькими его итерациями, чтобы исправить некоторые крайние случаи и отшлифовать опыт.
  • Написание кода: Люди не понимают, что они тратят много времени на форматирование кода и тратят на это свою умственную энергию Пусть Prettier справится с этим ты сосредоточиться на основной бизнес логике. Лично Prettier повысил мою эффективность на 10%.
  • Помощь новичкам-разработчикам: Если вы новый разработчик, работающий бок о бок с замечательными инженерами, и хотите выглядеть круто писать чистый код, будь умным! Используйте Prettier.

Как мне это настроить?

Создайте папку под названием app и внутри этой папки введите командную строку:

npm init -y

Это создаст a package.json файл для вас внутри app папку.

Теперь я собираюсь использовать yarn в этом руководстве, но вы можете использовать npm так же.

Давайте установим нашу первую зависимость:

yarn add --dev prettier

Это установит зависимость разработчика в вашем package.json который будет выглядеть так:

{
  "name": "react-boiler-plate",
  "version": "1.0.0",
  "description": "A react boiler plate",
  "main": "src/index.js",
  "author": "Adeel Imran",
  "license": "MIT",
  "scripts": {
    "prettier": "prettier --write src/**/*.js"
  },
  "devDependencies": {
    "prettier": "^1.14.3"
  }
}
package.json — Добавление лучшего к devDependencies

Я скажу через секунду, что это “prettier”: “prettier — write src/**/*.js” да, но сначала создадим a src/ папка внутри нашей app папку. А внутри src/ папку давайте создадим файл под названием index.js – Вы можете называть это как угодно.

В index.js файл, вставьте этот код как есть:

let person =                     {
  name: "Yoda",
                designation: 'Jedi Master '
                };


              function trainJedi (jediWarrion) {
if (jediWarrion.name === 'Yoda') {
  console.log('No need! already trained');
}
console.log(`Training ${jediWarrion.name} complete`)
              }

trainJedi(person)
              trainJedi({ name: 'Adeel',
              designation: 'padawan' 
  });
index.js – Я знаю, что это некрасиво! Супер некрасивый. Но среди хаоса есть разум. Терпите со мной.

Итак, до сих пор у нас есть a src/app/index.js файл с неким безобразным кодом, написанным в нем.

Есть 3 вещи, которые мы можем сделать с этим:

  • Сделайте отступление и отформатируйте этот код вручную
  • Используйте автоматизированный инструмент
  • Пусть все идет и двигайся дальше (Пожалуйста, не выбирайте этот вариант)

Я пойду в другой вариант. Итак, теперь у нас установленная зависимость и скрипт Prettier, написанный в нашем package.json.

Давайте создадим а prettier.config.js файл в нашем корне app папку и добавьте к ней лучшие правила:

module.exports = {
  printWidth: 100,
  singleQuote: true,
  trailingComma: 'all',
  bracketSpacing: true,
  jsxBracketSameLine: false,
  tabWidth: 2,
  semi: true,
};
более красивый.config.js

printWidth гарантирует, что код не превышает 100 символов.

singleQuote превратит все ваши двойные кавычки в одинарные.
Подробнее в руководстве по стилю JavaScript Airbnb здесь. Это руководство является моим руководством для написания хорошего кода и впечатления на моих коллег.

trailingComma обеспечит наличие висячей запятой в конце свойства last object. Ник Граф объясняет это таким классным способом.

bracketSpacing печатает пробелы между литералами объектов:

If bracketSpacing is true - Example: { foo: bar }If bracketSpacing is false - Example: {foo: bar}

jsxBracketSameLine поставит > многострочный элемент JSX в последней строке:

// true example

<button
  className="prettier-class"
  id="prettier-id"
  onClick={this.handleClick}>
  Click Here
</button>

// false example

<button
  className="prettier-class"
  id="prettier-id"
  onClick={this.handleClick}
>
  Click Here
</button>
jsxBracketSameLine.example.js

tabWidth определяет количество пробелов на уровне отступления.

semi если true будет напечатано ; в конце заявлений.

Вот список всех вариантов, которые вы можете предоставить Prettier.

Теперь, когда мы настроили конфигурацию, давайте поговорим об этом скрипте:

“prettier”: “prettier  — write src/**/*.js”

В сценарии выше я работаю prettier и сказал ему найти все .js файлы в моей src/ папку. The --write флаг повествует prettier чтобы сохранить отформатированные файлы, когда он проходит через каждый файл и обнаруживает любую аномалию в формировании кода.

Давайте запустим этот скрипт в вашем терминале:

yarn prettier

Вот что происходит с моим кодом, когда я его запускаю:

1*XLy2nZkWeQz7gghWtweGKA
Круто, верно?

Если вы застряли, не стесняйтесь заглянуть в хранилище для этого.

На этом наш Prettier почти заканчивается обсуждение. Поговорим о линтерах.

ESLint

Что такое кодовый линтер?

Линтинг кода — это тип статического анализа, часто используемый для поиска проблемных шаблонов или кода, не соответствующего определенным правилам стиля. Существуют буквы кода для большинства языков программирования, и компиляторы иногда включают линтинг в процесс компиляции. — ESLint

Зачем он нужен JavaScript?

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

Инструменты Linting, такие как ESLint позволяют разработчикам находить проблемы со своим кодом JavaScript, не выполняя его.

Что делает ESLint таким особенным?

Хороший вопрос! Все в ESLint можно подключать. Вы можете добавлять правила во время выполнения – правила и форматировщик не обязательно объединяются для использования. Каждое правило добавленного линтинга является автономным, любое правило можно включить или отключить. Для каждого правила можно установить предупреждение или ошибку. Твой выбор.

Используя ESLint, вы получаете полную настройку того, как вы хотите выглядеть ваше руководство по стилю.

На данный момент есть 2 популярных руководства по стилям:

Я лично пользовался руководством по стилю Airbnb. Это посоветовал мой руководитель инженерного отдела в моей последней фирме, когда я начинал свою профессиональную карьеру, и это было самым ценным активом в моем распоряжении.

Это руководство по стилям активно поддерживается — просмотрите их репозиторию GitHub. В этом учебнике я буду использовать наборы правил, вдохновленные руководством по стилю Airbnb. Итак начнем.

Давайте сначала обновим нашу package.json файл:

{
  "name": "react-boiler-plate",
  "version": "1.0.0",
  "description": "A react boiler plate",
  "main": "src/index.js",
  "author": "Adeel Imran",
  "license": "MIT",
  "scripts": {
    "lint": "eslint --debug src/",
    "lint:write": "eslint --debug src/ --fix",
    "prettier": "prettier --write src/**/*.js"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.(js|jsx)": ["npm run lint:write", "git add"]
  },
  "devDependencies": {
    "babel-eslint": "^8.2.3",
    "eslint": "^4.19.1",
    "eslint-config-airbnb": "^17.0.0",
    "eslint-config-jest-enzyme": "^6.0.2",
    "eslint-plugin-babel": "^5.1.0",
    "eslint-plugin-import": "^2.12.0",
    "eslint-plugin-jest": "^21.18.0",
    "eslint-plugin-jsx-a11y": "^6.0.3",
    "eslint-plugin-prettier": "^2.6.0",
    "eslint-plugin-react": "^7.9.1",
    "husky": "^1.1.2",
    "lint-staged": "^7.3.0",
    "prettier": "^1.14.3"
  }
}
package.json

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

babel-eslint: Этот пакет позволяет легко использовать линт на всех продуктах Babel. Вам не обязательно этот плагин нужен, если вы не используете Flow или экспериментальные функции, еще не поддерживаемые ESLint.

eslint: это основной инструмент, который необходим для линтирования кода.

eslint-config-airbnb: этот пакет предоставляет всю конфигурацию ESLint Airbnb как расширяемую общую конфигурацию, которую вы можете изменить.

eslint-plugin-babel: An eslint спутник плагина к babel-eslint.
babel-eslint отлично адаптируется eslint для использования из Babel.

eslint-plugin-import: Этот плагин намерен поддерживать линтинг ES2015+ (ES6+) import/export syntax, и предотвратить проблемы с неправильным написанием путей к файлам и именам импорта. Подробнее.

eslint-plugin-jsx-a11y: правила linting для правил доступности элементов JSX. Поскольку доступность важна!

eslint-plugin-prettier: Это помогает ESLint бесперебойно работать с Prettier. Поэтому когда Prettier форматирует код, он делает это, имея в виду наши правила ESLint.

eslint-plugin-react: Правила линтинга для ESLint, специфичные для React.

Теперь в этом руководстве мало рассказывается о модульном тестировании для Jest/Enzyme. Но если вы используете его, давайте также добавим правила линтинга для них:

eslint-config-jest-enzyme: Это помогает с глобализированными переменными, специфичными для React и Enzyme. Эта конфигурация lint позволяет ESLint знать об этих глобальных элементах, а не предупреждать о них как утверждение it и describe.

eslint-plugin-jest: Плагин ESLint для Jest.

husky: Более подробно об этом позже в разделе автоматизации.

lint-staged: Более подробно об этом позже в разделе автоматизации.

Теперь, когда у нас есть базовое понимание, давайте начнем;

Создать .eslintrc.js файл в вашем корне app/ папка:

module.exports = {
	env: {
		es6: true,
		browser: true,
		node: true,
	},
	extends: ['airbnb', 'plugin:jest/recommended', 'jest-enzyme'],
	plugins: [
		'babel',
		'import',
		'jsx-a11y',
		'react',
		'prettier',
	],
	parser: 'babel-eslint',
	parserOptions: {
		ecmaVersion: 6,
		sourceType: 'module',
		ecmaFeatures: {
			jsx: true
		}
	},
	rules: {
		'linebreak-style': 'off', // Don't play nicely with Windows.

		'arrow-parens': 'off', // Incompatible with prettier
		'object-curly-newline': 'off', // Incompatible with prettier
		'no-mixed-operators': 'off', // Incompatible with prettier
		'arrow-body-style': 'off', // Not our taste?
		'function-paren-newline': 'off', // Incompatible with prettier
		'no-plusplus': 'off',
		'space-before-function-paren': 0, // Incompatible with prettier

		'max-len': ['error', 100, 2, { ignoreUrls: true, }], // airbnb is allowing some edge cases
		'no-console': 'error', // airbnb is using warn
		'no-alert': 'error', // airbnb is using warn

		'no-param-reassign': 'off', // Not our taste?
		"radix": "off", // parseInt, parseFloat radix turned off. Not my taste.

		'react/require-default-props': 'off', // airbnb use error
		'react/forbid-prop-types': 'off', // airbnb use error
		'react/jsx-filename-extension': ['error', { extensions: ['.js'] }], // airbnb is using .jsx

		'prefer-destructuring': 'off',

		'react/no-find-dom-node': 'off', // I don't know
		'react/no-did-mount-set-state': 'off',
		'react/no-unused-prop-types': 'off', // Is still buggy
		'react/jsx-one-expression-per-line': 'off',

		"jsx-a11y/anchor-is-valid": ["error", { "components": ["Link"], "specialLink": ["to"] }],
		"jsx-a11y/label-has-for": [2, {
			"required": {
				"every": ["id"]
			}
		}], // for nested label htmlFor error

		'prettier/prettier': ['error'],
	},
};
.eslintrc.js

Также добавьте а .eslintignore файл в вашем корне app/ каталог:

/.git
/.vscode
node_modules

Давайте начнем с обсуждения того, что a .eslintrc.js файл делает.

Давайте разберем его:

module.exports = { 
   env:{}, 
   extends: {}, 
   plugin: {}, 
   parser: {}, 
   parserOptions: {}, 
   rules: {},
};
  • env: Среда определяет глобальные переменные, предварительно определенные. Доступные среды — в нашем случае да es6, browser и node.
    es6 включит все функции ECMAScript 6, кроме модулей (это автоматически устанавливает параметр ecmaVersion параметр синтаксического анализатора к 6).
    browser добавит все глобальные переменные браузера, такие как Windows.
    node добавит глобальные переменные Node и область видимости узла, например global. Вы можете прочитать больше об определении сред.
  • extends: Массив строк – каждая дополнительная конфигурация расширяет предыдущие конфигурации.
    Сейчас мы используем правила линтинга airbnb которые распространяются на jest а затем расширен до jest-enzyme.
  • plugins: плагины – это в основном правила линтинга, которые мы хотим использовать.
    Сейчас мы используем babel, import, jsx-a11y, react, prettierвсе это я объяснил выше.
  • parser: По умолчанию ESLint использует Espree, но так как мы используем babelнам нужно использовать Babel-ESLint.
  • parserOptions: Когда мы изменяем синтаксический анализатор по умолчанию для Espree к babel-eslint нам нужно уточнить parserOptions — нужно.
    В параметрах я говорю ESLint, что ecmaVersion собирается версия lint 6. Поскольку мы пишем наш код на EcmaScript module а не а script уточняем sourceType как module.
    Поскольку мы используем React, который приносит JSX, в ecmaFeatures Я передаю этот вариант jsx и установите его true.
  • rules: Это часть, которая мне больше нравится в ESLint, настройки.
    Все правила, которые мы расширили и добавили с помощью наших плагинов, можно изменить или заменить. rules это место, где вы это делаете. Я уже поставил комментарии в Gist против каждого правила и для вашего понимания.

Теперь это прояснено, давайте поговорим .eslintignore

.eslintignore принимает список путей, которые мы хотим, чтобы ESLint не линтовал. Здесь я указываю только три:

  • /.git Я не хочу, чтобы мои файлы, связанные с Git, были linted.
  • /.vscode Поскольку я использую VS Code, этот редактор имеет свою конфигурацию, которую вы можете установить для каждого проекта. Я не хочу, чтобы мои конфигурации (конфигурации) были linted. Я использую VS Code, потому что он легок и открыт.
  • node_modules Я не хочу, чтобы мои зависимости были lind. Поэтому я добавил это в список.

Теперь, когда мы закончили с этим, давайте поговорим о недавно добавленных скриптах к нашему. package.json

"lint": "eslint --debug src/"
"lint:write": "eslint --debug src/ --fix"
  • $ yarn lint запустив эту команду, она просмотрит все ваши файлы. src/ и предоставит вам подробный журнал в каждом файле, где он находит ошибки, которые вы можете ввести вручную и исправить их.
1*yfvCg7YG_IpFFbZYzBv8IA
бег пряжа ворсинка npm запустить lint
  • $ yarn lint:write запустив команду, она будет делать то же, что и команда выше. Единственное дополнение состоит в том, что если он может исправить любую из ошибок, которые он видит, он собирается исправить их и попытается удалить как можно больше запаха кода из вашего кода.

Если вы застряли, смело посмотрите на хранилище для этого.

Это было немного беспокойно, и если вы придерживались этого:

1*pi2nGW17A7cFXX2hc6apPA
Профессор Снейп гордится вами. Хорошая работа.

Давайте еще немного автоматизируем

Пока что имеем prettier и eslint настройки, но каждый раз мы должны запускать скрипт. Давайте что-нибудь с этим сделаем.

  • Формат и код Lint при нажатии ctrl+s в вашем редакторе.
  • Каждый раз, когда вы фиксируете свой код, автоматически выполняйте предыдущую команду, которая линзирует и форматирует ваш код.

Формат и код Lint при сохранении

Для этого вам нужно использовать такой редактор как VS Code:

  • Установите плагин под названием ESLint.
    Загрузите здесь или нажмите ctrl+shift+x в вашем редакторе VS Code. Это откроет модуль расширений. Там тип поиска eslint. Появится список плагинов. Установите один по Dirk Baeumer. После установки нажмите reload кнопку, чтобы перезапустить редактор.

После установки этого плагина в корне app/ папку создать папку с ним .vscode/ — (точка) важна в названии файла.

Внутри папки создайте a settings.json файл, как показано ниже:

{
  "editor.formatOnSave": false,
  "eslint.autoFixOnSave": true,
}
settings.json
  • editor.formatOnSave Я установил значение false здесь, потому что я не хочу, чтобы конфигурация редактора по умолчанию для формата файла конфликтовала с ESLint и Prettier.
  • eslint.autoFixOnSave Я установил значение true здесь, потому что я хочу, чтобы установленный плагин работал всякий раз, когда я нажимаю сохранить. Поскольку ESLint с помощью Prettier конфигурации, каждый раз, когда вы нажимаете save он отформатирует и линтует ваш код.

Также важно отметить, что при запуске сценария
yarn lint:write теперь он будет линтовать и упорядочивать ваш код одновременно.

Только представьте, если бы вы передали кодовую базу из 20 тысяч строк кода для аудита и улучшения. А теперь представьте, что вы это делаете вручную. Улучшение неизвестного кода. Теперь представьте, что вы делаете это с помощью одной команды. Ручной подход может занять 30 дней, а автоматический подход займет 30 секунд.

Таким образом, сценарии настроены, и каждый раз, когда вы нажимаете save редактор сделает за вас волшебство для этого конкретного файла. Но не все в вашей команде выберут VS Code и это нормально. Так что давайте еще немного автоматизируем.

хаски

Что такое хаски?

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

Все, что вам нужно сделать, это установить Husky:

yarn add --dev husky

и в вашем package.json файл добавьте фрагмент:

"husky": {    
   "hooks": {      
     "pre-commit": "YOUR_COMMAND_HERE", 
     "pre-push": "YOUR_COMMAND_HERE"   
   }  
},

Поэтому каждый раз, когда вы фиксируете или нажимаете, он выполняет определенный сценарий или команду, например, запускает тестовые случаи или форматирует ваш код.

Больше о Хаски можно прочесть здесь.

Линт-постановка

Что такое Lint-staged?

Lint-staged помогает вам запускать буквы на поэтапных файлах, чтобы плохой код не попадал в вашу ветвь.

Почему Lint-staged?

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

Этот проект содержит сценарий, который будет запускать произвольные задания оболочки со списком поэтапных файлов в качестве аргумента, отфильтрованного по заданному шаблону glob. Больше можно прочесть здесь.

Все, что вам нужно, это установить Lint-staged:

yarn add --dev lint-staged

потом в вашем package.json файл добавьте это:

"lint-staged": {    
   "*.(js|jsx)": ["npm run lint:write", "git add"]  
},

Эта команда будет выполнять lint:write сначала команду, а затем добавьте ее в область обработки. Эта команда будет выполняться только для .js & .jsx файлы, но вы можете сделать то же самое для других файлов, если вы хотите.

С Хusky и Лint-staged комбинированный

Каждый раз, когда вы фиксируете свой код, перед тем как фиксировать код, он будет запускать скрипт под названием lint-staged который будет бегать npm run lint:write который будет линтировать и отформатировать ваш код, затем добавьте его в промежуточной области, а затем зафиксируйте. Круто правда?

Твой финал package.json файл должен выглядеть следующим образом. Это тот самый фрагмент, которым я поделился выше:

{
  "name": "react-boiler-plate",
  "version": "1.0.0",
  "description": "A react boiler plate",
  "main": "src/index.js",
  "author": "Adeel Imran",
  "license": "MIT",
  "scripts": {
    "lint": "eslint --debug src/",
    "lint:write": "eslint --debug src/ --fix",
    "prettier": "prettier --write src/**/*.js"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.(js|jsx)": ["npm run lint:write", "git add"]
  },
  "devDependencies": {
    "babel-eslint": "^8.2.3",
    "eslint": "^4.19.1",
    "eslint-config-airbnb": "^17.0.0",
    "eslint-config-jest-enzyme": "^6.0.2",
    "eslint-plugin-babel": "^5.1.0",
    "eslint-plugin-import": "^2.12.0",
    "eslint-plugin-jest": "^21.18.0",
    "eslint-plugin-jsx-a11y": "^6.0.3",
    "eslint-plugin-prettier": "^2.6.0",
    "eslint-plugin-react": "^7.9.1",
    "husky": "^1.1.2",
    "lint-staged": "^7.3.0",
    "prettier": "^1.14.3"
  }
}
package.json

Теперь каждый раз, когда вы делаете это:

$ git add .$ git commit -m "some descriptive message here"

Он будет линтировать и отформатировать ваш код на основе всех правил, установленных в файле
.eslintrc.js файл. Благодаря этому вы можете быть уверены, что ни один плохой код никогда не попадет в производство.

После завершения этого раздела у вас есть prettier, eslint и husky интегрированный в вашу кодовую базу.

Давайте поговорим об EditorConfig

Сначала создайте a .editorconfig файл в вашем корне app/ папку и вставьте в этот файл следующий код:

# EditorConfig is awesome: 

# top-most EditorConfig file
root = true

[*.md]
trim_trailing_whitespace = false

[*.js]
trim_trailing_whitespace = true

# Unix-style newlines with a newline ending every file
[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
insert_final_newline = true
max_line_length = 100
.editorconfig

Итак, что такое EditorConfig?

Поэтому не все собираются использовать VS Code – и вы не можете его применить, как и не должны. Чтобы все оставались на одной странице с точки зрения значений по умолчанию, например tab space или line ending должно быть, мы используем
.editorconfig. Это действительно помогает применить некоторые определенные наборы правил.

Вот список всех редакторов, поддерживающих EditorConfig. Список редакторов включает Web storm, код программы, Atom, eclipse, emacs, bbedit и многое другое.

Вышеприведенная конфигурация будет выполнять следующее:

  • обрезать конечные пробелы от .md & .js файлы
  • установить стиль отступления space вместо tab
  • размер отступления к 2
  • конец строки быть lf чтобы все, независимо от ОС, имели одинаковый конец строки. Детальнее читайте здесь.
  • в конце файла должна быть новая строка
  • и максимальная длина строки должна быть 100 символы

Сделав всю эту конфигурацию, вы готовы. Если вы хотите увидеть исходный код вот.

Также приветствуются запросы на подъемник, если вы чувствуете, что можете что-то улучшить в этом хранилище.

Если вам понравилась моя статья, вы также должны просмотреть другую статью: Как объединить Webpack 4 и Babel 7, чтобы создать фантастическое приложение React в котором я рассказываю о настройках Webpack и Babel для React.

Добавить комментарий

Ваш адрес email не будет опубликован.