ESLint

Если вы не знакомы с «линтерами», то вы, наверняка, знакомы с типичным поиском ошибки в стиле myVariable is undefined и подобными.

Настроив линтер, вы сможете видеть в консоли много полезной информации: от забытой точки-с-запятой (кстати, не актуально для ES2015), до уведомлений о неиспользуемых переменных. Очень удобно для рефакторинга кода.

Современный ESLint пошел еще дальше. С добавлением собственных правил, вы можете поддерживать единый стиль программирования внутри компании!

Но, довольно теории.


Поставим нужные пакеты (babel-eslint 8.2.2, eslint 4.19.1, eslint-plugin-react 7.7.0):

npm i babel-eslint eslint eslint-plugin-react --save-dev

Теперь, хоть файлы .xxxrc обычно не нужны, для ESLint все же нужно сделать такой. В нем мы опишем правила для синтаксической проверки (lint) кода.

.eslintrc

{
  "extends": "eslint:recommended",
  "parser": "babel-eslint",
  "env": {
    "browser": true,
    "node": true
  },
  "plugins": [
    "react"
  ],
  "rules": {
    "no-debugger": 0,
    "no-console": 0,
    "new-cap": 0,
    "strict": 0,
    "no-underscore-dangle": 0,
    "no-use-before-define": 0,
    "eol-last": 0,
    "quotes": [2, "single"],
    "jsx-quotes": 1,
    "react/jsx-no-undef": 1,
    "react/jsx-uses-react": 1,
    "react/jsx-uses-vars": 1
  }
}

Самое интересное, конечно же, секция rules, где:

  • 0 — правило выключено
  • 1 — правило выдаст предупреждение
  • 2 — правило выдаст ошибку

Некоторые правила принимают массив аргументов, например quotes. В нашем случае, именно это правило можно прочитать так: Показывай ошибку, если встретишь двойную кавычку.

Список всех правил eslint-plugin-react.

Чтобы ESLint работал в автоматическом режиме, мы будем все так же использовать webpack.

Наряду с секцией loaders, в webpack есть секция... preloaders (да-да, postloaders тоже есть, правда, теперь с переходом на Webpack 2 и выше, секция loaders переименована в rules, а preloaders и postloaders, как и loaders помещаются в rules, с той разницей, что preloader'у добавляют свойство enforce со значением pre, а postloader'у — со значением post). Из названий уже все понятно: код обрабатывается «до» и «после» loaders. Для ESLint нам подходит preloader.

Итак, поставим нужный лоадер (на данный момент eslint-loader 2.0.0):

npm i eslint-loader --save-dev

Поправим конфиг:

webpack.config.js

...
  module: {
    rules: [
      { // добавили eslint-loader как preloader
        enforce: 'pre',
        test: /\.jsx?$/,
        loaders: ['eslint-loader'],
        include: [
          path.resolve(__dirname, "src"),
        ],
      },
      { // все остальное осталось не тронутым
        loaders: ['babel-loader'],
        include: [
          path.resolve(__dirname, "src"),
        ],
        test: /\.jsx?$/,
      }
    ]
  }
...

Здесь и далее использованы ... — если дан(ы) фрагмент(ы) файла, а не весь код целиком. Весь код раздела всегда есть на Github, ссылка указана в конце статьи.

Теперь достаточно перезапустить сборку. Должно получиться следующее: PropTypes error

Линтер показывает нам, что в файле src/containers/App.js есть неиспользуемая переменная PropTypes, хотя она определена. Это действительно так, поэтому давайте поправим код:

src/Containers/App.js

import React, { Component } from 'react'

export default class App extends Component {
  render() {
    return <div>Привет из App</div>
  }
}

Сохранив файл, мы увидим в консоли следующее: eslint no errors

Великолепно! Ошибок нет. Остается на всякий случай добавить: сборку webpack не нужно было перезапускать. Обычно, сборку нужно перезапускать лишь после изменений в webpack.config.js; в остальных случаях, так как у нас настроен «режим наблюдения», — webpack сам перезапустится и сгенерирует новый файл сборки.


Итого: на данный момент мы можем писать ES2015/ES7 код, использовать JSX и не переживать за глупые ошибки, а своевременно править их, используя подсказки ESLint. Webpack автоматически пересобирает наш файл сборки (/static/bundle.js), при этом мы используем всю мощь Hot Module Replacement, и если изменим что-либо в js-коде react-компонентов — изменения прилетят сразу же в браузер без перезагрузки страницы. Примите поздравления, мы готовы с комфортом написать Redux приложение.

Исходный код данного раздела


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

results matching ""

    No results matching ""