Начална » кодиране на стоките » Ръководство за използване на SublimeLinter за разработчици

    Ръководство за използване на SublimeLinter за разработчици

    Linter е незаменим инструмент в съвременното уеб развитие. Той ни помага да оставаме под контрол с грешки и да прилагаме най-добрите практики при писането на кодове. Ако използвате SublimeText, аз силно препоръчвам да инсталирате SublimeLinters. През годините SublimeLinters се превърна в пакет от инструменти в SublimeText и представи официални пакети, които се свързват с различни езици за програмиране..

    В този урок ще видим как да инсталирате и настроите SublimeLinter. Нека просто да започнем.

    Приготвяме се да започнем

    Най-лесният начин да инсталирате SublimeLinter 4 е чрез SublimeText Package Control. Оттогава SublimeLinter 3, всеки Linter трябва да се инсталира отделно. Това позволява на SublimeLinter да работи по-ефективно само като изпълнява линтер които сме инсталирали.

    Тъй като повечето от моите проекти използват HTML, CSS, JS и PHP, бих искал да инсталирам linters за тези езици. В Управление на пакет, Инсталирам SublimeLinter заедно със следните приставки:

    • SublimeLinter-HTML-подредено
    • SublimeLinter-stylelint
    • SublimeLinter-eslint
    • SublimeLinter-PHP

    След това, за да работят тези приставки, трябва да инсталираме и Linter за езиците, които са HTML Tidy, CSSLint, JSHint и PHP CLI.

    За тези от вас, които използват OSX, Tidy и PHP са предварително инсталирани в системата. За да проверите, изпълнете последователно следните две команди.

     tidy --version php --version 

    Тези команди ще ви покажат версията Tidy и PHP, която имате. Можете да продължите да ги използвате в Sublime Text.

    Ако сте на Windows или Linux, или не сте ги инсталирали, можете да следвате инструкциите по-долу.

    Инсталиране на HTML Tidy

    За да инсталирате HTML Tidy:

    • В OSX, изпълнете тази команда в Терминал варете инсталирайте homebrew / dupes / tidy
    • В Linux, използвайте тази команда sudo apt-get install tidy.
    • В Windows, можете да вземете инсталатора на EXE от TidyBatchFiles.

    Инсталиране на PHP CLI

    • Потребителите на OSX могат да инсталират PHP в системата curl -s http://php-osx.liip.ch/install.sh | bash -s 5.5 команда. Това ще инсталира PHP 5.5, който е най-новата версия, по време на писането.
    • Linux потребителите могат да следват този изчерпателен урок от DigitalOcean.
    • За потребители на Windows, Можете да изтеглите инсталатора тук.

    Инсталиране на Styleint

    След това ще инсталираме CSS linter, наречен Stylelint, който ще ни позволи да проверяваме и прилагаме най-добрите практики в нашите CSS файлове. Следващата инструкция може да се следва във всичките три платформи: OSX, Windows и Linux. Предполагам, че вече сте инсталирали Node.js с NPM.

    За да инсталирате Stylelint, изпълнете:

     npm install -g stylelint 

    Имайте предвид, че ще трябва да добавите конфигурационен файл на Stylelint към директорията на вашия проект, допълнително инсталирайте предварително дефиниран конфиг като stylelint-config-standard. След като бъдат конфигурирани, трябва да намерите грешките, посочени по-долу.

    Инсталиране на ESLint

    Също така ще инсталираме ESLint, модерен и силно конфигуриран linter за JavaScript. Това ще ни помогне да приложим най-добрите практики, както и да уловим потенциални грешки при писането на JavaScript. Инсталирането на ESLint също изисква Node.js с NPM.

    За да го инсталирате, стартирайте.

     npm install -g eslint 

    По същия начин ще трябва да добавите конфигурацията на ESLint към проекта си или да използвате предварително дефинирана конфигурация, като напр..

    Всички сме готови. Можем да започнем linting HTML, CSS, JS и PHP в SublimeText с помощта на SublimeLinter 4.

    Нови функции в SublimeLinter 4

    SublimeLinter 4 предлага няколко нови функции, а този, който е лесно забележим, е панелът, който показва всички грешки на отворените файлове. Ако сте в Mac, натиснете Command + Ctrl + A. В Windows и Linux можете да натиснете Ctrl + K, Ctrl + A.

    Горещият клавиш ще покаже списък с грешки, както е показано на следващата снимка на екрана.

    Използвай ↑ и ↓ за да навигирате в списъка, а страницата ще премине към точния ред, в който е възникнала грешката.

    По-добро визуално

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

    Силно конфигурируеми

    SublimeLinter 4 сега е по-конфигурируем от всякога. Например сега можем да обичаме “стилове” към всяка конфигурация на linter. Това ни позволява да зададем икони, цвят, режим на влак, пътека и променливи на обкръжението за всеки linter поотделно.

    Допълнителна справка

    Надявам се, че това кратко въведение би могло да помогне за стартиране и работа с SublimeLinter. Можете също така да направите справка с препратката, ако искате повече от напреднали неща.

    • Официален документ на SublimeLinter
    • Lint в софтуер и програмиране - WikiPedia
    • Репозиториуми SublimeLinter