Хаалтууд - халуун товчлуурууд, залгаасууд болон тохиргоонууд. хаалт. Шаардлагатай залгаасууд Хаалтны тохиргооны файл

Вэбмастерууд болон программистууд вэб сайт үүсгэхдээ ихэвчлэн текст засварлагч ашигладаг. Гэхдээ энэ бүлгийн ердийн програмуудын функциональ байдал, жишээлбэл, Notepad нь энэ чиглэлээр ажилладаг хүмүүст хэтэрхий нарийн байдаг. Тэдний хувьд тэмдэглэгээний хэлтэй ажиллах зориулалттай тусгай программуудыг бий болгодог. Эдгээрийн нэг нь Adobe-ийн үнэгүй Brackets текст засварлагч юм.

Хаалтуудыг зохион бүтээгчдийн дунд түгээмэл болгож буй гол онцлог нь HTML, Java, JavaScript, CSS, C ++, C, C #, JSON, Perl, SQL, PHP зэрэг олон тооны тэмдэглэгээ болон вэб програмчлалын хэлийг дэмжих явдал юм. Python болон бусад олон (нийт 43 зүйл).

Хөтөлбөрийн код засварлагч цонхонд дээрх хэлнүүдийн бүтцийн элементүүдийг тусад нь өнгөөр тодруулсан бөгөөд энэ нь зохион бүтээгчид кодыг хурдан удирдах, мөн илэрхийллийн эхлэл ба төгсгөлийг хялбархан олоход тусалдаг. Шугамын дугаарлалт, блокуудыг задлах чадвар, тэмдэглэгээний автомат бүтэц зэрэг нь хаалттай ажиллахад хэрэглэгчийн тав тухыг хангах нэмэлт хүчин зүйл болдог.

Тексттэй ажиллах

Үүний зэрэгцээ, хаалт ашиглахын тулд програмист эсвэл вэб хуудасны дизайнер байх шаардлагагүй, учир нь програм нь энгийн текст засварлагч шиг энгийн текст боловсруулалтыг дэмждэг.

Хаалт нь текст кодчиллын маш том жагсаалттай ажиллах боломжтой: UTF-8 (анхдагч), Windows 1250 - 1258, KOI8-R, KOI8-Ru болон бусад (нийт 43).

Хөтөч дээрх өөрчлөлтүүдийг урьдчилан харах

Хаалтуудыг дэмжих функц "Шууд үзэх", энэ нь текст засварлагч дээр хийсэн бүх өөрчлөлтийг Google Chrome хөтчөөс шууд үзэх боломжтой гэсэн үг юм. Тиймээс, энэ функцийг ашиглахын тулд компьютер дээр энэ вэб хөтөч байх шаардлагатай. Файлыг хадгалах үед бүх өөрчлөлтүүд Google Chrome-д синхрончлон харагдах тул зохион бүтээгч нь түүний үйлдэл нь хэрэглэгчдэд харагдах вэб хуудасны интерфейсэд хэрхэн нөлөөлж байгааг шууд харах боломжтой.

Файлын удирдлага

Хаалт засварлагч дээр та хэд хэдэн файлтай нэгэн зэрэг ажиллаж, цэсийг ашиглан хооронд нь сольж болно. Нэмж дурдахад нээлттэй баримт бичгийг нэр, нэмсэн огноо, төрлөөр нь ангилахаас гадна автоматаар ангилах боломжийг олгодог.

Контекст цэсийг нэгтгэх

Контекст цэсэнд нэгтгэсэнд баярлалаа "Windows Explorer", та эхлээд програмыг өөрөө эхлүүлэхгүйгээр хаалтаар дурын файлыг нээж болно.

Дибаг хийх горим

Хаалтны тусламжтайгаар та дибаг хийх горимд вэб хуудсыг харж, засах боломжтой.

Хайж солих

Хөтөлбөр нь текст эсвэл тэмдэглэгээний кодоор хялбар хайх, солих функцээр хангадаг.

Өргөтгөлтэй ажиллах

Plug-in өргөтгөлүүдийг суулгаснаар хаалтны функцийг нэмэгдүүлэх боломжтой. Та тэдгээрийг тусгай тусламжтайгаар удирдаж болно "Өргөтгөлийн менежер"тусдаа цонхонд. Эдгээр элементүүдийг ашиглан та програмын шинэ тэмдэглэгээ, програмчлалын хэлийг дэмжих, интерфэйсийн сэдвийг өөрчлөх, алсын FTP сервертэй ажиллах, програмын хувилбаруудыг удирдах, мөн текст засварлагчийн анхны хувилбарт ороогүй бусад функцуудыг оруулах боломжтой. .

Давуу тал

Хөндлөн платформ;
Олон хэл (31 хэл, түүний дотор орос хэл);
Олон тооны дэмжигдсэн програмчлалын хэл, текст кодчилол;
Өргөтгөлүүдийг ашиглан шинэ функц нэмэх чадвар.

Алдаа дутагдал

функц " шууд үзэх»зөвхөн Google Chrome хөтчөөр дамжуулан ашиглах боломжтой;
Хөтөлбөрийн зарим хэсгийг оросжуулсангүй.

Brackets бол код, тэмдэглэгээний хэлтэй ажиллах хүчирхэг текст засварлагч бөгөөд маш өргөн функцтэй. Гэсэн хэдий ч ийм өргөн хүрээний програмын функцүүдэд та нэмэлт өргөтгөлүүдийг ашиглан шинээр нэмж болно.

Хаалтнь Adobe-ийн боловсруулсан төсөл юм. Эхэндээ вэб програмуудыг хялбаршуулах зорилгоор код засварлагч байдлаар бүтээгдсэн. Өнгөрсөн нэг жилийн хугацаанд хэд хэдэн шинэчлэлтүүд гарсан нь засварлагчийн ажиллагааг сайжруулаад зогсохгүй хөгжүүлэгчдэд хэрэгтэй хэд хэдэн функцийг нэмсэн.

Одоогийн хувилбар нь Хаалт 1.2.

Програмын интерфейсээс эхэлье:

Интерфэйс

Програмын интерфейс нь дараахь зүйлээс бүрдэнэ.

Цэс - файл, засварлах, хайх гэх мэт.
Засварлах төслийн файлуудыг сонгох талбар
Кодын хэсэг

Та мөн горимыг асаах товчлуурыг сонгож болно. шууд урьдчилан үзэх, гэхдээ энэ талаар дараа дэлгэрэнгүй.

Эхэндээ, залгаасууд болон сэдэвгүйгээр програмын интерфейс нь маш энгийн бөгөөд стандарт юм. Шинэхэн хөгжүүлэгчийн хувьд илүүц зүйл байхгүй: засварлах хэсэгт кодын синтаксийг тодруулах, төслийн лавлах лавлах.

CTRL++ / CTRL+- хослолыг ашиглан үсгийн хэмжээг нэмэгдүүлэх / багасгах боломжтой.

Гаргасантай хамт хувилбар 0.42сэдвийг өөрчлөх, суулгах дэмжлэг байсан. Стандарт нь зөвхөн байсан гэрэлболон Харанхуй. Харанхуй сэдэв нь надад илүү тааламжтай байгааг хүлээн зөвшөөрөх ёстой.

Сэдвүүдийг өөрчлөх нь таб дээр хийгддэг Харах – Сэдвүүд. Нэг таб дээр та өөрчлөх боломжтой фонтболон түүний хэмжээ.

Хаалтанд байгаа сэдвүүд

хуваах харах

Хувилбар 0.44олон тооны алдаануудыг засч, гүйцэтгэлийг сайжруулж, мөн ийм функцийг нэмсэн хуваах харах. Энэ функцийг зөвшөөрөх болно хуваахзасварлах талбарыг хоёр хэсэгт хувааж, хоёр файлтай зэрэг ажиллах. Энэ нь хөгжлийг ихээхэн хялбаршуулсан гэдгийг хүлээн зөвшөөрөх хэрэгтэй.

Хэвтээ байдлаар тусгаарлах боломжтой.

Хаалт засварлагч хэсгийн хэвтээ хуваалт

Үүнийг мөн босоо байдлаар хувааж болно.

Хаалт засварлагч хэсгийн босоо хуваагдал

Өнгөт палитр

Мөн хаалтанд CTRL + E хослолыг ашиглан өнгөт палитрыг дуудах гэх мэт ашигтай функц байдаг. Энэ нь дараах байдлаар ажилладаг.

Өнгөний кодонд курсуудыг оруулаад хослолыг дарна уу CTRL+E. Өнгөний палитр нээгдэх бөгөөд та ямар өнгө, ямар ил тод байхыг хүсч байгаагаа зааж өгөх боломжтой.

Хаалтны өнгөт палитр

Хаалтанд зориулсан ханд (Урьдчилан үзэх)

Хаалтны анхны хувилбар гарснаас хойш гурван жилийн дараа хувилбар 1.0. Гүйцэтгэлийг сайжруулахаас гадна залгаас гэх мэт Хаалтанд зориулсан ханд (Урьдчилан харах).

Энэ нь танд загваруудыг форматаар нээх боломжийг олгодог PSDХаалтанд шууд оруулах ба тэдгээрийг доторх байдлаар нь харна уу фотошопдавхаргаар. Үүний тусламжтайгаар та хуудасны тодорхой элементийн хэмжээс, тухайлбал блок, пиксел эсвэл хувиар, байршлыг нь харж, дараа нь засварлагч дээр эдгээр утгыг нэн даруй оруулах боломжтой.

Хаалтанд зориулсан ханд (Шүүмж)

Эхэндээ энэ санаа нь маш сайн, бас ашигтай юм. Гэхдээ асуудал нь дотор байсан хувилбар 1.0залгаас зөв ажиллахгүй, удаашруулж, системийг ачаалсан.

Өөр нэг сул тал бол "үүл" Adobe Creative Cloud-д данстай байх хэрэгцээ юм, учир нь PSDзагварууд тэнд ачаалагдсан байна.

Үнэнийг хэлэхэд, шинэ хувилбарууд гарсны дараа ч би "алдаатай" учраас энэ функцийг ашигладаггүй.

Өргөтгөлийн менежер

Цонхонд залгаасуудыг суулгасан өргөтгөлийн менежер, та бас суулгаж болно дизайны сэдэв.

PluginsХаалтанд байгаа нь стандарт функцийг өргөжүүлэх, төсөл боловсруулахад туслах боломжийг олгоно. Эдгээр залгаасуудын нэг нь алдартай Эммет.

Эммет- товчлолыг ашиглан том код бичих боломжийг олгодог залгаас, цаг хэмнэнэ.

Жишээлбэл:

Дараах кодыг html баримт бичигт бичснээр:

XHTML

ul>li*4>a

ul> li* 4> a[ href= # ]

Халуун товчийг дарсны дараа (өгөгдмөл тохиргоог товчлуураар тохируулна TAB) бичигдсэн код нь "нээх" болно

XHTML

шууд урьдчилан үзэх

Эцэст нь би танд ийм гайхалтай функцийн талаар хэлэх болно шууд урьдчилан үзэх. Энэ функцийн тусламжтайгаар та үр дүнг бодит цаг хугацаанд харах боломжтой. Энэ зарчим нь энгийн: сонгох htmlбаримт бичиг, орно шууд урьдчилан үзэх. Хөтчийн цонх нээгдэх бөгөөд таны төслийг одоогийн зөв бичгийн дүрмээр харуулах болно. Энэ функц нь зөвхөн хөтөч дээр ажилладаг гэдгийг нэмэх нь зүйтэй Chrome . Энэ нь бусад хөтчүүдэд зориулсан дэмжлэгийн тухай ярьж байх шиг байна, гэхдээ зөвхөн програмын ирээдүйн хувилбаруудад л.

Гэхдээ энэ функц нь миний бодлоор гол зүйл юм. Ялангуяа хоёр дэлгэцтэй ажилладаг хөгжүүлэгчдэд зориулсан.

Дүгнэлт

Энд би энэ тоймыг дуусгахыг хүсч байна. Би бас үүнийг нэмж болно Хаалттөгс эхлэгчидвэб хөгжүүлэгчид. Эхлэн вэбсайт зохион бүтээгчийн хувьд би үүнийг ашиглахыг зөвлөж байна. Энэхүү засварлагч нь нөөц шаарддаггүй, интерфэйсийн хувьд энгийн бөгөөд hotkeys болон залгаасуудын тусламжтайгаар код бичих ажлыг хурдасгаж, хялбаршуулах боломжийг олгодог.

Редакторын албан ёсны вэбсайт Хаалт.

Текст засварлагч Хаалт 1.6 - вэбсайтын зохион байгуулалтад тохиромжтой. Энэ бол Adobe-ийн хөгжүүлэгчдийн гайхалтай хэрэгсэл юм. Амьд кодчилолын тусламжтайгаар та хуудсыг байрлуулах явцад дахин ачаалах шаардлагагүй болно.

Хаалт засварлагчийн тайлбар

Ерөнхийдөө засварлагчийн дүр төрхийг өөрийн үзэмжээр өөрчилж болно. Энэ нь стандарт сэдвүүдийн багцтай. Сэдэв бүр нь код засварлах цонхны харагдах байдлыг өөрчилдөг. Энэ нь дэвсгэр болон синтаксийн тодруулгыг хоёуланг нь өөрчилдөг. Харанхуй болон цайвар сэдвүүд байдаг. Анхдагч байдлаар, бүх нээлттэй файл, хавтсыг зүүн талын самбарт бүлэглэсэн боловч тэдгээрийг нээлттэй засварлах боломжтой файлын дээр таб хэлбэрээр байрлуулж болно. Өөрөөр хэлбэл, хаалтанд бүх зүйлийг өөртөө хамгийн тохиромжтой болгохын тулд бүх зүйлийг хийдэг.

Хаалтны онцлог

Энэхүү текст засварлагч нь вэб технологи ашиглан бүтээгдсэн бөгөөд бүх давуу талуудтай. Жишээлбэл, энэ нь хөндлөн платформ юм. Өөрөөр хэлбэл, та Windows, Linux эсвэл Mac гэх мэт ямар ч платформ дээр хаалт ажиллуулж болно.

Хаалт нь зохион байгуулалтын явцад өнгийг тодорхойлох зориулалттай өнгө сонгогчтой. Код бөглөх нь маш сайн бөгөөд хурдан ажилладаг бөгөөд файл, зураг руу орох замыг автоматаар бөглөх систем байдаг. Энэ нь танд маш их цаг хэмнэж, шаардлагатай файлуудыг хавтаснаас хайхаас зайлсхийх болно. Дээрээс нь загасны текст оруулах хэсэг байдаг (lorem ipsum).

Түүнчлэн, хаалтанд суулгасан функцүүдээс гадна нэмэлт өргөтгөлүүдийг ашиглан түүний функцийг өргөтгөх боломжтой. Баруун талын жижиг босоо баганад лего элемент шиг дүрс тэмдэг бий. Үүн дээр дарснаар боломжтой бүх залгаасуудын жагсаалт бүхий модаль цонх нээгдэнэ. Тэдний суурилуулалт хэдхэн секунд үргэлжлэх бөгөөд нэг товчлуур дээр дарж хийгддэг.

Магадгүй хаалтны хамгийн чухал бөгөөд ялгарах онцлог нь кодын бүх өөрчлөлтийг вэб хуудсан дээр шууд харуулдаг livecoding функц юм. Энэ функцийг энд сайн хэрэгжүүлсэн. Энэ бол өөрчлөлт хийсний дараа дахин ачаалах явдал биш, энэ бол шууд кодчилол юм. Үүнийг эхлүүлэхийн тулд та редакторын баруун талын самбар дээрх аянгын дүрс дээр дарах хэрэгтэй. Энэ үйлдэл нь файлыг шууд үзэхийн тулд хөтөч дээр нээх болно. Мөн энд та код дотор байгаа газрынхаа хуудсан дээрх тодруулах функцийг идэвхжүүлж болно. Энэ нь маш тохиромжтой бөгөөд хэрэв та үүнийг байнга ашигладаг бол маш их үнэ цэнэтэй цагийг хэмнэдэг.

Ийм баялаг функцтэй хэдий ч хаалтуудыг үнэгүй татаж авах боломжтой. Энэ нь өдөр тутмын ажилд маш тохиромжтой бөгөөд таны одоогийн редакторыг орлуулах болно.

Үзүүлэлтүүд:

Хувилбар: Хаалт 1.6
Статус: Үнэгүй
Орос хэл
Зохиогч: Adobe
Систем: Windows
Хэмжээ: 36.7 Mb

Plugins-гүй бол Brackets нь бусад редакторуудаас илүү сайн биш боловч тэдгээрийн тусламжтайгаар ядаж туршиж үзэх нь зүйтэй юм.

Оршил

Тун удалгүй Хабре дээр "Хаалт" редактортой ямар нэг байдлаар холбоотой олон нийтлэл хэвлэгджээ. Олон хүмүүс тэр даруй нэлээд шударга асуултуудтай байсан:

Энэ нь миний ашигладаг %EDITOR_NAME%-аас юугаараа дээр вэ?
Үүнд зориулсан олон залгаасууд байдаг уу?
Энэ нь эргэлзэх нь зүйтэй болов уу эсвэл алдартай IDE эсвэл текст засварлагчийг ашиглах нь дээр үү?

Энэ нийтлэлийг уншсаны дараа хүн бүр эдгээр асуултын хариултыг өөрсдөө олох болно гэж найдаж байна.

Хайрцагнаас гарсан функц

Хэдийгээр хаалтууд нь текст засварлагчийн хувьд байрладаг боловч үнэн хэрэгтээ энэ нь бүрэн хэмжээний IDE шиг болж байна. Гэсэн хэдий ч, энэ засварлагчийн үндсэн суулгацаас юу олж авах талаар хэлэх хэрэгтэй.

Live Preview-д зориулсан залгаас - зөвхөн Google Chrome дээр ажилладаг. Бид засварлагчийн кодонд ямар нэгэн өөрчлөлт оруулдаг - өөрчлөлтүүд нь хөтчийн цонхонд автоматаар харагдана
синтакс онцлох
CSS, JS болон HTML файлуудыг засварлах зөвлөмжүүд
кирилл бичвэрийн болхи дэлгэц. Тэд дараагийн хувилбаруудын аль нэгэнд үүнийг засахаа амлаж байна. Одоо хэд хэдэн тойрон гарах арга замууд байгаа бөгөөд энэ талаар доор тайлбарлах болно.

Энэ бол текст засварлагчийг WEB хөгжүүлэлтийн хүчирхэг хослол болгон хувиргах боломжийг олгодог асар олон тооны залгаасууд юм. Дараах нь боломжуудын жагсаалт юм. Би каталогид байгаа бүх нэмэлтүүдийг тайлбарлахгүй, би зөвхөн хамгийн ашигтай, сонирхолтой зүйлд анхаарлаа хандуулах болно.

Хайрцагнаас гарсан хаалт

Ерөнхий зорилго

Өргөтгөлийн үнэлгээ

Эхлэгчдэд энэ нэмэлтийг хамгийн түрүүнд оруулахыг зөвлөж байна. Энэ нь каталогийн бусад өргөтгөлүүдийг янз бүрийн шалгуурын дагуу эрэмбэлэх боломжийг олгодог бөгөөд янз бүрийн нэмэлт мэдээллийг харуулдаг: GitHub дээрх татан авалтын тоо, од, сэрээ зэрэг нь энэ өргөтгөлийн ашиг тусыг дор хаяж ойролцоогоор үнэлэх боломжийг олгодог.

Өмнө ба дараа

Git хаалт

Гарчигнаас бүх зүйл маш тодорхой харагдаж байна. Сайн мэддэг хувилбарын хяналтын системтэй ажиллахад маш хэрэгтэй өргөтгөл.

Хаалтанд байгаа Git

код нугалах

Энэ залгаасгүй бол хаалт нь код нугалах гэх мэт шаардлагатай функцтэй байдаггүй. Суулгасны дараа зүүн талд, мөрний дугааруудын хажууд гурвалжин гарч ирэх бөгөөд энэ нь одоо шаардлагагүй хэсгүүдийг нураах боломжийг танд олгоно.

Код нугалах

Эммет

Үүнийг танилцуулах шаардлагагүй, гэхдээ эхлэгчдэд энэ талаар суралцах нь сонирхолтой байх болно. Энэхүү залгаас нь LESS, CSS болон HTML-г засварлах үед текст оруулгыг ихээхэн хурдасгах боломжийг танд олгоно.
Жишээлбэл, бид дараах бүтцийг оруулна.
button.btn.btn-primary(Товч)
Tab товчийг дарсны дараа энэ нь дараах байдлаар өргөжих болно.

Үргэлжлүүлэх:
div.btn-toolbar>(button.btn.btn-default(Button))*3
хүртэл өргөждөг

Би цаашид спойлер хийхгүй, Хабре дээр байгаа сэтгэгдлийг унших нь дээр.

Би бас албан ёсны зааврыг (англи хэл дээр) санал болгож байна.

кодын тойм

Засварлагчийн цонхны баруун талд бүх кодыг шувууны нүдээр харуулдаг жижиг самбарыг идэвхжүүлнэ. Та ямар ч сонирхол татахуйц цэг рүү хурдан үсрэх боломжтой.
CodeOverview залгаасаас гадна Бета хувилбарт BluePrint бас байдаг. Аль нь илүү дээр вэ - өөрөө шийдээрэй.

Кодын тойм

Баримт бичгийн хэрэгслийн самбар

Таблагдсан интерфэйс дээр дассан бөгөөд үүнээс салахыг хүсэхгүй байгаа хүмүүст зориулж (солилцооны хувьд хаалт нь модны дээрх нээлттэй файлуудын жагсаалтыг санал болгодог).

Хаалт фонтууд

Жагсаалтаас текстийг засварлагч дээр харуулах фонтыг сонгох боломжийг танд олгоно. Кирилл үсэг хэрхэн гарч эхэлсэнд анхаарлаа хандуулаарай. Нэмж дурдахад ижил функцтэй өөр хэд хэдэн залгаасууд байдаг. Цэс дэх "Харах / Загвар" хэсгийг нээх боломжтой бөгөөд та ямар фонт ашиглахыг гараар зааж өгөх боломжтой.

Фонтууд

Хаалтанд зориулсан Http сервер

Таны төслийг дибаг хийх локал HTTP серверийг эхлүүлнэ. Суурилуулсан шууд үзэхээс юугаараа ялгаатай вэ?

Энэ бол LivePreview биш, i.e. Хуудсыг гараар шинэчлэх ёстой.
Та энэ серверт системд суулгасан дурын хөтчөөс хандаж болно. IE болон Firefox хөгжүүлэгчид баярлаж байна.

Мөн өргөтгөлүүдийн каталогид LivePreview-тэй төстэй Static Preview залгаас байдаг, гэхдээ бусад хөтөч дээр "амьд" засварлах боломжийг олгодог боловч одоогоор (2014 оны 11-р сарын 8) энэ нь хаалтуудыг "гацаасан" байна. Илүү нарийвчлалтай хэлэхэд энэ нь редакторт ажлаа хэвийн дуусгах боломжийг олгодоггүй - тохиргоо болон нээлттэй файлуудын жагсаалтыг хадгал. Магадгүй энэ алдаа удахгүй засагдах байх, гэхдээ одоо байгаа асуудлууд нь намайг энэ залгаасаас салгасан.

Grunt for Brackets

Хаалт нь Grunt-д зориулсан залгаасыг санал болгож болно "a. Түүний тохиргоо нь тусдаа сэдэв, зарим нь бүр энэ тухай бүхэл бүтэн ном бичсэн. Би зөвхөн одоо, 2014 онд Grunt эсвэл Gulp-ийг ашиглахгүй байх нь таагүй амт, муугийн шинж тэмдэг гэдгийг би зөвхөн тэмдэглэх болно. хөгжүүлэгчийн хөнгөмсөг байдал.

Гоо сайхан болгох, сайхан болгох

Зүгээр л Ctrl+L эсвэл Ctrl+B товчлуурын хослолыг дарснаар муу загвартай JS эсвэл HTML кодыг сайн загвартай код болгон хувиргадаг. Энэ залгаасыг хэрэглэхээс өмнө болон дараа нь Habr-ийн global_main.js-ийн зураг дээр. Эдгээр нэмэлт өргөтгөлүүдийг бүү ашиглаарай! Тэд хоёр цэгийн дараа хоосон зай оруулдаг бөгөөд энэ нь LESS файлыг хөрвүүлэх боломжгүй болгодог.

Туслах аа, бүх зүйл мах бутлуурын дотор байна!

Түргэн хайлт

Илэрхийлэл дээр давхар товших нь түүний баримт бичигт тохиолдсон бүх зүйлийг тодруулна. Өргөтгөлийн зохиогч нь Notepad ++-ээс санаа авсан бөгөөд үүнийгээ нуудаггүй.

notepad++? Үгүй

SFtpUpload, FTP-Sync

Төслийн файлуудыг (S)FTP-ээр серверт байршуулах боломжийг танд олгоно. Түлхүүрээр зөвшөөрөл өгөх боломжтой.

FTP Sync, SFtpUpload

зураг төсөл зохион бүтээгч

БАГА Автомат эмхэтгэл

CSS засварлахаас толгой өвдөхийг хүсдэггүй хүмүүсийн хувьд LESS нь удаан хугацааны туршид бий болсон. Энэ залгаас нь хадгалсан .less файлуудаа автоматаар хөрвүүлэх боломжийг танд олгоно. Одоогийн байдлаар бага зэрэг засвар хийх шаардлагатай.

.less файлын толгой хэсэгт та дараах зүйлийг бичих хэрэгтэй.
//гарсан: ../css/login.css
гаралтын лавлах.css-г хүчингүй болгох шаардлагатай бол. Үгүй бол .css файл нь .less файлтай нэг газар үүсгэгдэх бөгөөд энэ нь тийм ч сайн биш юм. Файлын бусад бүх LESS тохиргоог энд бичсэн болно.
Төслийн тохиргоонд та LESS ямар файлыг боловсруулах ёстойг тодорхой зааж өгөх ёстой. Үүнийг хийхийн тулд нэмнэ үү .хаалт.jsonэсвэл compile.json(хоёулаа төслийн үндсэн лавлахад байгаа бөгөөд эхнийх нь хаалтаар автоматаар үүсгэгддэг) дараах зүйлсийг хийнэ:
( "бага": [ "static/login/less/login.less", "static/desktop/less/index.less" //Мөн бусад бүх LESS файлууд ] )

Автоматаар хаалт тохируулагч

Энэ залгаасыг танилцуулах шаардлагагүй гэж бодож байна. Энэ нь үйлдвэрлэгчийн угтварууд болон хуучин хөтчүүдийг дэмжихийн тулд одоо байгаа CSS файлд шаардлагатай нэмэлтүүдийг оруулдаг. Тохиргооноос хамааран та янз бүрийн үр дүнг авч болно. Энэ нь нэлээд энгийн сонголттой цонхтой. Бүрэн жагсаалтыг төслийн GitHub хуудаснаас үзэх боломжтой.

Autoperefixer тохиргооны минимализм

CSSLint, LESSLint, LESS StyleSheets форматлагч

Таны LESS болон CSS кодыг сайжруулахад туслах гурван залгаас. Тэд ердийн, тийм ч нийтлэг биш алдаануудыг зааж өгөх болно. Зураг дээрх жишээ.

CSS дээрх алдаа

HTMLHint, илүү олон CSS кодын зөвлөмж, илүү олон HTML5 кодын зөвлөмж

Plugins нь HTML болон CSS-ийг засварлахад илүү олон зөвлөмж өгдөг. Хаалтны үндсэн нийлүүлэлтэд янз бүрийн сайжруулалт, нэмэлтүүд нэмэгдэх хурдыг харгалзан бид эдгээр залгаасуудын функцийг цөмд нэгтгэхийг хүлээх хэрэгтэй.

Өнгөний зөвлөгөө, хаалтны өнгө сонгогч

Эхнийх нь засварлагчийн код эсвэл өнгөний нэр дээр хулганыг гүйлгэх үед зөвлөмжийг харуулахаас гадна градиентийг харуулах боломжтой. Хоёр дахь нь хүссэн өнгө сонгох палитр бүхий цонхыг харуулна. LESS файлыг засварлахдаа өнгө сонгох цонхыг үг оруулсны дараа автоматаар гарч ирэхгүй бол Ctrl+Alt+K товчлуурын хослолоор дуудна. өнгө.

Градиент болон өнгө оруулах зөвлөмжүүд

JavaScript хөгжүүлэгч

JSHint, JSLint, JSHint тохируулагч, JSLint тохируулагч

Зөвхөн бичдэг төдийгүй JavaScript дээр код бичдэг хөгжүүлэгчдэд зориулсан маш хэрэгтэй залгаасууд. Та JSHint болон JSLint хоёрын аль нэгийг нь сонгож болно, гэхдээ та хоёуланг нь ашиглаж болно (хоёр дахь нь таны кодын хувьд илүү өрөөсгөл байх болно). Нэрнээс нь харахад тохируулагч нь код баталгаажуулах янз бүрийн сонголтуудыг тохируулах боломжийг олгодог, жишээлбэл, requirejs функцийг зарлахаас өмнө ашиглахыг үл тоомсорлодог.

Параметр тус бүр нь юунд зориулагдсан болохыг хүн бүр мэддэг.

FuncDocr

Plugin нь JS функцуудыг хурдан баримтжуулах боломжийг олгодог.
Жишээлбэл, дараах код байна.
Desktop.prototype.addResizeHandler = функц(харьцуулагч) ( if ($.isFunction(харьцуулагч)) ( this.resizeActions.push(handler); ) );
Функцийн мэдэгдлийн өмнө орж /** гэж бичнэ. Enter товчийг дарсны дараа FuncDocr энэ тайлбарыг өргөжүүлж, хоосон зайг орлуулах бөгөөд та шаардлагатай зүйлийг оруулахад л хангалттай.
/** * [] * @param ([]) зохицуулагч [] */ Desktop.prototype.addResizeHandler = функц(харьцуулагч) (хэрэв ($.isFunction(handler))) ( this.resizeActions.push(handler); ) ) ;

AngularJS кодын зөвлөмжүүд, хаалтанд зориулсан AngularJS

Angular удирдамжийг оруулахдаа зөвлөмж нэмнэ үү. Би энэ хүрээг сайн мэдэхгүй ч эдгээр хоёр залгаас мэргэжилтнүүдийн хүлээлтийг хангана гэж найдаж байна.

JavaScript танигчийн нэрийг өөрчлөх

Бид танигч болж, Ctrl + R дарж, шинэ нэр оруулна уу - скрипт дэх хувьсагчийн бүх тохиолдлууд автоматаар өөрчлөгдөнө.

Нэг халбага давирхай

Төрөл бүрийн тохиргоо, параметрүүдийн хувьд хаалтны талаар зарим гомдол байдаг. Эхний бөгөөд хамгийн чухал нь хурд юм. Баримт бичигт холбогдсон олон тооны залгаасууд болон маш олон CSS-ийн тусламжтайгаар баримт бичгийг засварлах үед зөвлөмжийн харагдах байдлыг мэдэгдэхүйц удаашруулж эхэлдэг. Заримдаа та JS скриптийг засварлахдаа редакторын хариу үйлдлийг нэлээд удаан хүлээх хэрэгтэй болдог. Хоёр дахь нь нэлээд тохиромжгүй навигацийн мод юм. Гуравдугаарт, зарим залгаасууд нь редакторыг "өлгөх" боломжтой бөгөөд үүнийг хэвийн хаахаас сэргийлж, тохиргоог хадгалах боломжтой.

Өнөөдөр бид хуудасны зохион байгуулалттай ажиллахад ашиглах програмуудын нэгийг авч үзэх болно - энэ бол хаалт юм. Та албан ёсны вэбсайтаас програмыг татаж аваад суулгаж болно brackets.io. Суулгахад өөрөө төвөгтэй зүйл байхгүй, гэхдээ тохиромжтой ажилд тохируулах нь танд 5 минут зарцуулагдана.

Хаалтанд залгаасуудыг суулгана уу

Плагинуудыг суулгах нь хоёр ба хоёр шиг хялбар байдаг. Бид хаалтуудыг ажиллуулж, зүүн талд байгаа самбарыг хайж олоод "Өргөтгөлийн менежер" товчийг сонгоно уу.

Эхний ээлжинд програм нь өргөтгөлүүдийг эхлүүлж, мэдээллийн санг шинэчилдэг. Хаалт өргөтгөлийн менежер нь гурван цонхтой: Боломжтой, Сэдэв, Суулгасан. Үүний дагуу бид табыг сонирхож байна Боломжтой.

Хайлтын талбарт залгаасын нэрийг оруулаад залгаасыг сонгоод "Суулгах" дээр дарна уу. Бүх залгаасуудыг суулгасны дараа програмыг дахин эхлүүлэхийг зөвлөж байна.

Энд бидэнд хэрэгтэй залгаасуудын жагсаалт байна:

Эммет- товчлол, товчлолыг ашиглан html болон css код бичих ажлыг ихээхэн хурдасгах боломжийг олгодог залгаас. Тиймээс, хэрэв та tab товчийг дарсны дараа анхаарлын тэмдэг (!) бүрэн хэмжээний html хуудас болж хувирахыг хүсч байвал танд энэ залгаас хэрэгтэй болно. Мөн HTML шошготой текстийг боох боломжийг танд олгоно.
Таб - Тусгай ажиллахнь хаалтанд гоёмсог табуудыг нэмдэг залгаас юм. Хадгалаагүй файлуудыг ногоон дугуйлангаар тэмдэглэнэ. Plugin-ийн гол зорилго нь ажлыг илүү нүдээр харуулах явдал юм.
Гүйлгэх- кодыг хуудасны төгсгөл хүртэл гүйлгэх, тэр ч байтугай хоосон хэсгийг гүйлгэх боломжийг олгодог залгаас.
Кодын фонт- Хаалтны орчин үеийн хувилбаруудад энэ нь кодын фонтыг өөрчлөх боломжийг олгодог. Хуучин хувилбаруудад энэ нь зүгээр л зайлшгүй шаардлагатай, учир нь програм нь орос фонтыг маш муухай харуулдаг.
Хаалтууд Нэмэлт баруун товшилтын цэс- контекст цэсэнд олон тохиромжтой "сайн зүйлс" нэмдэг - жишээлбэл, "Хуулбарлах", "Буулгах" зүйлс.
Цонхны бүдэгрүүлэгч дээр файлуудыг автоматаар хадгалах- Нээлттэй файлуудыг програмын цонхонд анхаарлаа төвлөрүүлэх үед автоматаар хадгалах залгаас (жишээлбэл, хэрэв та хөтөч рүү шилжсэн бол).

Залгаасуудыг суулгасны дараа хаалтуудыг дахин ачаалахыг би танд сануулж байна.

Мөн хаалтанд залгаас суулгах тухай манай видеог үзээрэй.