一、整合eslint
整合eslint的两种方式:
-
在已有项目中整合eslint:
sh# 安装eslint及其vue插件即可 npm i -D eslint eslint-plugin-vue
-
创建项目时整合eslint:
提示是否引入ESLint用于代码质量检测
时选择是
sh# 创建vue3项目 npx create-vue # 下载项目依赖 npm i
两种方式任一,最终保证package.json文件中内容如下即可:
json
{
"name": "xxx",
"version": "0.0.0",
"private": true,
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview",
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore",
"format": "prettier --write src/"
},
"dependencies": {
"vue": "^3.4.29",
...
},
"devDependencies": {
"@rushstack/eslint-patch": "^1.8.0",
"@vitejs/plugin-vue": "^5.0.5",
"@vue/eslint-config-prettier": "^9.0.0",
"eslint": "^8.57.0",
"eslint-plugin-vue": "^9.23.0",
"prettier": "^3.2.5",
"vite": "^5.3.1",
...
}
}
二、配置eslint
在项目根目录下创建.eslintrc.cjs
文件:
以下为配置模板,仅供参考:
js
/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution')
module.exports = {
root: true,
'extends': [
'plugin:vue/vue3-essential',
'eslint:recommended',
'@vue/eslint-config-prettier/skip-formatting'
],
parserOptions: {
ecmaVersion: 'latest'
},
rules: {
'eqeqeq': 'warn', // 要求使用 === 和 !==
'no-dupe-args': 'error', // 禁止 function 定义中出现重名参数
'no-dupe-keys': 'error', // 禁止对象字面量中出现重复的 key
'no-eval': 'error', // 禁用 eval()
'no-self-compare': 'error', // 禁止自身比较
'no-self-assign': 'error', // 禁止自我赋值
'no-unused-vars': 'error', // 禁止出现未使用过的变量
'no-const-assign': 'error', // 禁止修改 const 声明的变量
'no-func-assign': 'error', // 禁止对 function 声明重新赋值
'camelcase': 'error', // 强制使用骆驼拼写法命名约定
'no-mixed-spaces-and-tabs': 'error', //禁止混用tab和空格
'indent': ['warn', 2], //缩进风格这里不做硬性规定,但是产品组内要达成统一
'quotes': ['warn', 'single'], //要求引号类型 `` ' ''
'semi': ['error', 'never'], //语句强制分号结尾
'no-alert': process.env.NODE_ENV === 'production' ? 'warn' : 'off', // 禁用 alert
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', // 禁用 console
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off' // 禁用 debugger
}
}