10 CSS и JavaScript Linting Tools за оптимизиране на кода

Инструментите за вграждане могат значително да помогнат на разработчиците напишете добро качество, оптимизиран код. Linting е процес за проверка на код, който търси грешки в изходния код и маркира потенциални грешки. Повечето linters използват статична техника за анализ на кода, което означава кодът се проверява без действително изпълнение.

Можете да сложите в различни случаи, като например в реално време, докато пишете кода, когато записвате файла, когато правите промените, или преди кодът да влезе в производство. Какъвто и да е вашият работен процес, важното е да редовно, тъй като може да ви спаси от много главоболия в бъдеще.

Линтерите не са само инструменти за предотвратяване на грешки, но могат също така да бъдат ефективно използвани при отстраняване на грешки да намерите грешки, които трудно се улавят в противен случай. В тази публикация ще проверим 10 мощни инструмента, които можете да използвате, за да направите вашите CSS и JavaScript файлове, за да подобрите качеството на кода си.

1. CSSLint

CSSLint възнамерява да "нарани чувствата си", но в замяна "прави много по-добър код". CSSLint понастоящем води пазара на CSS linting. Той е написан на JavaScript, той е с отворен код и се доставя с много възможности за конфигуриране.

CSSLint ви позволява изберете какъв вид грешки и предупреждения (съвместимост, производителност, дублиране и др.) искате да тествате, и валидира синтаксиса на CSS спрямо правилата, които избирате.

Той не работи само в браузъра, но също така има интерфейс за команден ред и можете да го интегрирате и в собствената си система за изграждане.

2. SublimeLinter CSSLint

CSSLint е толкова ефективен CSS линт, че е трудно да се намери конкурент, който измерва до него. Вероятно това е причината, поради която SublimeLinter linting framework изгражда своя CSS линтинг плъгин върху него. 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 валидаторът на W3C обикновено не се смята за инструмент, той дава на разработчиците голяма възможност да проверят своя изходен код за CSS спрямо официалните стандарти на W3C. W3C построи валидатори с намерението да предостави инструмент, който е подобен на програмата за проверка на Lint за езика C..

Първоначално те създадоха HTML валидатора за маркиране, който по-късно беше последван от CSS валидатора. CSS валидаторът на W3C няма толкова възможности като CSSLint, но той връща подробни, лесни за разбиране съобщения за грешки и известия.

Като допълнителна функция, можете също да проверите кода си спрямо последните мобилни уеб стандарти на W3C, което не е лошо в ерата на мобилната мрежа..

5. Мръсна маркировка

Dirty Markup почиства, форматира и валидира вашия HTML, CSS и JavaScript код. Той може да бъде чудесен избор, ако ви харесва лесен дизайн и искате бързо решение. Мръсна маркировка хвърля съобщения за грешки и уведомления в реално време докато ти напишете или промените кода си в редактора.

Когато удариш “чист” бутон поправя синтаксичните грешки едновременно, подрежда формата, но оставя предупрежденията непокътнати позволявайки ви да ги решите колкото пожелаете. Не можете да избирате кои правила искате да тествате, но всичките три типа файлове има няколко настройки, които ви позволяват да решите формата на изчистената мощност.

6. JSLint

JSLint за първи път е издаден през 2002 г. от Douglas Crockford и оттогава не са загубили инерция, така че можете спокойно да предположите, че това е стабилен и надежден инструмент за JavaScript..

JSLint може да обработва изходния код на JavaScript и JSON текста и той идва с готови конфигурации, които следват най-добрите практики на JS Крокфорд пише в своята книга, озаглавена JavaScript: Добрите части.

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 Code Style е plug-in-linter за JavaScript, който проверява правилата за форматиране на кода.

Целта на АДСИ е да осигури средства за това програмно налага спазването на определено ръководство за стил на кодиране. Въпреки че JSCS не проверява грешки и грешки, все още се използва от много големи играчи в технологичната индустрия, като Google, AirBnB и AngularJS, тъй като помага на разработчиците да поддържат ясна, последователна кодова база..

JSCS е истински спестяващ време, тъй като автоматично коригира грешките във форматирането, така че не е нужно да ги преглеждате един по един. Той има много различни пресети, принадлежащи към по-големи проекти, като предварително зададени стилове на Google, Grunt или Wikimedia, които можете лесно да използвате в собствените си проекти, но можете също да създадете своя собствена персонализирана конфигурация.

10. StandardJS

StandardJS, или JavaScript Standard Style е linter за кодов стил, точно като JSCS, но се различава от него в своята простота и простота. StandardJS може да бъде отличен избор, ако не искате да прекарвате време с конфигурацията, просто искам ефективен инструмент, който изтича от кутията.

StandardJS следва няколко предварително написани правила за форматиране, а основната му стойност е да запази безпроблемния процес на кодиране, така че не можете да променяте правилата, с които не сте съгласни. Само изберете StandardJS, ако не искате да имате персонализирана конфигурация, и просто искате да наложи последователен стил на код във вашите JavaScript файлове.