Projek permulaan vue eslint tidak boleh dimulakan

Apabila menggunakan Vue untuk memulakan projek, anda mungkin menghadapi masalah yang tidak dapat dimulakan oleh eslint. Ini mungkin disebabkan oleh konfigurasi yang salah atau kebergantungan yang salah dalam projek. Artikel ini akan memperkenalkan beberapa cara untuk menyelesaikan masalah ini.

Mengapa menggunakan eslint

eslint ialah alat spesifikasi kod JavaScript yang digunakan secara meluas yang boleh menyemak kemungkinan ralat dan format bukan standard dalam kod, dengan itu meningkatkan kualiti dan kebolehselenggaraan kod . Dalam projek Vue, eslint bukan sahaja boleh menyemak kod JavaScript, tetapi juga templat dan gaya dalam komponen Vue.

Dalam Vue CLI, eslint didayakan secara lalai dan peraturan pemeriksaan serta pemalam boleh diubah suai melalui fail konfigurasi. Walau bagaimanapun, jika eslint gagal dimulakan, projek mungkin mempunyai beberapa ralat dan isu prestasi yang sukar ditemui.

Semak sama ada eslint didayakan

Sebelum memulakan projek Vue, anda perlu menyemak sama ada eslint didayakan terlebih dahulu. Dalam direktori akar projek, anda boleh melihat fail konfigurasi bernama "eslintrc.js". Semak kandungan fail ini untuk mengesahkan sama ada eslint telah didayakan.

Jika anda tidak mempunyai fail ini, anda boleh memasang dan mendayakan eslint secara manual melalui arahan berikut:

npm install eslint --save-dev

Selepas pemasangan selesai, cipta fail bernama "eslintrc.js" dalam direktori akar projek, Dan tambahkan yang berikut:

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: [
    'plugin:vue/essential',
    'eslint:recommended'
  ],
  parserOptions: {
    parser: 'babel-eslint'
  },
  rules: {
    // 检查规则
  }
}

Atribut "lanjutkan" di sini merujuk kepada peraturan dan pemalam yang diwarisi. Melalui atribut ini, anda boleh memilih untuk menggunakan beberapa pemalam dan set peraturan yang telah dibuat, atau anda boleh menyesuaikan peraturan. Sebagai contoh, dua set peraturan "plugin:vue/essential" dan "eslint:recommended" dipilih di sini.

Apabila memulakan projek Vue, jika eslint telah didayakan, anda boleh melihat output yang serupa dengan yang berikut:

✔  1.0.0
[wait]  Compiling...
[done]  Compiled successfully in 1234ms

> Listening at http://localhost:8080

Pada masa ini, eslint telah dimulakan dan kod itu disemak. Walau bagaimanapun, jika eslint gagal dimulakan, anda akan menerima mesej ralat yang serupa dengan yang berikut:

Error: Failed to load plugin 'vue' declared in '.eslintrc.js': Cannot find module 'eslint-plugin-vue'

Mesej ralat ini menunjukkan bahawa pemalam yang diisytiharkan tidak ditemui. Seterusnya, kaedah untuk menyelesaikan masalah ini akan diperkenalkan.

Selesaikan masalah yang eslint tidak boleh bermula

1. Semak dependencies

Jika eslint tidak boleh bermula, ia mungkin disebabkan oleh dependencies yang salah. Dalam direktori akar projek Vue, anda boleh melihat fail bernama "package.json". Semak kandungan fail ini untuk mengesahkan sama ada pemalam dan kebergantungan yang dipasang dalam projek adalah betul.

Sebagai contoh, jika mesej ralat di atas menggesa bahawa pemalam "eslint-plugin-vue" tidak ditemui, maka anda perlu menambah kandungan berikut pada fail "package.json":

"devDependencies": {
  "eslint-plugin-vue": "^6.2.2"
}

Mesti digunakan di sini atribut "devDependencies" untuk menentukan pemalam, kerana eslint hanya digunakan dalam mod pembangunan.

Selepas pemasangan selesai, mulakan semula projek Vue. Jika anda mempunyai masalah dengan kebergantungan lain, anda boleh mencuba penyelesaian yang serupa.

2. Semak fail konfigurasi eslint

Jika kebergantungan adalah betul, anda juga perlu menyemak sama ada fail konfigurasi eslint adalah betul. Dalam direktori akar projek, anda boleh melihat fail konfigurasi bernama "eslintrc.js". Semak kandungan fail untuk ralat sintaks atau masalah logik.

Sebagai contoh, jika eslint melaporkan ralat sintaks yang serupa dengan:

error: Parsing error: Unexpected token < in .vue file

maka mungkin penghurai untuk fail Vue tidak dinyatakan dengan betul dalam fail konfigurasi. Konfigurasi berikut boleh digunakan:

module.exports = {
  // ...
  parserOptions: {
    parser: 'babel-eslint',
    ecmaVersion: 2020,
    sourceType: 'module',
    ecmaFeatures: {
      jsx: true,
      experimentalObjectRestSpread: true,
      globalReturn: false,
      impliedStrict: true
    }
  },
  // ...
}

Atribut "parserOptions" di sini digunakan untuk menentukan konfigurasi parser. Jika anda perlu menggunakan sintaks khas fail Vue, anda juga perlu menambah pemalam yang sesuai. Contohnya:

module.exports = {
  // ...
  extends: [
    'plugin:vue/essential',
    'eslint:recommended'
  ],
  plugins: [
    'vue'
  ],
  // ...
}

Atribut "plugin" di sini digunakan untuk menentukan pemalam eslint yang perlu digunakan Berbilang pemalam boleh ditambah dan diisih mengikut kebergantungan.

3. Nyatakan arahan eslint

Dalam Vue CLI, anda boleh menggunakan arahan "npm run lint" untuk memulakan eslint. Tetapi kadangkala, mungkin terdapat masalah dengan arahan ini, seperti eslint gagal dimulakan atau gagal mencari fail yang perlu disemak.

Masalah ini biasanya disebabkan oleh perbezaan alat baris arahan dan sistem pengendalian. Di bawah sistem Windows, anda mungkin perlu menentukan laluan mutlak perintah eslint untuk memulakannya dengan betul. Contohnya:

{
  // ...
  "scripts": {
    "lint": "C:\Users\username\node_modules\.bin\eslint ."
  }
}

Arahan "lint" di sini menggunakan laluan mutlak untuk menentukan arahan eslint, yang boleh mengelakkan masalah bahawa alat baris arahan tidak dapat mencari arahan itu.

Ringkasan

Dalam projek Vue, eslint ialah alat yang sangat berguna untuk memastikan kualiti dan kebolehselenggaraan kod. Walau bagaimanapun, jika eslint gagal dimulakan, ia mungkin menyebabkan beberapa masalah yang sukar ditemui.

Untuk menyelesaikan masalah ini, artikel ini memperkenalkan beberapa kemungkinan punca dan penyelesaian. Adalah penting untuk ambil perhatian bahawa setiap projek Vue mempunyai kebergantungan dan konfigurasi sendiri yang mungkin perlu dilaraskan untuk situasi tertentu. Saya harap artikel ini dapat membantu pembaca berjaya memulakan eslint dan meningkatkan kualiti dan kebolehselenggaraan kod.

Atas ialah kandungan terperinci Projek permulaan vue eslint tidak boleh dimulakan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!