10 CSS і JavaScript Linting Tools для оптимізації коду

Інструменти Linting можуть значно допомогти розробникам писати хорошу якість, оптимізований код. Linting - це процес перевірки коду, який шукає помилки у вихідному коді, а також позначає потенційні помилки. Більшість линт використовує статичний метод аналізу коду, що означає код перевіряється без фактичного виконання.

Ви можете врізатися в різні випадки, наприклад, у режимі реального часу, коли ви пишете код, коли ви зберігаєте файл, коли ви фіксуєте зміни, або перед тим, як код перейде у виробництво. Яким би не був робочий процес, важливо регулярно, оскільки це може врятувати вас від багатьох головних болів у майбутньому.

Linters не є виключно інструментами запобігання помилок, але вони також можуть бути ефективно використані під час налагодження знайти помилки, які важко вловити інакше. У цій публікації ми перевіримо 10 потужних інструментів, які можна використати для того, щоб пришвидшити файли CSS і JavaScript, щоб покращити якість вашого коду.

1. CSSLint

CSSLint, звичайно, має намір "зашкодити вашим почуттям", але в обмін "краще кодує вас". CSSLint нині лідирує на ринку CSS linting. Він написаний на JavaScript, він з відкритим вихідним кодом, і поставляється з безліччю налаштованих параметрів.

CSSLint дозволяє вибрати, які помилки та попередження (сумісність, продуктивність, дублювання тощо) потрібно перевірити, і перевіряє ваш синтаксис CSS проти правил, які ви вибрали.

Він працює не тільки в браузері, але також має інтерфейс командного рядка, і ви також можете інтегрувати його у власну систему збірки.

2. SublimeLinter CSSLint

CSSLint є настільки ефективним CSS-лінтером, що важко знайти конкурента, який вимірює до нього. Напевно, саме тому і фреймворк SublimeLinter побудував над нею плагін CSS linting. SublimeLinter - це плагін SublimeText надає користувачам засоби для того, щоб вписати свій код (CSS, PHP, Python, Java, Ruby тощо) безпосередньо в редакторі SublimeTextr.

Перед встановленням самого плагіна SublimeLinter CSSLint потрібно встановити CSSLint як модуль Node.js. Велика річ про цей зручний інструмент є те, що ви потрібно лише налаштувати параметри один раз, або якщо ви задоволені типовими налаштуваннями, ви навіть не повинні це робити, тоді ви завжди зможете отримати відповідні попередження та сповіщення в редакторі SublimeText без будь-яких додаткових проблем.

3. StyleLint

StyleLint допомагає розробникам уникнути помилок у CSS, SCSS або інших синтаксисах, які PostCSS може розібрати. StyleLint перевіряє більше ста правил, і ви можете виберіть, які саме ви хочете увімкнути (див. приклад конфігурації).

Якщо ви не хочете створювати власну конфігурацію, ви також можете вибрати попередньо написаний стандартний конфігураційний файл, який містить близько 60 правил StyleLint. StyleLint є досить гнучким інструментом, його можна розширити за допомогою додаткових плагінів і використовувати в 3 різних формах: як інструмент командного рядка, як модуль Node.js, або як плагін PostCSS.

4. Валідатор W3C CSS

Незважаючи на те, що CSS Validator W3C, як правило, не вважається інструментом, він дає розробникам чудову можливість перевірити свій вихідний код CSS на основі офіційних стандартів W3C. W3C побудував свої валідатори з наміром забезпечити інструмент, який схожий на перевірку програми Lint для мови Сі.

Спочатку вони створили валідатор розмітки HTML, який пізніше був перевірений валідатором CSS. Валідатор CSS W3C не має стільки опцій, скільки CSSLint, але це повертає докладні, легкі для розуміння повідомлення та повідомлення про помилки.

Як додаткову функцію, ви також можете перевірити свій код щодо останніх мобільних веб-стандартів W3C, що не погано в епоху мобільного Інтернету.

5. Dirty Markup

Dirty Markup очищає, форматує і перевіряє код HTML, CSS і JavaScript. Це може бути відмінним вибором, якщо вам сподобається простий дизайн і бажаєте швидкого рішення. Брудні розмітки кидає повідомлення про помилки та повідомлення в режимі реального часу поки ви писати або змінювати код у редакторі.

Коли ви натиснете “Чистота” кнопка, вона одночасно виправляє синтаксичні помилки, приводить в порядок формат, але попередження залишаються недоторканими дозволяючи вирішувати їх, як ви хочете. Ви не можете вибрати, для яких правил потрібно перевірити, але всі три типи файлів мати кілька налаштувань, які дозволяють вирішувати формат очищеного виходу.

6. JSLint

JSLint був вперше випущений в 2002 році Дугласом Крокфордом, і з тих пір не втратив жодного моменту, тому можна сміливо припустити, що це стабільний і надійний JavaScript інструмент.

JSLint може обробляти вихідний код JavaScript і текст JSON, і він поставляється з готову конфігурацію, яка відповідає найкращим практикам JS Крокфорд писав у своїй книзі під назвою JavaScript: Good Parts.

JSLint має кілька варіантів, з яких ви можете вибрати, але ви не можна додавати власні правила або відключати більшість функцій. JSLint вже почала включати останні стандарти ECMAScript 6, ви можете перевірити поточний етап впровадження ES6 тут.

7. JSHint

JSHint - дуже популярна вилка JSLint, і вона використовується великими технологічними компаніями, такими як Facebook, Twitter і Medium

JSHint - це проект, орієнтований на громаду, який розпочав свою діяльність створити більш налаштовувану та менш впевнену версію JSLint. JSHint дозволяє розробникам конфігурувати будь-які з його варіантів, а також налаштувати налаштовану конфігурацію в окремий файл, що робить інструмент зручним для багаторазового використання і добре підходить для великих проектів..

Ви не тільки можете використовувати JSHint для того, щоб вписати ванільний JavaScript, він також має нестандартну підтримку для багатьох популярних бібліотек JS, таких як jQuery, Mootools, Mocha і Node.js.

8. ESLint

ESLint - це найостанніша велика річ на ландшафті JavaScript. Його популярність випливає з її дуже гнучкого характеру. Ви не тільки можете налаштувати тонну своїх складних правил, але й інтегрувати їх з усіма основними редакторами коду, але ви також можете легко розширити його функціональні можливості додавши до нього різні плагіни.

Вказавши параметри синтаксичного аналізу, можна також вибрати, який стандарт JS-мови потрібно підтримувати під час процесу linting, що означає, що ви не тільки можете перевірити свої скрипти проти синтаксису ECMAScript 5 за замовчуванням, але й проти ECMAScript 6, ECMAScript 7 і JSX.

9. АТС

JSCS або Стиль коду JavaScript - це підключений linter для стилю коду для JavaScript, який перевіряє правила форматування коду.

Мета АТС - забезпечити засоби програмно забезпечувати дотримання певного керівництва стилю кодування. Незважаючи на те, що АТС не перевіряє помилки та помилки, вони все ще використовуються багатьма основними гравцями в індустрії технологій, такими як Google, AirBnB та AngularJS, оскільки допомагають розробникам зберігати чітку, послідовну базу кодів.

АТС заощаджує в реальному часі, оскільки він автоматично виправляє ваші помилки форматування, тому вам не доведеться проходити через них один за одним. Вона має багато різних пресетів, що належать до великих проектів, таких як пресети стилів кодування Google, Grunt або Wikimedia, які можна легко використовувати у власних проектах, але Ви також можете створити власну конфігурацію.

10. Стандарт

StandardJS, або JavaScript Standard Style - це кодовий стиль linter, подібний до АТС, але відрізняється від нього простотою та прямотою. StandardJS може бути відмінним вибором, якщо ви не хочете проводити час з конфігурацією, просто хочете ефективний інструмент, який вибігає з коробки.

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