Rumah  >  Artikel  >  hujung hadapan web  >  Mari kita bincangkan tentang cara memindahkan tslint ke eslint dalam Angular

Mari kita bincangkan tentang cara memindahkan tslint ke eslint dalam Angular

青灯夜游
青灯夜游ke hadapan
2022-03-31 11:44:143285semak imbas

Artikel ini akan membawa anda untuk terus belajar angular, bandingkan tslint dan eslint, dan memperkenalkan cara untuk memindahkan tslint ke eslint dalam Angular.

Mari kita bincangkan tentang cara memindahkan tslint ke eslint dalam Angular

Helo semua, Angular telah dinaik taraf daripada 12 kepada 13 baru-baru ini Pegawai telah mengalih keluar konfigurasi tslint secara automatik dalam angular.json, jadi lebih baik kita ikut susunan rasmi Eslint terpakai. [Cadangan tutorial berkaitan: "tutorial sudut"]

tslint vs eslint

lint类型 用处 现状
tslint 用来检查ts语法规范的插件 已经不再维护;Angular从11起弃用
eslint 检查js/ts代码规范 仍在维护,官方推荐

Cara untuk berhijrah

1. Pasang kebergantungan eslint dan jalankan arahan berikut:

ng add @angular-eslint/schematics

Jalankan hasil:

Fail
  • .eslintrc.json dijana secara automatik pada akar dan pemalam @angular-eslinteslint digunakan secara lalai.
{
  "root": true,
  "ignorePatterns": [
    "projects/**/*"
  ],
  "overrides": [
    {
      "files": [
        "*.ts"
      ],
      "parserOptions": {
        "project": [
          "tsconfig.json"
        ],
        "createDefaultProgram": true
      },
      "extends": [
        "plugin:@angular-eslint/recommended",
        "plugin:@angular-eslint/template/process-inline-templates"
      ],
      "rules": {
        "@angular-eslint/directive-selector": [
          "error",
          {
            "type": "attribute",
            "prefix": "app",
            "style": "camelCase"
          }
        ],
        "@angular-eslint/component-selector": [
          "error",
          {
            "type": "element",
            "prefix": "app",
            "style": "kebab-case"
          }
        ]
      }
    },
    {
      "files": [
        "*.html"
      ],
      "extends": [
        "plugin:@angular-eslint/template/recommended"
      ],
      "rules": {}
    }
  ]
}
  • Konfigurasi cli berkaitan eslint berikut ditambahkan pada angular.json Pada masa hadapan, jika anda menjana lib atau aplikasi melalui baris arahan ng, .eslintrc akan menjadi secara automatik dihasilkan di bawah modul ini
"cli": {
	    "defaultCollection": "@angular-eslint/schematics"
  }

2 Alih keluar atau gantikan fail atau konfigurasi yang berkaitan dengan tslint

  • Padam. direktori akar atau modul Padamkan pakej pergantungan dev yang berkaitan dengan tslint dalam tslint.json
  • , seperti tslint atau typescript-tslint-plugin, dsb.
  • (jika ada) Padamkan berkaitan tslint-plugin konfigurasi dalam tsconfig.json, seperti

Mari kita bincangkan tentang cara memindahkan tslint ke eslint dalam Angular

  • Tukar konfigurasi tslint (jika ada) di bawah angular.json kepada eslint, yang mungkin perlu diubah suai secara manual

Konfigurasi tslint asal:

Mari kita bincangkan tentang cara memindahkan tslint ke eslint dalam Angular

Konfigurasi eslint diubah suai (cth. dikonfigurasikan untuk melaksanakan lint dalam direktori projek/lint-test):

Mari kita bincangkan tentang cara memindahkan tslint ke eslint dalam Angular

3 Jika anda perlu mematikan pemeriksaan eslint untuk beberapa kod atau fail buat sementara waktu

  • Tambahkan ulasan berikut di atas kod untuk mematikan semakan kod eslint buat sementara waktu
/* eslint-disable */
const some_un_used_var;
  • Anda boleh menambah peraturan apabila semakan eslint melaporkan ralat dalam ulasan untuk menunjukkan sebab untuk mematikan cek buat sementara waktu. Contohnya, dalam kod berikut, jika anda tidak mahu pembolehubah yang tidak digunakan disemak oleh eslint dan membuang ralat
/* eslint-disable @typescript-eslint/no-unused-vars */
const some_un_used_var;
  • Jika anda perlu mematikan pemeriksaan eslint untuk sesetengah fail, anda boleh menambah fail .eslintignore di bawah akar
  • Anda boleh mengkonfigurasi corak yang memerlukan semakan lint .eslintrc (tidak diterangkan dalam artikel ini, pengenalan rasmi)

4 Periksa sama ada ia OK Gunakan

untuk menjalankan perintah lint

ng lint

Jika ia berjaya dijalankan, selamat menyempurnakan penghijrahan!

(Pilihan) Pemalam eslint sokongan lain

boleh dikonfigurasikan dalam .eslintrc.json (Dokumen Rasmi)

(Pilihan) Konfigurasikan kod VS

Pasang pemalam eslint

Mari kita bincangkan tentang cara memindahkan tslint ke eslint dalam Angular

Kod VS secara automatik membetulkan isu berkaitan eslint apabila menyimpan

Ditetapkan dalam . vscode/settings.json

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

Atau cari tetapan onsave di bawah Fail->Preferences->Tetapan, anda boleh menemui tetapan berkaitan eslint

Mari kita bincangkan tentang cara memindahkan tslint ke eslint dalam Angular

Untuk lebih banyak pengetahuan berkaitan pengaturcaraan, sila layari:Pengenalan kepada Pengaturcaraan! !

Atas ialah kandungan terperinci Mari kita bincangkan tentang cara memindahkan tslint ke eslint dalam Angular. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Artikel ini dikembalikan pada:juejin.cn. Jika ada pelanggaran, sila hubungi admin@php.cn Padam