Rumah > Artikel > alat pembangunan > 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) 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']
eslint.bootcss.com/docs/rules/ Cari atribut yang sepadan, klik untuk masuk, dan kemudian cari pilihan
Nota: Pada masa ini, projek akan digesa mengikut tetapan lalai dan peraturan dalam peraturan, dan ia juga akan disimpan mengikut peraturan eslint Hanya formatkannya.
(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, }
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!