N1kS Posted September 17, 2017 Posted September 17, 2017 (edited) Всем доброго времени суток! Я уже неоднократно упоминал на сервере дискорда о такой штуке, как ESLint. Кто-то относится скептически, кто-то поддерживает, а кто-то и вовсе пропускает мимо. Сегодня постараемся разобраться что это за монстр, да и нужен ли он вообще? Теория Цитата ESLint - это крутой инструмент, который позволяет проводить анализ качества вашего кода, написанного на любом выбранном стандарте JavaScript. Он приводит код к более-менее единому стилю, помогает избежать глупых ошибок, умеет автоматически исправлять многие из найденных проблем и отлично интегрируется со многими инструментами разработки. Для чего это все? На самом деле все очень просто! ESLint поможет привести ваш код к общему стилю. "Что в этом такого? Я и сам могу писать весь свой код в едином стиле" ответите вы, но не все так просто. Каждому человеку свойственно ошибаться или проявлять невнимательность, особенно после долгой работы над кодом. ESLint крайне необходим при работе в команде. Зачем? Да опять же, все очень просто! Кто-то привык ставить в конце точку с запятой, кто-то нет, кто-то максимум пишет 80 символов в строку, кто-то 120, а кто-то громоздит вообще сколько душе угодно. В конечно итоге - ваш код или код вашей команды может превратиться в сплошную кашу, а вам это нужно? Если вы и дальше считаете, что вам это нужно - просто закройте статью. Практика Теперь когда вы знаете, что такое ESLint и зачем он нужен - давайте начнем его использовать? Для того, чтобы это сделать - не нужно каких-то особых усилий, достаточно установить пакет используя пакетный менеджер npm. npm install eslint --save-dev Установили, отлично, что теперь? Теперь нам нужно создать файл в котором мы будем прописывать наши правила о "правильном коде". Для этого достаточно создать в директории файл .eslintrc.js (так же возможно варианты просто .eslitrc и .eslintrc.json, читайте подробнее на официальном сайте). После создания файла - нам нужно сконфигурировать наш конфиг, я приведу простой пример. Е сли вам нужно что-то особенное или заточенное под что-то конкретное - вы можете без проблем найти необходимую документацию все на том же официальном сайте. .eslintrc.js: module.exports = { // Среды - среды, в которых ваши .js файлы будут запущены. Каждая среда предоставляет определенный набор предопределенных глобальных переменных. 'env': { 'node': true, 'es6': true }, 'extends': 'eslint:recommended', // Здесь таятся наши правила. 'rules': { // Каждое правило принимает тип оповещения о себе (2 или error, 1 или warn, 0 или off(не оповещать)) и непосрественно сами аргументы для правида. // Правило обеспечивает согласованный стиль отступов. В данном примере 4 пробела. 'indent': [2, 4], // оповещать как ошибку // Правило обеспечивает последовательное использование точек с запятой. 'semi': [2, 'always'], // оповещать как ошибку // Правило обеспечивает согласованный стиль привязки для блоков. 'brace-style': [2, '1tbs'], // оповещать как ошибку // Правило направлено на устранение неиспользуемых переменных, функций и параметров функций. 'no-unused-vars': [1], // оповещать как предупреждение // Разрешим вывод в консоль (используйте это правило только при разработке). 'no-console': [0] } }; Полный список всех правил вы можете найти здесь. Окей, установили, настроили, что дальше? Дальше нам необходимо проверить все наши .js файлы на наличие ошибок или предупреждений. Ниже я приведу пример простого .js файла, чтобы нагляднее было видно где есть ошибки, а где их нет. Для того, чтобы проверить файлы необходимо просто запустить команду: node ./node_modules/eslint/bin/eslint test.js Где test.js - имя вашего файла, соответственно. Пример файла: function Foo() { console.log('Foo') } function Fooo() { console.log('Fooo'); } Запустив ESLint вы должны увидеть что-то вроде этого: 1:10 warning 'Foo' is defined but never used no-unused-vars 2:1 error Opening curly brace does not appear on the same line as controlling statement brace-style 3:1 error Expected indentation of 4 spaces but found 2 indent 3:21 error Missing semicolon semi 6:10 warning 'Fooo' is defined but never used no-unused-vars Все справедливо и все по делу. Я не буду разбирать каждую ошибку, но если вы пройдетесь по коду в соответствии с нашими правилами, то вы увидите, что ESLint говорит нам справедливые вещи. И это все? Нет, это не все. Я думаю многие из вас согласятся, что такой вариант проверки неудобен, т.к. он требует постоянного запуска команды из окна терминала (консоли), что не очень-то и удобно. А есть выход? Да, конечно выход есть! На сегодняшний день многие современные текстовые редакторы обеспечивают проверку вашего кода, используя ваши правила ESLint. Visual Studio Code: https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint Atom: https://github.com/AtomLinter/linter-eslint Notepad++ https://sourceforge.net/projects/notepad-linter/ Я не буду писать полный список, т.к. вы сможете сами без проблем найти поддержку ESLint для вашего редактора в гугле. Заключение После прочтения данной статьи у вас сформировались базовые понятия о том, что такое ESLint и зачем это нужно. Я надеюсь, что для кого-то из вас эта статья была полезна и, возможно, все таки убедит вас в том, что его использования крайне важно. Спасибо за внимание! Я надеюсь, что вы не напрасно потратили свое время. Edited September 17, 2017 by N1kS 3
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now