Bagaimana mengintegrasikan Prettier dengan ESLint dan stylelint

atau Bagaimana agar tidak pernah khawatir tentang penataan kode lagi

ESLint dan stylelint adalah alat yang sangat menakjubkan yang memungkinkan Anda menerapkan pola pengkodean di antara tim Anda. Ini memiliki banyak manfaat, seperti menghasilkan kode yang lebih baik dan lebih konsisten, menghilangkan diff yang tidak berguna dalam commit (baris baru, indentasi, dkk.) Di antara banyak lainnya.

Namun seiring waktu, ini bisa menjadi sedikit kerumitan di antara pengembang tim, yang merasa beban mental ekstra untuk menambahkan titik koma, baris baru, lekukan, dll secara manual hanya untuk menyesuaikan dengan aturan lint. Di sinilah alat pemformatan kode seperti Prettier masuk.

Lebih cantik dapat diatur untuk secara otomatis memformat kode Anda sesuai dengan beberapa aturan yang ditentukan. Jika Anda menggunakan VSCode, Anda bahkan dapat memiliki kode Anda diformat setiap kali Anda menekan simpan (saya yakin pasti ada cara untuk mengatur ini di editor lain tetapi saya belum memeriksanya.)

Namun, Anda tidak ingin membuat file konfigurasi Prettier baru, karena Anda sudah memiliki semua aturan terkait pemformatan yang ditentukan di ESLint dan stylelint Anda.file konfigurasi. Jadi, kita membutuhkan sihir untuk itu. ✨

Sekarang mari selami langkah demi langkah tentang cara mengatur semua ini, dan juga cara memformat semua kode yang ada sesuai dengan aturan lint. Panduan ini mengasumsikan bahwa proyek Anda sudah memiliki ESLint dan stylelint mengatur dengan mereka .eslintrcdan .stylelintrcfile.

BAGIAN 1: Memformat basis kode yang ada

Langkah 1

Instal prettier-eslint, yaitu alat yang memformat JavaScript Anda menggunakan Prettier diikuti oleh eslint --fix. Ini --fixadalah fitur ESLint yang mencoba memperbaiki beberapa masalah secara otomatis untuk Anda.

npm install --save-dev prettier-eslint

Alat ini menyimpulkan opsi konfigurasi Prettier yang setara dari file .eslintrc Anda yang ada . Jadi Anda tidak perlu membuat file .prettierrc baru dalam banyak kasus.

Langkah 2

Instal prettier-eslint-cli. Ini adalah alat CLI yang akan membantu Anda menjalankan semua file Anda melalui prettier-eslint sekaligus.

npm install --save-dev prettier-eslint-cli

LANGKAH 3

Instal prettier-stylelint, yang merupakan alat yang memformat CSS / SCSS Anda dengan Prettier diikuti oleh stylelint —-fix. Seperti ESLint, --fixadalah fitur stylelint yang mencoba memperbaiki beberapa masalah secara otomatis untuk Anda.

npm install prettier-stylelint --save-dev

Alat ini juga mencoba membuat konfigurasi yang lebih cantik berdasarkan konfigurasi stylelint.

Perhatikan bahwa tidak seperti prettier-eslint, Anda tidak perlu menginstal paket lain untuk CLI-nya karena sudah termasuk di dalamnya.

LANGKAH 4

Tuliskan skrip di dalam package.jsonpenargetan Anda pada file yang ada dalam basis kode yang ingin Anda jalankan melalui prettier-eslint dan prettier-stylelint.

"scripts": {
 "fix-code": "prettier-eslint --write 'src/**/*.{js,jsx}' ",
 "fix-styles": "prettier-stylelint --write 'src/**/*.{css,scss}' "
}

Seperti yang Anda lihat, saya menargetkan semua JS dan JSX saya yang ada dan semua CSS dan SCSS saya yang ada.

The --writebendera menulis perubahan-tempat untuk file saat ini sedang diformat. Jadi, berhati-hatilah dan pastikan bahwa semua file Anda yang ada berada di bawah kendali sumber dan tidak ada perubahan yang tidak terikat .

LANGKAH 5

Jalankan skripnya!

npm run fix-codenpm run fix-styles

Sekarang, Anda dapat memeriksa semua perubahan baru ini sebagai satu komit besar (bahkan mungkin dari pengguna git sementara, jika Anda tidak ingin mencemari riwayat git Anda sendiri.)

Bagian 2: Menyiapkan VSCode

Sekarang basis kode Anda yang ada diformat, saatnya untuk memastikan bahwa semua kode yang ditulis selanjutnya diformat secara otomatis.

Langkah 1

Instal ekstensi Prettier, ESLint, dan stylelint untuk VSCode:

Lebih cantik - Pemformat kode - Visual Studio Marketplace

Ekstensi untuk Visual Studio Code - plugin VS Code untuk marketplace yang lebih cantik / cantik.visualstudio.com ESLint - Visual Studio Marketplace

Ekstensi untuk Visual Studio Code - Mengintegrasikan ESLint JavaScript ke VS Code. marketplace.visualstudio.com stylelint - Visual Studio Marketplace

Ekstensi untuk Visual Studio Code - Modern CSS / SCSS / Less linter marketplace.visualstudio.com

Langkah 2

Konfigurasikan beberapa pengaturan VSCode:

"prettier.eslintIntegration": true - memberitahu Prettier untuk menggunakan prettier-eslint daripada Prettier

"prettier.stylelintIntegration": true - memberitahu Prettier untuk menggunakan prettier-stylelint daripada Prettier

"eslint.autoFixOnSave": false- kita tidak memerlukan ESLint untuk memperbaiki kode kita secara langsung, karena prettier-eslint akan tetap berjalan eslint --fixuntuk kita.

"editor.formatOnSave": true - menjalankan Prettier dengan opsi di atas pada setiap penyimpanan file, jadi Anda tidak perlu menjalankan perintah format VSCode secara manual.

Selain itu, Anda dapat memeriksa pengaturan tempat kerja di atas untuk mengontrol sumber sehingga lebih mudah bagi anggota tim lain untuk menyiapkan editor mereka. Anda dapat melakukannya dengan membuat .vscodefolder di root proyek Anda dan meletakkan semua aturan di atas dalam sebuah settings.jsonfile.

Secara opsional, Anda dapat memberi tahu Prettier untuk mengabaikan pemformatan pola file tertentu. Untuk melakukan ini, cukup tambahkan .prettierignorefile ke root proyek Anda dengan menentukan jalur yang akan diabaikan. Contohnya:

strings.jsonscripts/*

Dan itu dia! Tidak pernah khawatir tentang penataan kode lagi?

Artikel ini sama sekali tidak dimaksudkan sebagai panduan lengkap, melainkan pengantar tentang apa yang mungkin dilakukan dengan alat luar biasa yang disebutkan di sini. Saya merekomendasikan membuka halaman GitHub resmi untuk masing-masing untuk mempelajari lebih lanjut tentang cara menggunakan alat ini secara lebih efektif untuk alur kerja spesifik Anda.

Silakan tulis komentar di bawah ini untuk bantuan, saran, dll.

Referensi

//prettier.io/docs/en/

//stylelint.io/user-guide/

//eslint.org/

//github.com/prettier/prettier-vscode

//github.com/prettier/prettier-eslint

//github.com/prettier/prettier-eslint-cli

//github.com/hugomrdias/prettier-stylelint

//www.youtube.com/watch?v=YIvjKId9m2c