使用vite 创建项目
这里采用的 yarn 其他方式查看官网 vite中文网
依赖包展示
"devDependencies": {
// eslint解析相关的包
"@babel/core": "^7.18.2",
"@babel/eslint-parser": "^7.18.2",
// eslint相关的包
"eslint": "^8.17.0",
"eslint-plugin-vue": "^9.1.0",
"vue-eslint-parser": "^9.0.2",
"vite-plugin-eslint": "^1.6.1",
// prettier相关的包
"prettier": "^2.6.2",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-prettier": "^4.0.0",
}
- 创建vite项目
执行命令: yarn create vite
? Project name: 输入你的项目名称？（如: esvue）
? Select a framework: 选择安装的脚手架 (这里选vue)
vanilla
> vue
react
Done. Now run:
cd esvue
yarn
yarn dev
一 . 安装Eslint
yarn add -D eslint
- 初始化Eslint配置
npx eslint --init
- 选择eslint模式
You can also run this command directly using 'npm init @eslint/config'.
? How would you like to use ESLint? ...
To check syntax only
> To check syntax and find problems
To check syntax, find problems, and enforce code style
- 选择eslint类型
? What type of modules does your project use? ...
> JavaScript modules (import/export)
CommonJS (require/exports)
None of these
- 选择框架
? Which framework does your project use? ...
React
> Vue.js
None of these
- 选择ts 我这个项目没有使用ts（看个人选择）
? Does your project use TypeScript? » No / Yes
- 代码运行环境
? Where does your code run? ... (Press <space> to select, <a> to toggle all, <i> to invert selection)
√ Browser
√ Node
- 输出的配置文件格式
? What format do you want your config file to be in? ...
> JavaScript
YAML
JSON
- 是否现在安装
? Would you like to install them now? » No / Yes
- 选择包管理器
? Which package manager do you want to use? ...
npm
> yarn
pnpm
装完过后根目录下会出现.eslint.cjs（可以删掉后面写自己的规则）
- 配置 eslintrc.cjs
module.exports = {
"env": {
"browser": true,
"es2021": true,
"node": true
},
"extends": [
"eslint:recommended", // 使用推荐的eslint
'plugin:vue/vue3-essential' // 使用插件支持vue3
// 如果你没有安装第7步,以下两个包不要引入,否则报错
'plugin:prettier/recommended',
'eslint-config-prettier'
],
"parserOptions": {
"ecmaVersion": "latest",
"sourceType": "module",
"ecmaFeatures": {
"modules": true,
'jsx': true
},
"requireConfigFile": false,
"parser": '@babel/eslint-parser'
},
// eslint-plugin-vue
'plugins': [
'vue' // 引入vue的插件 vue <==> eslint-plugin-vue
// 这个包需要安装了第7步的三个包再引入
'prettier' // 引入规范插件 prettier <==> eslint-plugin-prettier
],
'globals': {
defineProps: 'readonly',
defineEmits: 'readonly',
defineExpose: 'readonly',
withDefaults: 'readonly'
},
// 这里时配置规则的,自己看情况配置
"rules": {
'semi': ['warn', 'never'], // 禁止尾部使用分号
'no-console': 'warn', // 禁止出现console
'no-debugger': 'warn', // 禁止出现debugger
'no-duplicate-case': 'warn', // 禁止出现重复case
'no-empty': 'warn', // 禁止出现空语句块
'no-extra-parens': 'warn', // 禁止不必要的括号
'no-func-assign': 'warn', // 禁止对Function声明重新赋值
'no-unreachable': 'warn', // 禁止出现[return|throw]之后的代码块
'no-else-return': 'warn', // 禁止if语句中return语句之后有else块
'no-empty-function': 'warn', // 禁止出现空的函数块
'no-lone-blocks': 'warn', // 禁用不必要的嵌套块
'no-multi-spaces': 'warn', // 禁止使用多个空格
'no-redeclare': 'warn', // 禁止多次声明同一变量
'no-return-assign': 'warn', // 禁止在return语句中使用赋值语句
'no-return-await': 'warn', // 禁用不必要的[return/await]
'no-self-compare': 'warn', // 禁止自身比较表达式
'no-useless-catch': 'warn', // 禁止不必要的catch子句
'no-useless-return': 'warn', // 禁止不必要的return语句
'no-mixed-spaces-and-tabs': 'warn', // 禁止空格和tab的混合缩进
'no-multiple-empty-lines': 'warn', // 禁止出现多行空行
'no-trailing-spaces': 'warn', // 禁止一行结束后面不要有空格
'no-useless-call': 'warn', // 禁止不必要的.call()和.apply()
'no-var': 'warn', // 禁止出现var用let和const代替
'no-delete-var': 'off', // 允许出现delete变量的使用
'no-shadow': 'off', // 允许变量声明与外层作用域的变量同名
'dot-notation': 'warn', // 要求尽可能地使用点号
'default-case': 'warn', // 要求switch语句中有default分支
'eqeqeq': 'warn', // 要求使用 === 和 !==
'curly': 'warn', // 要求所有控制语句使用一致的括号风格
'space-before-blocks': 'warn', // 要求在块之前使用一致的空格
'space-in-parens': 'warn', // 要求在圆括号内使用一致的空格
'space-infix-ops': 'warn', // 要求操作符周围有空格
'space-unary-ops': 'warn', // 要求在一元操作符前后使用一致的空格
'switch-colon-spacing': 'warn', // 要求在switch的冒号左右有空格
'arrow-spacing': 'warn', // 要求箭头函数的箭头前后使用一致的空格
'array-bracket-spacing': 'warn', // 要求数组方括号中使用一致的空格
'brace-style': 'warn', // 要求在代码块中使用一致的大括号风格
'camelcase': 'warn', // 要求使用骆驼拼写法命名约定
'indent': ['warn', 4], // 要求使用JS一致缩进4个空格
'max-depth': ['warn', 4], // 要求可嵌套的块的最大深度4
'max-statements': ['warn', 100], // 要求函数块最多允许的的语句数量20
'max-nested-callbacks': ['warn', 3], // 要求回调函数最大嵌套深度3
'max-statements-per-line': ['warn', { max: 1 }], // 要求每一行中所允许的最大语句数量
"quotes": ["warn", "single", "avoid-escape"], // 要求统一使用单引号符号
"vue/require-default-prop": 0, // 关闭属性参数必须默认值
"vue/singleline-html-element-content-newline": 0, // 关闭单行元素必须换行符
"vue/multiline-html-element-content-newline": 0, // 关闭多行元素必须换行符
// 要求每一行标签的最大属性不超五个
'vue/max-attributes-per-line': ['warn', { singleline: 5 }],
// 要求html标签的缩进为需要4个空格
"vue/html-indent": ["warn", 4, {
"attribute": 1,
"baseIndent": 1,
"closeBracket": 0,
"alignAttributesVertically": true,
"ignores": []
}],
// 取消关闭标签不能自闭合的限制设置
"vue/html-self-closing": ["error", {
"html": {
"void": "always",
"normal": "never",
"component": "always"
},
"svg": "always",
"math": "always"
}]
}
}
二 . 安装 vite-plugin-eslint
// 配置vite运行的时候自动检测eslint规范 可以不装
yarn add -D vite-plugin-eslint
- 安装 eslint-parser
yarn add -D @babel/core @babel/eslint-parser
三 . 安装 prettier
// eslint-config-prettier eslint兼容的插件 eslint-plugin-prettier eslint的prettier
yarn add -D prettier eslint-config-prettier eslint-plugin-prettier
- 配置 .prettierrc
{
"tabWidth": 4, // 使用4个空格缩进
"semi": false, // 代码结尾是否加分号
"trailingComma": "none", // 代码末尾不需要逗号
"singleQuote": true, // 是否使用单引号
"printWidth": 100, // 超过多少字符强制换行
"arrowParens": "avoid", // 单个参数的箭头函数不加括号 x => x
"bracketSpacing": true, // 对象大括号内两边是否加空格 { a:0 }
"endOfLine": "auto", // 文件换行格式 LF/CRLF
"useTabs": false, // 不使用缩进符,而使用空格
"quoteProps": "as-needed", // 对象的key仅在必要时用引号
"jsxSingleQuote": false, // jsx不使用单引号,而使用双引号
"jsxBracketSameLine": false, // jsx标签的反尖括号需要换行
"rangeStart": 0, // 每个文件格式化的范围是文件的全部内容
"rangeEnd": Infinity, // 结尾
"requirePragma": false, // 不需要写文件开头的 @prettier
"insertPragma": false, // 不需要自动在文件开头插入 @prettier
"proseWrap": "preserve", // 使用默认的折行标准
"htmlWhitespaceSensitivity": "css" // 根据显示样式决定html要不要折行
}
四 . 配置 vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import eslintPlugin from 'vite-plugin-eslint' //导入包
export default defineConfig({
plugins: [
vue(),
// 增加下面的配置项,这样在运行时就能检查eslint规范
eslintPlugin({
include: ['src/**/*.js', 'src/**/*.vue', 'src/*.js', 'src/*.vue']
})
]
})
