Mari kita bahas tentang cara memigrasikan tslint ke eslint di Angular

 dan tambahkan @angular-eslint/schematics

Hasil berjalan:

• File .eslintrc.json secara otomatis dibuat di root, dan plugin eslint @angular-eslint digunakan secara default.

 {
  "akar": benar,
  "ignorePatterns": [
    "proyek/**/*"
  ],
  "menimpa": [
    {
      "file": [
        "*.ts"
      ],
      "parserOptions": {
        "proyek": [
          "tsconfig.json"
        ],
        "createDefaultProgram": benar
      },
      "meluas": [
        "plugin:@angular-eslint/direkomendasikan",
        "plugin:@angular-eslint/template/proses-inline-template"
      ],
      "aturan": {
        "@angular-eslint/directive-selector": [
          "kesalahan",
          {
            "tipe": "atribut",
            "awalan": "aplikasi",
            "gaya": "CamelCase"
          }
        ],
        "@angular-eslint/pemilih-komponen": [
          "kesalahan",
          {
            "tipe": "elemen",
            "awalan": "aplikasi",
            "gaya": "kotak kebab"
          }
        ]
      }
    },
    {
      "file": [
        "*.html"
      ],
      "meluas": [
        "plugin:@angular-eslint/template/direkomendasikan"
      ],
      "aturan": {}
    }
  ]
}

• Konfigurasi cli terkait eslint berikut ditambahkan ke angle.json. Jika Anda membuat lib atau aplikasi melalui baris perintah ng di masa mendatang, .eslintrc.json akan dibuat secara otomatis di bawah modul ini.

 "kli": {
	    "defaultCollection": "@angular-eslint/schematics"
  }

2. Hapus atau ganti file atau konfigurasi terkait tslint

• Hapus tslint.json di bawah direktori root atau modul
• Hapus paket ketergantungan dev terkait tslint, seperti tslint atau typescript-tslint-plugin dll.
• (Jika ada) Hapus konfigurasi terkait tslint-plugin di tsconfig.json, seperti

• Ubah konfigurasi tslint (jika ada) di bawah angle.json menjadi eslint, yang mungkin perlu dimodifikasi secara manual.

Konfigurasi tslint asli:

Konfigurasi eslint yang dimodifikasi (misalnya dikonfigurasi untuk mengeksekusi lint di direktori project/lint-test):

3. Jika Anda perlu mematikan sementara eslint, periksa beberapa kode atau file

• Tambahkan komentar berikut di atas kode untuk menonaktifkan sementara pemeriksaan eslint untuk kode tersebut

 /* eslint-nonaktifkan */
const some_un_used_var;

• Anda dapat menambahkan aturan ketika pemeriksaan eslint melaporkan kesalahan dalam komentar untuk menunjukkan alasan untuk menonaktifkan sementara pemeriksaan tersebut. Misalnya, dalam kode berikut, Anda tidak ingin variabel yang tidak digunakan diperiksa oleh eslint dan terjadi kesalahan.

 /* eslint-disable @typescript-eslint/no-unused-vars */
const some_un_used_var;

• Jika Anda perlu mematikan pemeriksaan eslint pada beberapa file, Anda dapat menambahkan file .eslintigore di bawah root.
• Pola yang memerlukan pemeriksaan lint dapat dikonfigurasi di .eslintrc (artikel ini tidak akan membahas detailnya, pengenalan resmi)

4. Periksa apakah bisa digunakan

Jalankan perintah serat

 ng serat

Jika berhasil berjalan, selamat telah menyelesaikan migrasi!

(Opsional) Plug-in eslint pendukung lainnya

• eslint-plugin-deprecation: Kode verifikasi tidak digunakan lagi
• eslint-plugin-header: Verifikasi apakah komentar header file mengikuti aturan tertentu (dapat digunakan untuk versi, verifikasi paten, dll.)
• eslint-plugin-import: Verifikasi kesalahan ejaan atau nama alamat impor, tata bahasa, dll.
• eslint-plugin-prefer-arrow: Validasi menggunakan fungsi panah
• eslint-plugin-unicorn: Verifikasi js, terkait sintaksis ts
• eslint-plugin-jsdoc: Terkait dokumentasi
• ...

Dapat dikonfigurasi di .eslintrc.json (dokumentasi resmi)

(Opsional) Konfigurasikan kode VS

Instal plugin eslint

Kode VS secara otomatis memperbaiki masalah terkait eslint saat menyimpan

Diatur di .vscode/settings.json

 "editor.codeActionsOnSave": { "source.fixAll.eslint": true }

Atau cari pengaturan penyimpanan di bawah File->Preferensi->Pengaturan untuk menemukan pengaturan terkait eslint.