Cara Menambah ESLint Dalam Projek React

Menambah peraturan Linting pada projek React adalah satu kemestian dalam hal meningkatkan kualiti kod, menjadikan kod lebih konsisten dan mengelakkan pepijat.

Artikel ini mula-mula diterbitkan pada blog MyDevPa.ge, semaknya untuk mendapatkan tutorial berguna untuk Pembangun Perisian.

Terdapat alat linting JavaScript sumber terbuka yang popular dipanggil ESLint, yang digunakan untuk mengesan corak yang salah secara automatik ditemui dalam kod JavaScript.

Berikut ialah kaedah langkah demi langkah untuk menambahkan peraturan linting pada projek React:

Memasang ESLint

Pertama, kami perlu memasang ESLint dalam projek React kami sebagai devDependencies kerana kami tidak memerlukannya dalam pengeluaran.

Untuk Memasang, kami akan menggunakan arahan di bawah.

npm i -D eslint

Mulakan ESLint

Seterusnya, kami perlu memulakan konfigurasi ESLint, dengan menambahkan fail konfigurasi .eslintrc.json dalam folder akar projek kami.

Berikut ialah contoh contoh konfigurasi.

{
  "extends": [
    "eslint:recommended",
    "plugin:import/errors",
    "plugin:react/recommended",
    "plugin:jsx-a11y/recommended"
  ],
  "plugins": ["react", "import", "jsx-a11y"],
  "rules": {
    // Here we can add our custom rules.
  },
  "parserOptions": {
    "ecmaVersion": 2021,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "env": {
    "es6": true,
    "browser": true,
    "node": true
  },
  "settings": {
    "react": {
      "version": "detect"
    }
  }
}

Di dalam .eslintrc.json kami tambahkan lanjutan dan sifat pemalam.

{
  "extends": [
    "eslint:recommended",
    "plugin:import/errors",
    "plugin:react/recommended",
    "plugin:jsx-a11y/recommended"
  ],
  "plugins": ["react", "import", "jsx-a11y"]
}

Memandangkan kami telah menambah pelbagai pemalam, kami perlu memasangnya terlebih dahulu sebagai devDependencies dengan menjalankan arahan yang diberikan di bawah.

npm install -D eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react

Menambah Peraturan

Peraturan digunakan untuk tujuan konfigurasi. Kami boleh menetapkan tahap ralat peraturan dalam tiga cara berbeza.

• mati atau 0: Ini akan mematikan peraturan.
• amaran atau 1: Ini akan menghidupkan peraturan sebagai amaran.
• ralat atau 2: Ini akan menghidupkan peraturan sebagai ralat.

? Lembaran cheat Strings JavaScript semua kaedah

Mari tambahkan beberapa peraturan pada fail konfigurasi kami, kami boleh tambahkan sebarang peraturan lain mengikut pilihan kami daripada senarai semua peraturan yang dinyatakan di atas.

"rules": {
  "react/prop-types": 0,
  "indent": ["error", 2],
  "linebreak-style": 1,
  "quotes": ["error", "double"]
}

Menambah Skrip untuk Linting

Akhir sekali, mari tambahkan beberapa arahan dalam harta package.json "skrip" kami untuk menjalankan ESLint.

"scripts": {
  "lint": "eslint \"src/**/*.{js,jsx}\"",
  "lint:fix": "eslint \"src/**/*.{js,jsx}\" --fix"
}

Tahniah, sekarang jika anda cuba menjalankan salah satu daripada arahan ini, ia sepatutnya berjaya!

Selepas ini, anda boleh terus menyesuaikan peraturan linting mengikut keinginan anda untuk memastikan ketekalan dan kualiti kod.

Lawati MyDevPa.ge untuk mencipta laman web portfolio percuma anda dalam seminit secara percuma!

Atas ialah kandungan terperinci Cara Menambah ESLint Dalam Projek React. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!