10 แพ็คเกจ Atom ที่มีประโยชน์ที่สุดสำหรับนักพัฒนาเว็บ

คุณลองใช้ Atom แล้วหรือยัง แม้ว่ามันจะค่อนข้างใหม่หลายคนหลงรัก Atom แต่ตัวแก้ไขข้อความที่ทำโดย GitHub ซึ่งมีข้อดีมากมายและเหนือสิ่งอื่นใดคือฟรีสำหรับการใช้งาน Atom มาพร้อมกับแพคเกจในตัวเช่นการรวมเข้ากับ Git และมุมมองแบบต้นไม้ อย่างไรก็ตามเพื่อจุดประสงค์ในการพัฒนาคุณจะต้องมีแพ็คเกจอื่น ๆ.

ในโพสต์นี้เราได้เลือกแพ็คเกจที่นักพัฒนาเว็บต้องมี มีบางอย่างที่ยอดเยี่ยมในการช่วยจัดระเบียบรหัสยุ่ง ๆ ของคุณส่วนอื่น ๆ เพื่อช่วยให้คุณสามารถเข้าถึงไฟล์ของคุณได้ดีขึ้นโดยไม่ต้องออกจาก Atom ต่อไปนี้เป็นแพ็คเกจ 10 รายการที่คุณต้องมี.

ตัวเลือกสี

ตามชื่อที่บอกแพคเกจนี้ให้คุณเลือกสีและมันง่ายเหมือนคลิกขวาและเลือก 'Color Picker' หรือสามารถทำได้โดยการกด CMD / CTRL + SHIFT + C ตัวเลือกสีใช้งานได้หากเคอร์เซอร์ของคุณอยู่ที่ข้อความในไฟล์ CSS / SASS / LESS ที่มีหนึ่งในรูปแบบสีดังต่อไปนี้: HEX, HEXa, RGB, RGB, RGBA, HSL, HSL, HSV, HSVa, VEC3 และ VEC4 หรือตัวแปรสี SASS หรือน้อยกว่า นอกจากนี้ยังมีความสามารถในการแปลงระหว่างรูปแบบ.

นักท่องเที่ยว

นักท่องเที่ยว ดูเหมือนว่าจะเป็นปลั๊กอินที่คุณต้องติดตั้งไม่ว่าสภาพแวดล้อมตัวแก้ไขข้อความของคุณคืออะไร คุณสมบัติหลักของ Emmet เช่นการขยายตัวย่อและการตัดคำด้วยตัวย่อทำให้คุณสามารถทำงานได้อย่างรวดเร็วเมื่อเขียน HTML, CSS, Sass / SCSS และ LESS syntaxes ตัวอย่างเช่นใน HTML ให้พิมพ์ p> a.mylink จากนั้นแตะที่ปุ่ม TAB เพื่อรับแท็ก HTML ที่สมบูรณ์

. Cheat Sheet จะช่วยให้คุณเรียนรู้ไวยากรณ์ตัวย่อของ Emmet ได้อย่างรวดเร็ว.

minimap

หากคุณคุ้นเคยกับ Sublime Text คุณอาจคุ้นเคยกับภาพตัวอย่างขนาดเล็กบนหน้าต่างด้านขวา คุณลักษณะนั้นมีประโยชน์ในการเลื่อนดูซอร์สโค้ดเร็วเกินไปสำหรับความสูงของหน้าต่าง กับ minimap, คุณได้รับสิ่งนี้สำหรับ Atom คุณสามารถกำหนดตำแหน่งให้อยู่ทางซ้ายหรือขวาเปิด / ปิดไฮไลต์โค้ดและอื่น ๆ แผนที่ย่อมาพร้อมกับปลั๊กอินบางตัวเพื่อขยายฟังก์ชันการทำงานเช่นปากกาเน้นข้อความสี.

ตกแต่ง

ตกแต่ง จะเปลี่ยนผู้ใช้รหัสให้ยุ่งและอ่านได้มากขึ้น มันมีการสนับสนุนที่ดีสำหรับภาษาการเขียนโปรแกรมเช่น HTML, CSS, JavaScript, PHP, Python, Ruby, Java, C, C ++, C #, Objective-C, CoffeeScript, typescript และ SQL หลังจากติดตั้งแพคเกจนี้เพื่อเรียกใช้เพียงคลิกขวาและเลือก 'บรรเจิดเนื้อหาบรรณาธิการ', หรือผ่าน แพ็คเกจ> Atom Beautify> บรรเจิด.

Atom Linter

Atom Linter มาเป็น 'บ้าน' ของปลั๊กอินผ้าสำลีสำหรับภาษาหลักให้ API ระดับบนสุดสำหรับ linters มี linters ที่พร้อมใช้งานสำหรับ JavaScript, CoffeeScript, CSS / SASS / SCSS / LESS / STYLUS, Ruby, Python ในหนึ่งภาษาสามารถมีปลั๊กอินได้มากกว่าหนึ่งรายการเช่น JSHint, JSCS และ JSXHint สำหรับ JavaScript.

หลังจากติดตั้งแพคเกจหลักนี้คุณจะต้อง ติดตั้ง linter เฉพาะสำหรับภาษาที่คุณใช้งาน, ตัวอย่างเช่นหากคุณใช้ JavaScript และเลือก JSHint สำหรับ linter คุณสามารถติดตั้งโดยใช้ $ apm ติดตั้ง linter-jshint บนเทอร์มินัล.

ไอคอนไฟล์

ไอคอนไฟล์ เพิ่มไอคอนให้กับชื่อไฟล์ตามประเภทไฟล์ที่เกี่ยวข้อง มันจะเพิ่มการปรับปรุงภาพเมื่อคุณเปิดไฟล์บนแท็บหรือในมุมมองต้นไม้ ไอคอนไฟล์สามารถปรับแต่งได้: คุณสามารถเพิ่มไอคอนของคุณเองและเปลี่ยนสีผ่านไฟล์ LESS ใน แพคเกจ / ไฟล์ไอคอน / รูปแบบ ไดเรกทอรี ไอคอนเริ่มต้นมี 8 สีและ 3 รุ่น (แสงขนาดกลางและมืด).

ตัวอย่าง JavaScript

ตัวอย่าง JavaScript ให้คุณเขียนส่วนของซอร์สโค้ดของ JS ได้อย่างรวดเร็ว ด้วยตัวย่อที่กำหนดคุณไม่จำเป็นต้องเขียนโค้ดคำสำหรับคำเช่นพิมพ์เพียง CL เพื่อทำ console.log และ กูเกิล สำหรับ getElementById. ฟังก์ชั่นนี้คล้ายกับ Emmet แต่มันทำงานบนรหัส JavaScript แพคเกจ Atom นี้มีไวยากรณ์ JavaScript จำนวนมากเช่นฟังก์ชั่นคอนโซลและลูป.

CSS Comb

CSS Comb ทำให้โค้ดสไตล์ชีทของคุณมีการจัดรูปแบบอย่างสม่ำเสมอดูเรียบร้อยและสวยงาม คุณสามารถใช้การกำหนดลักษณะการเรียงลำดับที่สร้างไว้ล่วงหน้าตาม Yandex, Zen หรือ CSSComb เองหรือคุณสามารถใช้การกำหนดลักษณะของคุณเองเพื่อสร้างกฎการเรียงลำดับ หลังจากติดตั้งแพคเกจนี้งานการเรียงลำดับสามารถทำได้โดยกด CTRL + ALT + C หรือเข้าถึงได้จากเมนูบริบทผ่าน แพ็คเกจ> CSS comb> Comb.

Git Plus

Git Plus ช่วยให้คุณทำงานกับ Git โดยไม่ต้องออกจากโปรแกรมแก้ไข Atom ภายในเครื่องมือแก้ไขคุณสามารถสร้างคำสั่ง Git, checkout, push / pull, diff และคำสั่ง git อื่น ๆ คุณต้องตั้งค่าของคุณ user.name และ user.email ในไฟล์กำหนดค่า git ของคุณเพื่อให้ฟังก์ชั่นทั้งหมดใช้งานได้ ในการเข้าถึงคำสั่ง git ทั้งหมดให้เปิดจานสีด้วย CMD + SHIFT + H หรือเลือก แพ็คเกจ> Git Plus.

แก้ไขจากระยะไกล

แก้ไขจากระยะไกล ช่วยให้คุณดูและแก้ไขไฟล์ระยะไกลโดยไม่ต้องออกจากโปรแกรมแก้ไขหรือด้วยการใช้แอพพลิเคชั่น ftp อื่น ๆ ในการเริ่มต้นสร้างโฮสต์ใหม่จากนั้นเพิ่มผ่านเมนู แพ็คเกจ> แก้ไขจากระยะไกล> เพิ่มโฮสต์ใหม่ และใส่ข้อมูลการเข้าสู่ระบบของคุณ ตอนนี้คุณสามารถเรียกดูไฟล์ระยะไกลของคุณใช้ CTRL + ALT + B เพื่อเรียกดูโฮสต์ที่ลงทะเบียนแล้วและดูไฟล์.