Melestarikan Standar Coding: 5 Alat agar Anda Memulainya

() translation by (you can also view the original English article)

Ada banyak sumber daya yang dapat kita bahas selama pengkodean yang akan membantu mempertahankan standar di seluruh tim. Dalam tutorial ini, kita akan melihat bagaimana cara menyebarkan dan menggunakan lima alat ini.

Pengantar

HTML, CSS, dan JavaScript sangat mudah di mana masalah penulisan konvensi yang bersangkutan. Selama notasi tertentu, bahasa, dan tanda kutip, tanda kurung, titik dua, titik dua dan seterusnya semuanya berada di tempat yang tepat, kode akan bekerja. Namun, indentasi, spasi, baris melanggar Deklarasi urutan properti, fungsi dan variabel, termasuk mereka kata-casing yang sepenuhnya terserah penulis.

Elemen HTML, misalnya, tidak benar-benar case-sensitive. Kita dapat menulis mereka huruf kecil atau huruf besar; Apa adalah praktek umum kembali di 90 's. Selain itu, pembungkus nilai atribut dalam tanda kutip sejak opsional kedatangan HTML5, sesuatu yang sedikit orang yang benar-benar melakukan. Semua ini memungkinkan kode di bawah ini dinyatakan berlaku per standar HTML5:

/** Valid HTML in HTML **/
<BLOCKQUOTE class=pull-quote id=quote-1>
  <P>Content precedes design. Design in the absence of content is not design, it’s decoration.</P>
	<FOOTER>— Jeffrey Zeldman</FOOTER>
</BLOCKQUOTE>

Dalam CSS, beberapa memilih menggunakan space atas tab — atau sebaliknya-untuk indentasi. Properti aturan style dapat diatur dalam urutan apapun. Kehadiran duplikat dalam CSS Anda baik-baik saja (sebagian besar waktu), dan dalam kasus pra-prosesor CSS berlebihan bersarang aturan gaya sangat bisa dilakukan.

.site {
	.header {
		&.logo {
			
		}
		.navigation {
			.menu {
				.menu-link {
					&:hover {

					}
				}
			}
		}
	}
}

Demikian juga, variabel JavaScript dapat dinyatakan dengan huruf besar atau huruf kecil, satu huruf variabel diterima, dan menghilangkan kawat di sekitar bersyarat atau loop blok ini juga bisa diterapkan.

1	if(n < 3) doFunction();
2	while(!n < 3) n++;

Cara kita menulis kode tidak benar-benar peduli bahwa banyak dalam hal eksekusi. Tetapi ketika bekerja pada sebuah proyek dengan banyak orang yang memberikan kontribusi untuk code base, Anda akan segera menemukan kode dasar kode menjadi berantakan jika setiap kontributor mengikuti preferensi mereka sendiri. Pada sebuah proyek skala besar, hal itu dapat menyebabkan rumit bug, kode dapat menjadi kurang dikelola, dan akan menjadi rasa sakit yang nyata untuk siapa saja yang mewarisi dan mempertahankan proyek di masa depan.

Singkatnya, itu didorong untuk mengadopsi "Coding standar".

Apa Coding Standar?

"Coding standar" adalah kumpulan aturan yang disetujui oleh orang-orang yang terlibat, ketika memberikan kontribusi untuk basis kode proyek. Mereka membuka standar untuk syntaxing untuk menjaga konsistensi dan kejelasan kode, format untuk dibaca, menggunakan praktek-praktek terbaik yang umum bahasa; seringkali dengan beberapa penambahan aturan-aturan kepemilikan yang unik untuk proyek.

Harry Roberts, dalam pedoman CSS:

"Dalam mengerjakan proyek-proyek besar, berjalan lama, dengan puluhan pengembang spesialisasi yang berbeda dan kemampuan, penting bahwa kita semua bekerja dalam cara yang bersatu dalam rangka untuk — antara lain — tetap stylesheet maintainable; Jaga kode transparan, waras, dan mudah dibaca, menjaga stylesheet terukur;"

Douglas Crockford, yang dipopulerkan JSON di nya "kode Konvensi untuk the JavaScript Programming Language" menyatakan:

"Nilai jangka panjang software untuk sebuah organisasi adalah sebanding dengan kualitas basis kode. Selama masa pakai, program akan ditangani oleh banyak pasang tangan dan mata. Jika program dapat berkomunikasi dengan jelas struktur dan karakteristik, sangat kecil kemungkinannya bahwa itu akan pecah ketika diubah di masa depan tidak pernah terlalu jauh. Konvensi kode dapat membantu dalam mengurangi kerapuhan program.

Semua kode JavaScript kami dikirim langsung ke publik. Ini harus selalu menjadi publikasi berkualitas. Kerapian penting."

Saya Harus Membuat Sendiri Pengkodean Standar?

Jawaban singkatnya adalah "tidak", terutama mengingat sudah ada puluhan sering digunakan gaya panduan dalam wild, misalnya:

Kode panduan, satu set lengkap panduan untuk HTML, CSS, dan JavaScript oleh Mark Otto, orang di belakang Bootstrap.
Idiomatik CSS oleh Necolas, yang menciptakan bisa dibilang paling populer CSS reset pernah, Normalize.css
Airbnb CSS / SCSS dan Styleguide JavaScript
Wikimedia CSS dan kurang Styleguide
Panduan gaya Google untuk HTML, CSS, JavaScript antara bahasa lain
jQuery JavaScript Pedoman gaya Wikisource
WordPress CSS, JavaScript dan PHP Coding standar

Panduan gaya ini ditulis dengan baik, di kedalaman dan cukup jelas dalam hal alasan di balik setiap aturan mereka dampak. Jadi, alih-alih menulis panduan gaya kita sendiri, mungkin bijaksana untuk mengadopsi dan beradaptasi pola yang ada untuk memasukkannya ke proyek kami segera.

Pertanyaan sebenarnya sekarang adalah bagaimana kita menjaga semua orang yang mengikuti standar yang kita memilih?

Melestarikan Coding Standar

Untungnya, ada beberapa sumber daya yang kita dapat bersandar pada selama proses pembangunan yang akan membantu mempertahankan standar di seluruh tim. Dalam tutorial ini, kita akan melihat ke dalam bagaimana untuk menyebarkan dan menggunakan beberapa alat-alat ini.

1. EditorConfig

EditorConfig adalah file dot yang mendaftarkan beberapa aturan dasar format seperti indentasi, spasi, dan baris baru yang melanggar. Ia bekerja secara universal untuk semua jenis bahasa dan sudah terintegrasi dalam hampir semua kode editor dan IDEs seperti Visual Studio, luhur teks, Vim dan TextMate melalui plugin.

Penyebaran

Dengan asumsi Anda menggunakan teks luhur, cara termudah untuk menginstal plugin adalah melalui PackageManager.

Pergi ke Tools > Command Palette.
Type Install Package.
Cari dan Instal "EditorConfig".
Setelah plugin diinstal, menciptakan .editorconfig dalam direktori root dari proyek yang akan menerapkan konfigurasi tertentu melalui semua file yang termasuk orang-orang dalam sub-direktori.
Menambahkan EditorConfig properti untuk menentukan format-the kode berikut adalah contoh generik yang umum:

root = true

[*]
charset = utf-8
indent_style = tab
indent_size = 4
insert_final_newline = true

Penggunaan

Diberikan konfigurasi dari contoh kami, kami akan menemukan kode kita indentasi dengan tab, dan menambahkan baris baru pada akhir file seperti yang Anda menyimpannya.

Konfigurasi akan mempengaruhi semua file yang sudah ada yang mana Anda mungkin sebelumnya telah menggunakan ruang indentasi.

Lihat Properti yang Didukung untuk properti yang berlaku pada file .editorconfig, dan Pola Wildcard EditorConfig untuk menerapkan properti untuk file atau direktori tertentu. Anda juga dapat menemukan daftar plugin editor atau IDE pilihan Anda di bagian Unduh.

2. CSSComb

Menurut pedoman CodeGuide, properti dari style properties harus dikelompokkan sesuai urutan berturut-turut sebagai berikut.

Positioning: position, top, left, dll.
Box Model: width, height, display, dll.
Tipografi: font, line-heigth, dll.
Visual: background, border, border-radius, dll.

Sebagai contoh:

.body-content
{
    position: absolute;
    top: 0;
    left: 0;

    padding: 10px 12px;

    display: none;

    font-size: .8em;
    font-weight: bold;
    line-height: 26px;

    color: #fff;
}

Jika Anda mengadopsi pedoman dengan aturan serupa, di mana sifat dikelompokkan dalam urutan tertentu, CSSComb akan benar-benar berguna. Tidak hanya tidak memungkinkan Anda untuk melakukan hal ini, tapi selain itu mempertahankan beberapa gaya Konvensi spasi, penggunaan tanda kutip, kawat gigi, usus besar, semi-kolon, terkemuka nol untuk nilai panjang, dan itu bekerja dengan baik dengan sintaks CSS pra-processor.

Penggunaan

Menginstal CSSComb biner melalui npm install csscomb -g
Membuat .csscomb.json dalam direktori root dari proyek, atau dalam direktori yang menyimpan file CSS.
Tambahkan konfigurasi CSSComb di .csscomb.json. Memeriksa terhadap daftar lengkap pilihan berlaku. Untuk membuatnya lebih mudah, Anda dapat menghasilkan file Config Builder melalui webapp Config Builder, atau menggunakan salah satu preset konfigurasi yang dapat ditemukan dalam repository.

Penggunaan

Gunakan perintah csscomb, seperti:

1	csscomb assets/css/style.css

Jika Anda suka, Anda dapat menjalankan CSSComb selama proses membangun dengan plugin Gulp atau Grunt. Bergantian, Anda dapat menggunakan plugin di editor kode Anda seperti Sublime Text yang luhur dan menjalankannya melalui Command Palette. Ada juga sebuah plugin yang tersedia untuk Brackets dan Atom.

3. StyleLint

StyleLint adalah alat yang meneliti CSS kami terhadap lebih dari seratus aturan-aturan yang ditetapkan, memproduksi peringatan dalam kasus pelanggaran. Beberapa pelanggaran tersebut mudah untuk memperbaiki dengan CSSComb, membuat alat besar untuk digunakan bergandengan tangan. CSSLint juga merupakan alat yang sempurna untuk melakukan peninjauan kode.

Penyebaran

Menginstal Stylint biner: npm install stylelint -g
Membuat .stylelintrc file dalam direktori root dari proyek Anda.
Termasuk aturan dalam .stylelintrc file, misalnya:

{
	"rules": {
		"color-hex-case": "lower",
		"color-hex-length": "short",
		"comment-empty-line-before": "always",
		"selector-no-combinator": true,
		"selector-no-id": true,
		"string-quotes": "double",
		"selector-no-type": true,
		"selector-no-universal": true,
		"selector-no-vendor-prefix": true
	}
}

Daftar lengkap Stylint peraturan dapat ditemukan pada halaman Rules.

Penggunaan

Menggunakan Stylelint melalui baris perintah (misalnya: stylelint "css/*.css"), PostCSS dengan plugin, atau menginstal plugin yang akan memungkinkan Anda untuk melihat peringatan secara langsung dalam kode editor. Plugin ini saat ini tersedia untuk Sublime Text, Atom, dan Visual Studio.

4. JSCS (JavaScript Code Style)

Seperti namanya, JSCS mengevaluasi gaya kode JavaScript Anda; dari menggunakan spasi, fungsi dan konvensi penamaan variabel, komentar blok, jeda baris dan banyak lebih. JSCS telah digunakan secara luas di proyek open source yang populer seperti jQuery, Bootstrap dan Ember.js, dan juga oleh perusahaan-perusahaan terkenal seperti Yandex dan Adobe. Perjanjian memang; Anda mungkin harus menggunakannya dalam proyek Anda juga!

Penyebaran

Instal JSCS CLI melalui npm menginstal jscs -g.
Membuat .jscsrc
Menentukan dan mengkonfigurasi aturan. Bergantian, menggunakan salah satu preset konfigurasi berasal dari proyek-proyek yang populer seperti "jquery", "airbnb", "google", "yandex", dan "wordpress".

1	{
2	"preset": "wordpress",
3	"requireCurlyBraces": true
4	}

Penggunaan

Dengan asumsi file JavaScript Anda disimpan dalam js/app.js, jalankan perintah: jscs js/app.js.

Untuk memperbaiki gaya kode, menjalankan jscs js/app.js--fix. Dalam teks luhur, Anda dapat menginstal JSCS Formatter untuk melakukannya tanpa meninggalkan kode editor. Sebuah plugin yang serupa disebut JSCS Fixer juga tersedia untuk Atom.

5. JSHint

Alat lain yang saya gunakan setiap hari untuk memeriksa JavaScript saya adalah JSHint. Tidak seperti JSC, Evaluasi JSHint didukung pada validitas kode, bukan hanya styling kode. JSHint juga akan menggantikan gaya gaya dalam rilis berikutnya, karena JSCS telah meningkatkan daya tarik dan melakukan pekerjaan dengan baik pada masalah khusus itu. Dengan demikian JSHint hanya akan mengecek penggunaan variabel, loop, operator pembanding, cakupan, level nesting, dan hal-hal teknis JavaScript lainnya yang mungkin menyebabkan masalah atau bug.

Penyebaran

Instal biner JSHint secara global melalui npm install jshint -g
Buat file bernama .jshintrc di direktori root proyek Anda.
Sertakan aturan JSHint di .jshintrc, misalnya:

{
	"boss": true,
	"eqeqeq": true,
	"eqnull": true,
	"expr": true,
	"immed": true,
	"noarg": true,
	"undef": true,
	"unused": true,
	"node": true
}

Menggunakan

Gunakan baris perintah jshint . Dengan asumsi Anda memiliki semua file JavaScript Anda yang disimpan dalam direktori bernama js , jalankan jshint js .

Bergantian, gunakan JSHint dengan plugin Gulp atau Grunt.Pengguna Sublime Text atau Atom dapat menginstal linter interface untuk SublimeText , Atom , memungkinkan Anda untuk melihat laporan kesalahan langsung di editor kode.

Tip: CodePen juga akan memeriksa JavaScript Anda untuk melakukan kesalahan menggunakan JSHint; Temukan opsi ini di panel Pengaturan JavaScript:

Membungkus

Jika Anda menggunakan alat ini mungkin Anda tampak tampak, gunakan Yeoman untuk menjadikannya sebagai scaffold. Setiap kali Anda atau tim Anda akan memulai proyek baru, Anda hanya perlu menekan satu baris perintah untuk menyiapkannya dalam beberapa detik. Untuk lebih jelasnya ikuti kursus Envato Tuts + tentang cara Membuat Custom Generator Yeoman.

Terakhir, memiliki alat-alat ini tidak hanya akan membantu kami untuk menghasilkan kode yang lebih baik dan meminimalkan kesalahan dalam kode kami, tetapi mereka akan melatih kami untuk menjadi pengembang web yang lebih baik. Pada awalnya, Anda mungkin menemukan kode Anda memiliki banyak kesalahan. Tapi, Anda akan segera menulis kode dengan lebih sedikit kesalahan, karena Anda mulai terbiasa dengan aturan.