項目git地址， 歡迎修改提交，不足地方還請補充批評指正！
項目git地址
簡介
ESLint 是一個用于識別和報告在 ECMAScript/JavaScript 代碼中發(fā)現(xiàn)的模式的工具，其目標是使代碼更加一致并避免錯誤。
ESLint 是完全插件化的。每條規(guī)則都是一個插件，你可以在運行時添加更多。你還可以添加社區(qū)插件、配置和解析器來擴展 ESLint 的功能。
先決條件
要使用 ESLint，你必須安裝并構(gòu)建 Node.js（^18.18.0、^20.9.0 或 >=21.1.0）并支持 SSL。（如果你使用的是官方 Node.js 發(fā)行版，則始終內(nèi)置 SSL。）
快速安裝
新建一個vue3-vite項目
npm init @eslint/config
如果你正在使用 ESLint 8.23.x 和 WebStorm 2022.2.x 或 PhpStorm 2022.2.x。
那么你可能會遇到 TypeError: this.libOptions.parse is not a function。
這是 ESLint 8.23.x 中的一個bug。ESLint 團隊正在努力解決這個問題，希望很快就能解決。
在此之前，解決方法是將你的 ESLint 的版本降至8.22。
首先安裝依賴
安裝在devDependencies里作為開發(fā)依賴，后綴加-D
"eslint": "8.22.0",
"eslint-plugin-auto-import": "^0.1.1",
"eslint-plugin-vue": "^9.23.0",
"eslint-plugin-prettier": "^5.1.3",
"eslint-config-prettier": "^9.1.0",
"prettier": "^3.2.5",
npm i eslint@8.22.0 -D
后創(chuàng)建 .eslintignore 文件, 排除不必要的格式化目錄
build/*.js
src/assets
public
dist
node_modules
.eslintrc.js
語法規(guī)則
規(guī)則嚴重性
要更改規(guī)則的嚴重性，請將規(guī)則 ID 設(shè)置為以下值之一：
-
"off"或0- 關(guān)閉規(guī)則 -
"warn"或1- 打開規(guī)則作為警告（不影響退出代碼） -
"error"或2- 打開規(guī)則作為錯誤（觸發(fā)時退出代碼為 1）
其中如果使用 extends:eslint:recommended ,會使用eslint推薦的規(guī)則，就不用手動打開，但會觸發(fā)error需要關(guān)閉就對應(yīng)規(guī)則off文章來源：http://www.zghlxwxcb.cn/news/detail-845729.html
規(guī)則參考 https://eslint.nodejs.cn/docs/latest/rules/
.eslintrc.js文件文章來源地址http://www.zghlxwxcb.cn/news/detail-845729.html
module.exports = {
env: {
browser: true,
es2021: true,
},
extends: [
'eslint:recommended',
'plugin:prettier/recommended',
'plugin:vue/vue3-essential',
'eslint-config-prettier',
// './.eslintrc-auto-import.json'
],
overrides: [
{
env: {
node: true,
},
files: [
'.eslintrc.{js,cjs}',
],
parserOptions: {
sourceType: 'script',
},
},
],
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module',
},
plugins: [
'vue',
'prettier'
],
rules: {
semi: ['warn', 'never'], // 禁止尾部使用分號
'no-undef': 'warn', //禁止使用未聲明的變量
'no-unused-vars': 'warn', //禁止未使用的變量
'linebreak-style': ['off'], // 關(guān)閉換行符驗證
'no-到了這里，關(guān)于從零開始創(chuàng)建一個vue3+vite項目并集成element-plus、eslint以及prettier的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
