Analisis ringkas tentang cara menggunakan eslint dan lebih cantik dalam vscode

Bagaimana untuk menggunakan eslint dan lebih cantik dalam vscode? Artikel berikut akan memperkenalkan kepada anda penggunaan eslint dalam vscode dan gabungan penggunaan eslint dan lebih cantik saya harap ia akan membantu anda!

1 Penggunaan eslint dalam vscode

1) Mula-mula pasang eslint dalam vscode, dan kemudian tambahkan kod berikut pada settings.json of vscode

"editor.formatOnSave": true, // 保存是格式化
"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true // 按照eslint规则格式化
},
"eslint.format.enable": true, // 启用ESLint作为已验证文件的格式化程序

2) eslint mesti dipasang dalam projek (atau dipasang secara global)

Ini ialah keperluan untuk pemalam eslint dalam vscode: [Pembelajaran yang disyorkan: "pengenalan vscode tutorial"]

3) Tambah fail .eslintrc.js dalam direktori akar dan tambah kod berikut

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: ["eslint:recommended"],
  parserOptions: {
    parser: "babel-eslint",
  },
  rules: {}
};

4) Tetapan dalam peraturan

quotes: [
   'error',
   'single'
],

semi: ['error', 'never']

• Tetapkan elemen pertama dalam tatasusunan nilai atribut

• Tetapkan elemen kedua dalam tatasusunan nilai atribut

eslint.bootcss.com/docs/rules/ Cari atribut yang sepadan, klik untuk masuk, dan kemudian cari pilihan

• eslint:recommended Peraturan lalai ditanda

Nota: Pada masa ini, projek akan digesa mengikut tetapan lalai dan peraturan dalam peraturan, dan ia juga akan disimpan mengikut peraturan eslint Hanya formatkannya.

2. Gunakan eslint dan lebih cantik dalam kombinasi

(Nota: Gabungan eslint dan lebih cantik bergantung pada keadaan, dan ia tidak perlu digunakan bersama dengan lebih cantik)

1) Pertama sekali, Pasang pemalam yang lebih cantik dalam vscode, dan kemudian tambahkan kod berikut dalam settings.json dalam vscode

"editor.defaultFormatter": "esbenp.prettier-vscode",

  "[javascript]": {

    "editor.defaultFormatter": "esbenp.prettier-vscode"

  }

2) Pasang lebih cantik dalam projek

Anda juga perlu memasang eslint-plugin-prettier dan eslint-config-prettier Tujuan kedua-dua pemalam ini adalah untuk membolehkan eslint menggesa mengikut peraturan yang lebih cantik (perhatikan nombor versi kedua-dua palam ini. -in, versi eslint-plugin-prettier terbaru 4.0 Terdapat masalah semasa menggunakannya)

"eslint-config-prettier": "^8.3.0",
"eslint-plugin-prettier": "^3.3.1"

Kemudian tambahkan plugin:prettier/recommended

extends: ["eslint:recommended", "plugin:prettier/recommended"]

pada lanjutan dalam .eslintrc.js untuk benar-benar melakukan perkara berikut

Kemudian anda boleh menambah fail .prettierrc.js dalam direktori akar akan menggesa mengikut peraturan di dalam, dan ia juga akan diformatkan mengikut peraturan semasa menyimpan

module.exports = {
  semi: false,
  singleQuote: true,
  bracketSpacing: true,
}

3 Gunakan peraturan yang lebih cantik dalam projek vue

1) Mula-mula pilih tetapan eslint yang lebih cantik apabila mencipta

2) Cipta .prettierrc.js dalam direktori akar dan tambah peraturan

module.exports = {
  semi: false,
  singleQuote: true,
  bracketSpacing: true,
};

Secara lalai, apabila format dalam kod tidak betul, akan ada menjadi amaran amaran

Jika anda perlu mengubahnya menjadi ralat, anda perlu menambah kod berikut pada .eslintrc.js

rules: {
//…
  'prettier/prettier': 'error'
}

Kesannya adalah seperti berikut

Nota: Selepas mengubah suai beberapa konfigurasi, vscode mungkin tidak berkuat kuasa serta-merta Pada masa ini, anda boleh menutup projek dan buka semula untuk mencuba

Lagi tentang VSCode Untuk pengetahuan, sila lawati: tutorial vscode! !

Atas ialah kandungan terperinci Analisis ringkas tentang cara menggunakan eslint dan lebih cantik dalam vscode. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!