เรามาพูดถึงวิธีโยกย้าย tslint ไปยัง eslint ใน Angular กัน

 ng เพิ่ม @ เชิงมุม-eslint/schematics

ผลการวิ่ง:

• ไฟล์ .eslintrc.json ถูกสร้างขึ้นโดยอัตโนมัติที่รูท และปลั๊กอิน @angular-eslint eslint จะถูกใช้ตามค่าเริ่มต้น

 -
  "รูต": จริง
  "ignorePatterns": [
    "โครงการ/**/*"
  -
  "แทนที่": [
    -
      "ไฟล์": [
        "*.ที"
      -
      "parserOptions": {
        "โครงการ": [
          "tsconfig.json"
        -
        "createDefaultProgram": จริง
      -
      "ขยาย": [
        "ปลั๊กอิน:@angular-eslint/recommended",
        "ปลั๊กอิน:@angular-eslint/template/process-inline-templates"
      -
      "กฎ": {
        "@เชิงมุม-eslint/ตัวเลือกคำสั่ง": [
          "ข้อผิดพลาด",
          -
            "type": "แอตทริบิวต์",
            "คำนำหน้า": "แอป",
            "สไตล์": "camelCase"
          -
        -
        "@เชิงมุม-eslint/ส่วนประกอบตัวเลือก": [
          "ข้อผิดพลาด",
          -
            "type": "องค์ประกอบ",
            "คำนำหน้า": "แอป",
            "style": "เคบับ-กรณี"
          -
        -
      -
    -
    -
      "ไฟล์": [
        "*.html"
      -
      "ขยาย": [
        "ปลั๊กอิน:@angular-eslint/template/recommended"
      -
      "กฎ": {}
    -
  -
-

• การกำหนดค่า cli ที่เกี่ยวข้องกับ eslint ต่อไปนี้จะถูกเพิ่มลงใน angular.json หากคุณสร้าง lib หรือแอปพลิเคชันผ่านบรรทัดคำสั่ง ng ในอนาคต .eslintrc.json จะถูกสร้างขึ้นโดยอัตโนมัติภายใต้โมดูลนี้

 "คลิ": {
	    "defaultCollection": "@เชิงมุม-eslint/แผนงาน"
  -

2. ลบหรือแทนที่ไฟล์หรือการกำหนดค่าที่เกี่ยวข้องกับ tslint

• ลบ tslint.json ใต้ไดเรกทอรีรากหรือโมดูล
• ลบแพ็คเกจการพึ่งพาการพัฒนาที่เกี่ยวข้องกับ tslint เช่น tslint หรือ typescript-tslint-plugin เป็นต้น
• (ถ้ามี) ลบการกำหนดค่าที่เกี่ยวข้องกับ tslint-plugin ใน tsconfig.json เช่น

• เปลี่ยนการกำหนดค่า tslint (ถ้ามี) ภายใต้ angular.json เป็น eslint ซึ่งอาจจำเป็นต้องแก้ไขด้วยตนเอง

การกำหนดค่า tslint ดั้งเดิม:

แก้ไขการกำหนดค่า eslint (เช่นกำหนดค่าให้เรียกใช้งาน lint ในไดเร็กทอรี project/lint-test):

3. หากคุณต้องการปิดการตรวจสอบ eslint ของโค้ดหรือไฟล์บางไฟล์ชั่วคราว

• เพิ่มความคิดเห็นต่อไปนี้เหนือโค้ดเพื่อปิดการตรวจสอบ eslint สำหรับโค้ดนั้นชั่วคราว

 /* eslint-ปิดการใช้งาน */
const some_un_used_var;

• คุณสามารถเพิ่มกฎได้เมื่อการตรวจสอบ eslint รายงานข้อผิดพลาดในความคิดเห็น เพื่อระบุเหตุผลในการปิดการตรวจสอบชั่วคราว ตัวอย่างเช่น ในโค้ดต่อไปนี้ คุณไม่ต้องการให้ eslint ตรวจสอบตัวแปรที่ไม่ได้ใช้และมีข้อผิดพลาดเกิดขึ้น

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

• หากคุณต้องการปิดการตรวจสอบ eslint ของบางไฟล์ คุณสามารถเพิ่มไฟล์ .eslintignore ใต้รูทได้
• รูปแบบที่ต้องมีการตรวจสอบ Lint สามารถกำหนดค่าได้ใน .eslintrc (บทความนี้จะไม่ลงรายละเอียด บทนำอย่างเป็นทางการ)

4.ตรวจสอบว่าสามารถใช้งานได้หรือไม่

เรียกใช้คำสั่งผ้าสำลี

 เป็นผ้าสำลี

หากดำเนินการได้สำเร็จ ขอแสดงความยินดีที่การย้ายข้อมูลเสร็จสมบูรณ์!

(ทางเลือก) ปลั๊กอิน eslint ที่รองรับอื่นๆ

• eslint-plugin-deprecation: ตรวจสอบว่าโค้ดเลิกใช้แล้ว
• eslint-plugin-header: ตรวจสอบว่าความคิดเห็นส่วนหัวของไฟล์เป็นไปตามกฎบางอย่างหรือไม่ (สามารถใช้สำหรับเวอร์ชัน การตรวจสอบสิทธิบัตร ฯลฯ)
• eslint-plugin-import: ตรวจสอบการสะกดที่อยู่การนำเข้าหรือข้อผิดพลาดของชื่อ ไวยากรณ์ ฯลฯ
• eslint-plugin-prefer-arrow: ตรวจสอบโดยใช้ฟังก์ชันลูกศร
• eslint-plugin-unicorn: ตรวจสอบ js, ts ที่เกี่ยวข้องกับไวยากรณ์
• eslint-plugin-jsdoc: เอกสารที่เกี่ยวข้อง
• -

สามารถกำหนดค่าได้ใน .eslintrc.json (เอกสารอย่างเป็นทางการ)

(ไม่บังคับ) กำหนดค่าโค้ด VS

ติดตั้งปลั๊กอิน eslint

รหัส VS จะแก้ไขปัญหาที่เกี่ยวข้องกับ eslint โดยอัตโนมัติเมื่อบันทึก

ตั้งใน .vscode/settings.json

 "editor.codeActionsOnSave": { "source.fixAll.eslint": จริง }

หรือค้นหาการตั้งค่า onsave ภายใต้ File->Preferences->Settings เพื่อค้นหาการตั้งค่าที่เกี่ยวข้องกับ eslint