🥚 👴🏾 🚸 Prettier, ESLint, Husky, Lint-Staged, dan EditorConfig: Alat untuk Menulis Kode Rapi 🍿 👨‍👩‍👦‍👦 ✊🏽

Anda berusaha untuk menulis kode yang rapi, tetapi tidak tahu harus mulai dari mana ... Anda membaca panduan gaya, seperti ini dari Airbnb, mencoba mengikuti rekomendasi praktis dari para pakar terkemuka ... Apakah Anda harus menghapus kode yang tidak digunakan? Harus mencari variabel yang tidak perlu? Apakah Anda mencoba mengidentifikasi pola buruk yang digunakan dalam program Anda? Misalnya - Anda ingin mengerti, membaca seluk-beluk kode fungsi tertentu, apakah akan mengembalikan sesuatu atau tidak. Terdengar akrab? Masalahnya adalah sangat sulit bagi seorang programmer untuk melakukan banyak hal dan belajar banyak.

Mungkin Anda adalah pemimpin tim di bawah kepemimpinan siapa tim pengembang dari berbagai tingkatan bekerja? Apakah ada orang baru di tim Anda? Apakah itu mengganggu Anda bahwa kode yang mereka tulis tidak akan memenuhi standar Anda? Apakah hari-hari Anda berlalu dalam ujian kode orang lain, ketika pemeriksaan ini terutama menyangkut kepatuhan terhadap standar, dan bukan dengan logika program?

Penulis materi ini mengatakan bahwa ia dihadapkan dengan segala sesuatu yang dikhususkan untuk pertanyaan yang baru saja diajukan. Apa yang dia hadapi sangat melelahkan dan melelahkan. Di sini dia ingin berbicara tentang alat, aplikasi yang benar yang memungkinkan kita untuk menyelesaikan masalah di atas.

Yaitu, di sini kita akan berbicara tentang alat-alat seperti Prettier, ESLint, Husky, Lint-Staged, EditorConfig, dan tentang otomatisasi pemformatan dan pelapisan kode. Materi ini terutama berfokus pada pengembangan Bereaksi, tetapi prinsip-prinsip yang dibahas di sini dapat diterapkan dalam proyek web apa pun. Berikut adalah repositori di mana, antara lain, apa yang dibahas di sini dikompilasi.

Lebih cantik

Prettier adalah alat pemformatan kode yang bertujuan untuk menggunakan aturan kode keras untuk merancang program. Ini memformat kode secara otomatis. Ini tampilannya.

Lebih cantik memformat kode mengikuti aturan

▍ Kekuatan Lebih Cantik

Berikut adalah fitur dan fitur Prettier yang memungkinkan kami berbicara tentang kegunaan alat ini:

Merapikan basis kode yang ada. Menggunakan Prettier, Anda dapat melakukan ini secara harfiah hanya dengan satu perintah. Pemrosesan kode dalam jumlah besar secara manual akan membutuhkan lebih banyak waktu. Bayangkan, misalnya, tenaga kerja yang diperlukan untuk memformat 20.000 baris kode secara manual.
Lebih cantik mudah diimplementasikan. Prettier menggunakan pendekatan "rata-rata", paling tidak kontroversial untuk gaya ketika memformat kode. Karena proyek ini bersifat open source, banyak yang telah berkontribusi untuk itu, meningkatkannya dan memperhalus sudut tajam.
Lebih cantik memungkinkan Anda fokus pada penulisan kode, bukan memformatnya. Banyak yang tidak menyadari berapa banyak waktu dan upaya yang dihabiskan untuk memformat kode. Menggunakan Prettier memungkinkan Anda untuk tidak memikirkan memformat, tetapi melakukan pemrograman. Dalam kasus saya, misalnya, efisiensi kerja, terima kasih kepada Prettier, meningkat sebesar 10%.
Lebih cantik membantu pemula. Jika Anda seorang programmer pemula yang bekerja dalam tim yang sama dengan profesional yang serius, dan Anda ingin terlihat layak dengan latar belakang mereka, Prettier akan membantu Anda dalam hal ini.

▍ Mengkonfigurasi Prettier

Inilah cara menggunakan Prettier dalam proyek baru. Buat folder app , dan buka, jalankan perintah berikut di baris perintah:

 npm init -y

Berkat perintah ini, npm menginisialisasi proyek baru di folder app dengan membuat file package.json di dalamnya.

Saya, dalam bahan ini, akan menggunakan yarn , tetapi di sini Anda dapat menggunakan npm . Lebih cantik juga dapat dihubungkan ke proyek yang ada.

Instal paket yang prettier sebagai ketergantungan pengembangan proyek kami:

 yarn add --dev prettier

Berkat perintah ini, entri ketergantungan package.json akan ditambahkan ke package.json yang terlihat seperti ini:

 { "name": "react-boiler-plate", "version": "1.0.0", "description": "A react boiler plate", "main": "src/index.js", "author": "Adeel Imran", "license": "MIT", "scripts": {   "prettier": "prettier --write src/**/*.js" }, "devDependencies": {   "prettier": "^1.14.3" } }

Kita akan berbicara tentang apa arti garis yang "prettier": "prettier — write src/**/*.js" saat kemudian. Sementara itu, buat folder src di folder app . Di folder ini, buat file index.js , meskipun Anda dapat memberi nama apa pun yang Anda suka.

Kami akan menambahkan kode berikut ke file ini (dalam bentuk yang tidak enak dilihat ini):

 let person =                     { name: "Yoda",               designation: 'Jedi Master '               };             function trainJedi (jediWarrion) { if (jediWarrion.name === 'Yoda') { console.log('No need! already trained'); } console.log(`Training ${jediWarrion.name} complete`)             } trainJedi(person)             trainJedi({ name: 'Adeel',             designation: 'padawan' });

Jadi, saat ini kami memiliki file src/app/index.js , yang berisi kode yang dirancang dengan buruk.

Bagaimana cara memperbaikinya? Ada tiga pendekatan untuk bekerja dengan kode yang diformat dengan buruk:

Format kode ini secara manual.
Gunakan alat otomatis.
Biarkan apa adanya dan teruskan (Saya meminta Anda untuk tidak memilih pendekatan ini).

Saya akan memilih opsi kedua. Sekarang di proyek kami ada ketergantungan yang sesuai, dan, di samping itu, di bagian scripts dari file package.json ada catatan tentang Prettier. Jelas bahwa kita akan menggunakan alat ini untuk memformat kode. Untuk melakukan ini, buat file prettier.config.js di folder app dan tambahkan aturan untuk Prettier di sana:

 module.exports = { printWidth: 100, singleQuote: true, trailingComma: 'all', bracketSpacing: true, jsxBracketSameLine: false, tabWidth: 2, semi: true, };

Mari kita menganalisis aturan-aturan ini:

printWidth: 100 - panjang garis tidak boleh melebihi 100 karakter.
singleQuote: true - semua tanda kutip ganda akan dikonversi menjadi tanda kutip tunggal. Lihat Panduan Gaya Airbnb untuk lebih jelasnya. Saya sangat suka panduan ini, saya menggunakannya untuk meningkatkan kualitas kode saya.
trailingComma: 'all' - memberikan koma setelah properti terakhir objek. Inilah artikel bagus tentang topik ini.
bracketSpacing: true - bertanggung jawab untuk memasukkan ruang antara tubuh objek dan kurung kurawal dalam objek literal. Jika properti ini disetel ke true , maka objek yang dideklarasikan menggunakan literal objek akan terlihat seperti ini: { foo: bar } . Jika Anda menetapkannya ke false , maka konstruksi seperti itu akan terlihat seperti ini: {foo: bar} .
jsxBracketSameLine: false - berkat aturan ini, simbol > dalam elemen JSX multi-baris akan ditempatkan pada baris terakhir. Seperti apa kode ini jika aturan ini disetel ke true :

 <button className="prettier-class" id="prettier-id" onClick={this.handleClick}> Click Here </button>

Inilah yang terjadi jika disetel ke false :

 <button className="prettier-class" id="prettier-id" onClick={this.handleClick} > Click Here </button>

tabWidth: 2 - mengatur jumlah spasi per level perataan.
semi: true - jika aturan ini disetel ke true , maka titik koma ditambahkan di akhir ekspresi.

Temukan semua aturan cantik di sini.

Sekarang setelah aturannya dikonfigurasi, mari kita bicara tentang skrip ini:

 "prettier": "prettier  — write src/**/*.js"

Berkat desain ini, Prettier meluncurkan dan menemukan semua file .js di folder src . Bendera --write memberitahu dia untuk menyimpan file yang diformat saat mereka diproses dan memperbaiki kesalahan format yang ditemukan di dalamnya.

Jalankan skrip dari baris perintah:

 yarn prettier

Inilah yang terjadi setelah itu dengan kode yang diformat buruk seperti ditunjukkan di atas.

Hasil memformat kode dengan Prettier

Tentang ini kita akan berasumsi bahwa dengan Prettier kita tahu. Mari kita bicara tentang linter.

ESLint

Linting adalah jenis analisis kode statis yang sering digunakan untuk menemukan pola desain yang bermasalah atau kode yang tidak mengikuti pedoman gaya tertentu.

Ada linter yang dirancang untuk sebagian besar bahasa pemrograman, terkadang kompiler menyertakan linting dalam proses kompilasi kode. Definisi linting ini diambil dari halaman informasi sumber terbuka untuk sumber terbuka JavaScript JavaScript ESLint, yang akan kita bicarakan.

▍Mengapa saya membutuhkan linter untuk JavaScript?

Karena JavaScript adalah bahasa pemrograman dinamis dengan pengetikan yang lemah, kode yang ditulis di dalamnya rentan terhadap kesalahan yang dibuat oleh pengembang. JavaScript adalah bahasa yang ditafsirkan, jadi sintaks dan kesalahan lain dalam kode biasanya terdeteksi hanya setelah kode ini dijalankan.

Linter, seperti ESLint , memungkinkan pengembang menemukan masalah dalam kode tanpa memulainya.

▍Kenapa ESLint alat khusus?

Sebuah pertanyaan bagus telah diajukan pada judul bagian ini. Intinya di sini adalah bahwa ESLint mendukung plugin. Jadi, aturan verifikasi kode tidak boleh berupa paket monolitik. Semua yang Anda butuhkan dapat dihubungkan sesuai kebutuhan. Setiap aturan serat yang ditambahkan ke sistem bersifat otonom, dapat dinyalakan atau dimatikan, terlepas dari yang lain. Setiap aturan dapat diberi tingkat peringatan sesuai dengan keinginan pengembang - ini bisa berupa peringatan (warning) atau kesalahan (error).

Saat menggunakan ESLint, Anda bekerja dengan sistem yang sepenuhnya dapat disesuaikan yang dapat mencerminkan pemahaman Anda tentang seperti apa kode yang benar dan menangkap seperangkat aturan yang Anda ikuti.

Di antara panduan gaya JavaScript yang ada, berikut ini sangat populer:

Saya, sebagaimana telah disebutkan, menggunakan panduan gaya Airbnb. Saya disarankan oleh dokumen ini oleh manajer saya di perusahaan tempat karier profesional saya dimulai, dan saya menganggap panduan gaya ini sebagai aset saya yang paling berharga.

Panduan ini dikelola secara aktif - lihat repositori di GitHub. Di sini saya akan menggunakan seperangkat aturan berdasarkan itu.

Sekarang mari kita bekerja pada file package.json , tambahkan beberapa dependensi padanya:

 { "name": "react-boiler-plate", "version": "1.0.0", "description": "A react boiler plate", "main": "src/index.js", "author": "Adeel Imran", "license": "MIT", "scripts": {   "lint": "eslint --debug src/",   "lint:write": "eslint --debug src/ --fix",   "prettier": "prettier --write src/**/*.js" }, "husky": {   "hooks": {     "pre-commit": "lint-staged"   } }, "lint-staged": {   "*.(js|jsx)": ["npm run lint:write", "git add"] }, "devDependencies": {   "babel-eslint": "^8.2.3",   "eslint": "^4.19.1",   "eslint-config-airbnb": "^17.0.0",   "eslint-config-jest-enzyme": "^6.0.2",   "eslint-plugin-babel": "^5.1.0",   "eslint-plugin-import": "^2.12.0",   "eslint-plugin-jest": "^21.18.0",   "eslint-plugin-jsx-a11y": "^6.0.3",   "eslint-plugin-prettier": "^2.6.0",   "eslint-plugin-react": "^7.9.1",   "husky": "^1.1.2",   "lint-staged": "^7.3.0",   "prettier": "^1.14.3" } }

Sebelum berbicara tentang cara bekerja dengan konfigurasi ini, saya ingin memikirkan dependensi proyek yang ditambahkan ke package.json . Saya percaya bahwa sebelum menggunakan beberapa dependensi, Anda harus tahu peran apa yang mereka mainkan.

Oleh karena itu, kami akan membahas peran paket yang disajikan di sini:

babel-eslint - memungkinkan Anda menggunakan linting untuk menerapkan semua yang diberikan Babel . Anda tidak memerlukan plugin ini jika Anda tidak menggunakan fitur Flow atau eksperimental yang belum didukung ESLint.
eslint adalah alat utama yang digunakan untuk kode kode.
eslint-config-airbnb - Menyediakan aturan Airbnb sebagai konfigurasi yang dapat dimodifikasi.
eslint-plugin-babel adalah plugin ESLint yang melengkapi plugin babel-eslint . Itu mendesain ulang aturan yang, ketika menggunakan babel-eslint , menyebabkan masalah saat memproses fitur eksperimental.
eslint-plugin-import - paket ini mendukung penautan konstruksi sintaks import/export dan membantu mencegah masalah yang terkait dengan kesalahan pengejaan jalur file dan nama modul yang diimpor.
eslint-plugin-jsx-a11y - menyediakan aturan tentang ketersediaan elemen JSX untuk penyandang cacat. Aksesibilitas web sangat penting.
eslint-plugin-prettier - Membantu ESLint dan Prettier bekerja bersama. Ini terlihat seperti ini: ketika Prettier memformat kode, ia melakukannya dengan mempertimbangkan aturan ESLint.
eslint-plugin-react - berisi aturan ESLint yang dirancang untuk Bereaksi.

Pada artikel ini, kita tidak berbicara tentang pengujian kode, tetapi dalam package.json atas, ada dependensi yang dirancang untuk pengujian unit menggunakan Jest / Enzyme . Sekarang, jika Anda memutuskan untuk menggunakan alat ini untuk pengujian, deskripsi paket yang relevan.

eslint-config-jest-enzyme - paket ini dirancang untuk kasus-kasus ketika Anda menggunakan jest-environment-enzyme , yang mengarah pada fakta bahwa variabel Bereaksi dan Enzim bersifat global. Berkat itu, ESLint tidak akan mengeluarkan peringatan tentang variabel tersebut.
eslint-plugin-jest — Plugin ESlint untuk Jest.

Ada beberapa paket lagi dalam file yang akan kita bahas nanti, membahas masalah otomatisasi. Ini husky dan lint-staged .

Sekarang kami telah, secara umum, mendiskusikan alat kami, kami akan terus bekerja.
Buat file .eslintrc.js di folder app :

 module.exports = {   env: {       es6: true,       browser: true,       node: true,   },   extends: ['airbnb', 'plugin:jest/recommended', 'jest-enzyme'],   plugins: [       'babel',       'import',       'jsx-a11y',       'react',       'prettier',   ],   parser: 'babel-eslint',   parserOptions: {       ecmaVersion: 6,       sourceType: 'module',       ecmaFeatures: {           jsx: true       }   },   rules: {       'linebreak-style': 'off', //    Windows.       'arrow-parens': 'off', //   prettier       'object-curly-newline': 'off', //   prettier       'no-mixed-operators': 'off', //   prettier       'arrow-body-style': 'off', //  -   ?       'function-paren-newline': 'off', //   prettier       'no-plusplus': 'off',       'space-before-function-paren': 0, //   prettier       'max-len': ['error', 100, 2, { ignoreUrls: true, }], // airbnb           'no-console': 'error', // airbnb         'no-alert': 'error', // airbnb         'no-param-reassign': 'off', //  -   ?       "radix": "off", // parseInt, parseFloat  radix .    .       'react/require-default-props': 'off', // airbnb           'react/forbid-prop-types': 'off', // airbnb           'react/jsx-filename-extension': ['error', { extensions: ['.js'] }], // airbnb  .jsx       'prefer-destructuring': 'off',       'react/no-find-dom-node': 'off', //           'react/no-did-mount-set-state': 'off',       'react/no-unused-prop-types': 'off', //            'react/jsx-one-expression-per-line': 'off',       "jsx-a11y/anchor-is-valid": ["error", { "components": ["Link"], "specialLink": ["to"] }],       "jsx-a11y/label-has-for": [2, {           "required": {               "every": ["id"]           }       }], //     htmlFor  label       'prettier/prettier': ['error'],   }, };

Sekarang tambahkan file .eslintignore ke folder app :

 /.git /.vscode node_modules

Sekarang mari kita bicara tentang bagaimana file .eslintrc.js , dan tentang arti dari konstruksi yang disajikan di dalamnya.

File ini memiliki struktur berikut:

 module.exports = {  env:{},  extends: {},  plugin: {},  parser: {},  parserOptions: {},  rules: {}, };

Pertimbangkan blok file ini yang diwakili oleh objek dengan nama yang sesuai:

env - memungkinkan Anda menentukan daftar lingkungan tempat Anda berencana memeriksa kode. Dalam kasus kami, ada es6 , browser dan properti node yang disetel ke true . Parameter es6 mencakup fitur ES6, dengan pengecualian modul (fitur ini secara otomatis mengatur, di blok parserOptions , parameter ecmaVersion ke 6 ). Parameter browser variabel browser global seperti Windows . Parameter node menambahkan variabel dan cakupan lingkungan Node.js global, misalnya, global . Detail tentang lingkungan dapat ditemukan di sini .
extends - adalah larik baris dengan konfigurasi, dengan setiap konfigurasi tambahan meluas yang sebelumnya. Aturan airbnb Airbnb digunakan di airbnb , yang diperluas menjadi jest dan kemudian diperluas menjadi jest-enzyme .
plugins - berikut adalah aturan linting yang ingin kita gunakan. Kami menerapkan aturan babel , import , jsx-a11y , react , prettier , yang sudah kita bicarakan.
parser - Secara default, ESLint menggunakan parser Espree, tetapi karena kita bekerja dengan Babel, kita perlu menggunakan Babel-ESLint .
parserOptions - karena kita mengubah parser standar menjadi babel-eslint , kita juga perlu mengatur properti di blok ini. Properti ecmaVersion diatur ke 6 menunjukkan kepada ESLint bahwa kode ES6 akan diperiksa. Karena kita menulis kode dalam modul EcmaScript , properti sourceType diatur ke module . Dan akhirnya, karena kita menggunakan React, yang berarti menggunakan JSX, objek dengan kunci jsx diset ke true ditulis ke properti ecmaFeatures .
rules - Saya paling suka bagian dari file .eslintrc.js karena memungkinkan Anda untuk mengkonfigurasi aturan ESLint. Semua aturan yang kami kembangkan atau tambahkan menggunakan plugin dapat diubah atau didefinisikan ulang, dan ini dilakukan di blok rules . Teks file berisi komentar tentang aturan.

Sekarang mari kita bicara tentang file .eslintignore . File ini menerima daftar jalur yang mewakili folder yang isinya tidak boleh diproses menggunakan ESLint.

Tiga folder didefinisikan di sini:

/.git - Saya tidak perlu ESLint untuk memeriksa file yang terkait dengan Git.
/.vscode - proyek memiliki folder ini karena saya menggunakan VS Code. Di sini editor menyimpan informasi konfigurasi yang dapat diatur untuk setiap proyek. Data ini juga tidak boleh diproses oleh linter.
node-modules - file dependensi juga tidak perlu diperiksa dengan linter.

Sekarang mari kita lihat beberapa skrip baru yang muncul di package.json . Inilah mereka:

 "lint": "eslint --debug src/" "lint:write": "eslint --debug src/ --fix"

Jika Anda mengeksekusi yang pertama dari mereka, menggunakan yarn lint atau npm run lint command, ini akan menyebabkan linter melihat semua file di direktori src dan menampilkan laporan terperinci pada file yang ditemukan kesalahan. Dengan menggunakan laporan ini, Anda dapat memperbaiki kesalahan ini.

Menjalankan skrip serat

Jika Anda menjalankan skrip kedua ( yarn lint:write ), maka ESLint akan melakukan pemeriksaan yang sama dengan yang dilakukan sebelumnya. Satu-satunya perbedaan adalah bahwa dalam mode ini, sistem akan mencoba memperbaiki kesalahan yang terdeteksi, mencoba membawa kode dalam bentuk yang paling layak.

Ekstensi ESLint untuk Kode VS

Kami sudah memiliki Prettier dan ESLint yang dikonfigurasi, tetapi untuk menggunakan kemampuan alat-alat ini, kami harus menjalankan skrip. Ini sangat tidak nyaman, jadi cobalah untuk memperbaikinya. Yaitu, kami ingin memastikan bahwa pemformatan dan linting kode dilakukan oleh perintah untuk menyimpan file dalam editor. Selain itu, kami ingin melakukan linting dan format kode sebelum melakukan.

Kami, sebagai contoh, menggunakan editor VS Code. Kami akan membutuhkan ekstensi ESLint untuk Kode VS. Untuk menginstalnya, Anda dapat membuka panel ekstensi Kode VS ( ctrl+shift+x ). Di sini, di bidang pencarian, masukkan eslint . Daftar ekstensi muncul. Yang menarik bagi kami adalah orang yang informasi pengembangnya adalah Dirk Baeumer. Setelah menginstal ekstensi ini, mulai ulang editor.

Sekarang, di folder root proyek ( app ), buat folder .vscode (perhatikan titik di awal nama - ini penting). Di folder ini, buat file settings.json dengan konten berikut:

 { "editor.formatOnSave": false, "eslint.autoFixOnSave": true, }

Pertimbangkan isinya.

Properti editor.formatOnSave disetel ke false menunjukkan bahwa kita tidak memerlukan konfigurasi standar untuk menerapkan pemformatan file, karena ini dapat menyebabkan konflik dengan ESLint dan Prettier.
Properti eslint.autoFixOnSave disetel ke true , karena itu perlu bahwa plug-in yang diinstal akan menyala setiap kali file disimpan. Karena ESLint dan Prettier bekerja bersama dalam suatu proyek, menyimpan file mengarah ke pemformatan dan linting kode.

Penting untuk dicatat bahwa sekarang, ketika skrip lint:write dijalankan, ia akan melakukan pemformatan linting dan kode.

Bayangkan perasaan Anda jika Anda mendapatkan kode proyek 20.000 baris yang perlu Anda periksa dan tingkatkan. Sekarang bayangkan Anda harus melakukan ini secara manual. Pekerjaan seperti itu mungkin akan memakan waktu satu bulan. Dan dengan bantuan alat otomasi di atas, semua ini dilakukan dalam waktu sekitar tiga puluh detik.

Sekarang, setelah mengatur semua yang Anda butuhkan, setiap kali Anda menyimpan file dengan kode, editor akan memeriksa dan memformat teks program. Namun, di sini kita berbicara tentang editor VS Code. Ada kemungkinan bahwa seseorang di tim Anda lebih memilih editor lain. Tidak ada yang salah dengan itu, tetapi untuk membuatnya nyaman bagi semua orang untuk bekerja, kita harus mengerjakan sesuatu yang lain untuk diotomatisasi.

Husky

Paket Husky memungkinkan Anda untuk menggunakan kait Git. Ini berarti Anda memiliki kesempatan untuk melakukan tindakan tertentu sebelum melakukan atau sebelum mengirim kode repositori.

Untuk memanfaatkan fitur Husky, instal dulu paket ini:

 yarn add --dev husky

Setelah itu, tambahkan yang berikut ke package.json :

 "husky": {     "hooks": {         "pre-commit": "YOUR_COMMAND_HERE",    "pre-push": "YOUR_COMMAND_HERE"    } },

Ini akan mengarah pada fakta bahwa sebelum menjalankan perintah commit atau push , skrip tertentu akan dipanggil, yang, misalnya, melakukan pengujian atau pemformatan kode.

Rincian tentang Husky dapat ditemukan di sini .

Lint-dipentaskan

Paket Lint-staged memungkinkan Anda untuk memeriksa file yang diindeks menggunakan linter, yang membantu mencegah kesalahan dikirim ke repositori.

Linting masuk akal sebelum melakukan kode. Berkat ini, Anda dapat memastikan bahwa kesalahan tidak menembus repositori, dan memberikan gaya terpadu dari kode yang sampai di sana. Namun, verifikasi untuk memverifikasi seluruh proyek mungkin merupakan tugas yang terlalu lama, dan hasil verifikasi tersebut mungkin tidak ada artinya. Pada akhirnya, linting mungkin perlu mengekspos file yang ingin Anda komit.

Tahap-bertahap memungkinkan Anda untuk melakukan serangkaian tugas sewenang-wenang pada file yang diindeks difilter oleh pola pencarian. Detail tentang ini dapat ditemukan di sini .

Instal paket Stadium-bertahap:

 yarn add --dev lint-staged

Kemudian, dalam file package.json , tambahkan berikut ini:

 "lint-staged": {     "*.(js|jsx)": ["npm run lint:write", "git add"] },

Berkat konstruksi ini, perintah lint:write akan dijalankan terlebih dahulu, memeriksa isi file dan memperbaiki kesalahan, setelah itu file akan ditambahkan ke indeks dengan perintah git add . Sekarang perintah ini ditujukan untuk file .js dan .jsx , tetapi hal yang sama dapat dilakukan dengan file jenis lain.

Berbagi Husky dan Lint-Staged

Pertimbangkan diagram tindakan yang memungkinkan Anda untuk mengatur alur kerja berikutnya. Setiap kali Anda mengkomit file dengan kode, sebelum melakukan operasi ini, sistem menjalankan skrip lint-staged , yang, pada gilirannya, menjalankan skrip lint:write , yang melakukan linting dan pemformatan kode. Setelah itu, file ditambahkan ke indeks dan kemudian dikomit. Menurut saya itu sangat nyaman. Bahkan, dalam kode file package.json disajikan sebelumnya, ini sudah diterapkan, kami hanya tidak membicarakan hal ini sebelumnya.

Ini adalah isi dari paket kami. Kembali lagi:

 { "name": "react-boiler-plate", "version": "1.0.0", "description": "A react boiler plate", "main": "src/index.js", "author": "Adeel Imran", "license": "MIT", "scripts": {   "lint": "eslint --debug src/",   "lint:write": "eslint --debug src/ --fix",   "prettier": "prettier --write src/**/*.js" }, "husky": {   "hooks": {     "pre-commit": "lint-staged"   } }, "lint-staged": {   "*.(js|jsx)": ["npm run lint:write", "git add"] }, "devDependencies": {   "babel-eslint": "^8.2.3",   "eslint": "^4.19.1",   "eslint-config-airbnb": "^17.0.0",   "eslint-config-jest-enzyme": "^6.0.2",   "eslint-plugin-babel": "^5.1.0",   "eslint-plugin-import": "^2.12.0",   "eslint-plugin-jest": "^21.18.0",   "eslint-plugin-jsx-a11y": "^6.0.3",   "eslint-plugin-prettier": "^2.6.0",   "eslint-plugin-react": "^7.9.1",   "husky": "^1.1.2",   "lint-staged": "^7.3.0",   "prettier": "^1.14.3" } }

Sekarang setelah Anda tahu tentang Husky dan stadium-Lint, Anda dapat mengevaluasi dampaknya pada bekerja dengan Git. Yaitu, misalkan perintah berikut dijalankan:

 $ git add . $ git commit -m "some descriptive message here"

Jelas bahwa sebelum melakukan, kode akan diperiksa kepatuhannya terhadap aturan yang ditentukan dalam .eslintrc.js dan, jika perlu, diperbaiki. Berkat ini, kesalahan tidak akan pernah masuk ke repositori proyek yang berfungsi.

Sekarang Anda tahu bagaimana mengintegrasikan Prettier, ESLint, Husky dan Lint-dipentaskan ke dalam proyek Anda.

Biarkan saya mengingatkan Anda bahwa kami katakan di atas bahwa tidak semua anggota tim Anda menggunakan VS Code favorit saya. Agar semuanya dapat bekerja dengan nyaman, kita perlu berurusan dengan file .editorconfig .

File .Editorconfig

Anggota tim Anda yang berbeda dapat menggunakan editor yang berbeda. Memaksa mereka menggunakan editor mana saja untuk apa saja. Namun, agar semua orang menggunakan pengaturan yang sama, menyangkut, misalnya, indentasi atau umpan baris, kami menggunakan file. editorconfig . .

, . , , WebStorm, AppCode, Atom, Eclipse, Emacs, BBEdit .

app .editorconfig :

 # EditorConfig -  : http://EditorConfig.org #  EditorConfig   root = true [*.md] trim_trailing_whitespace = false [*.js] trim_trailing_whitespace = true #     Unix       [*] indent_style = space indent_size = 2 end_of_line = lf charset = utf-8 insert_final_newline = true max_line_length = 100

, :

trim_trailing_whitespace = false — .md - . .js - false .
indent_style = space — .
indent_size = 2 — .
end_of_line = lf — lf . , , . .
insert_final_newline = true — .
max_line_length = 100 — 100 .

Ringkasan

, , , . , , .

Pembaca yang budiman! ? ?

Prettier, ESLint, Husky, Lint-Staged, dan EditorConfig: Alat untuk Menulis Kode Rapi