plugins: [
‘vue’
],
rules: {
}
}
##### 第三步 安装 vite-plugin-eslint// 该包是用于配置vite运行的时候自动检测eslint规范，不符合页面会报错
pnpm add vite-plugin-eslint@latest -D
// 安装最新版eslint-plugin-vue
pnpm add eslint-plugin-vue@latest -D
##### 配置 vite.config.jsimport { defineConfig } from ‘vite’
import vue from ‘@vitejs/plugin-vue’
import path from ‘path’
import eslint from ‘vite-plugin-eslint’
export default defineConfig({
// 增加eslint的配置项,这样在运行时就能检查eslint规范
// eslint() 或
// eslint({
// 指定需要检查的文件
// include: [‘src/**/*.js’, ‘src/**/*.vue’, ‘src/*.js’, ‘src/*.vue’]
// })
plugins: [vue(), eslint()],
resolve: {
// 指定@别名
alias: {
‘@’: path.resolve(__dirname, ‘src’)
}
},
server: {
port: 3300,
cors: true,
proxy: {}
},
build: {
outDir: path.resolve(__dirname, ‘…/dist’)
}
})
##### 第四步安装 eslint-parser （ESLint解析器）pnpm add @babel/core -D // 某些代码需要调用 Babel 的 API 进行转码，就要使用@babel/core模块。
pnpm add @babel/eslint-parser@latest -D
##### 第五步 安装prettier (用于规范代码格式)pnpm add prettier -D
pnpm add prettier-eslint -D
pnpm add eslint-config-prettier -D // eslint兼容的插件
pnpm add eslint-plugin-prettier -D // eslint的prettier
##### 第六步配置prettier在项目根目录创建文件 .prettierrc.cjs// 以下配置视自己情况而定
module.exports = {
tabWidth: 2, // 使用2个空格缩进
useTabs: false, // 不使用制表缩进,而使用空格
semi: false, // 代码结尾是否加分号
trailingComma: ‘none’, // 代码末尾不需要逗号 参考 https://prettier.io/docs/en/options.html#prose-wrap
singleQuote: true, // 是否使用单引号
printWidth: 120, // 超过多少字符强制换行
arrowParens: ‘avoid’, // 单个参数的箭头函数不加括号 arg => arg
bracketSpacing: true, // 对象大括号内两边是否加空格 { a:0 }
endOfLine: ‘auto’, // 文件换行格式 LF/CRLF
quoteProps: ‘as-needed’, // 对象的key仅在必要时用引号
jsxSingleQuote: false, // jsx不使用单引号,而使用双引号
jsxBracketSameLine: false, // jsx标签的反尖括号需要换行
rangeStart: 0, // 每个文件格式化的范围是文件的全部内容
rangeEnd: Infinity, // 结尾
requirePragma: false, // 不需要写文件开头的 @prettier
insertPragma: false, // 不需要自动在文件开头插入 @prettier
proseWrap: ‘preserve’, // 使用默认的折行标准 参考 https://prettier.io/docs/en/options.html#trailing-commas
htmlWhitespaceSensitivity: ‘css’ // 根据显示样式决定html要不要折行
}
##### 第七步配置配置 .eslintrc.cjs// 在rules里面简单的一些配置：
// “off” 或 0 - 关闭规则
// “warn” 或 1 - 开启规则，使用警告级别的错误
// “error” 或 2 - 开启规则，使用错误级别的错误
module.exports = {
“env”: {
“browser”: true,
“es2021”: true,
“node”: true
},
“extends”: [
“eslint:recommended”, // 使用推荐的eslint
‘plugin:vue/vue3-recommended’, // 使用插件支持vue3
// 接入 prettier 的规则
‘plugin:prettier/recommended’,
‘eslint-config-prettier’
],
“parserOptions”: {
“ecmaVersion”: 13,
“sourceType”: “module”,
“ecmaFeatures”: {
“modules”: true,
‘jsx’: true
},
“requireConfigFile”: false,
“parser”: ‘@babel/eslint-parser’
},
// eslint-plugin-vue
‘plugins’: [
‘vue’, // 引入vue的插件 vue <> eslint-plugin-vue
‘prettier’ // 引入规范插件 prettier <> eslint-plugin-prettier
],
‘globals’: {
defineProps: ‘readonly’,
defineEmits: ‘readonly’,
defineExpose: ‘readonly’,
withDefaults: ‘readonly’
},
// 这里时配置规则的,自己看情况配置
// 这里可以进行自定义规则配置
// key：规则代号
// value：具体的限定方式
// “off” or 0 - 关闭规则
// “warn” or 1 - 将规则视为一个警告（不会影响退出码）,只警告，不会退出程序
// “error” or 2 - 将规则视为一个错误 (退出码为1)，报错并退出程序
rules: {
// 自定义规则 - 其实上面集成后有很多内置的规则, 这里可以进行规则的一些修改
‘no-console’: process.env.NODE_ENV === ‘production’ ? ‘warn’ : ‘off’, // 上线环境用打印就报警告, 开发环境关闭此规则
‘no-debugger’: process.env.NODE_ENV === ‘production’ ? ‘warn’ : ‘off’, // debugger可以终止代码执行
‘vue/multi-word-component-names’: ‘off’, // 自定义组件名称应该由多单词大驼峰命名组成，防止和html标签冲突 — 关闭
‘vue/max-attributes-per-line’: [
2,
// 多个特性的元素应该分多行撰写，每个特性一行
{
singleline: 10,
multiline: {
max: 1
}
}
],
‘vue/prop-name-casing’: [1, ‘camelCase’], // 在声明prop的时候，其命名应该始终使用驼峰命名
‘vue/require-v-for-key’: 1, // 给v-for设置键值，与key结合使用，可以高效的更新虚拟DOM
‘vue/no-use-v-if-with-v-for’: [
2,
{
allowUsingIterationVar: false
}
],
// 不要把 v-if 和 v-for 用在同一个元素上——因为v-for 比 v-if 具有更高的优先级
‘vue/order-in-components’: [
1,
{
// 组件/实例的选项的顺序
order: [
‘el’,
‘name’,
‘parent’,
‘functional’,
[‘delimiters’, ‘comments’],
[‘components’, ‘directives’, ‘filters’],
‘extends’,
‘mixins’,
‘inheritAttrs’,
‘model’,
[‘props’, ‘propsData’],
‘data’,
‘computed’,
‘watch’,
‘LIFECYCLE_HOOKS’,
‘methods’,
[‘template’, ‘render’],
‘renderError’
]
}
],
// //
// /// js.规范 /
// /
‘arrow-spacing’: [
2,
{
// 在箭头函数之前/之后需要空格
before: true,
after: true
}
],
camelcase: [
0,
{
// 需要驼峰命名
properties: ‘always’
}
],
‘comma-dangle’: [0, ‘never’], // 要求或禁止使用尾随逗号；最后一个属性是不需要逗号
‘comma-spacing’: [
2,
{
// 强制逗号旁边的间距： 左右一个空格
before: false,
after: true
}
],
‘comma-style’: [2, ‘last’], // 逗号风格
‘constructor-super’: 2, // 构建方法中使用super方法
curly: [2, ‘multi-line’],
‘dot-location’: [1, ‘property’], // 在dot之前和之后强制换行
‘eol-last’: 2, // 在文件末尾要求或禁止换行
eqeqeq: [1, ‘always’, { null: ‘ignore’ }], // 是否使用全等
indent: [
‘off’,
2,
{
// 强制执行一致的缩进
SwitchCase: 1
}
],
‘jsx-quotes’: [2, ‘prefer-single’], // 强制在JSX文件中一致使用单引号
‘keyword-spacing’: [
2,
{
// 关键字前后强制执行一致的间距
before: true,
after: true
}
],
‘new-cap’: [
2,
{
// 要求构造函数名称以大写字母开头
newIsCap: true,
capIsNew: false
}
],
‘new-parens’: 2, // 调用不带参数的函数时需要括号
‘no-array-constructor’: 2, // 禁止阵列构建器
‘no-class-assign’: 2, // 禁止修改类声明的变量
‘no-cond-assign’: 2, // 在条件语句中禁止赋值运算符
‘no-const-assign’: 2, // 禁止修改使用const声明的变量
‘no-control-regex’: 0, // 禁止正则表达式中的控制字符
‘no-delete-var’: 2, // 禁止删除变量
‘no-dupe-args’: 2, // 在函数定义中禁止重复参数
‘no-dupe-class-members’: 2, // 禁止在类成员中重复名称
‘no-dupe-keys’: 2, // 禁止对象重复声明属性
‘no-duplicate-case’: 2, // 规则禁止重复案例标签
‘no-empty-character-class’: 2, // 禁止在正则表达式中使用空字符类
‘no-empty-pattern’: 2, // 不允许空的解构模式
‘no-eval’: 2, // 禁止使用eval（）
‘no-ex-assign’: 2, // 禁止在catch子句中重新分配异常
‘no-extend-native’: 2, // 禁止扩展原生对象
‘no-extra-bind’: 2, // 禁止不必要的功能绑定
‘no-extra-boolean-cast’: 2, // 禁止不必要的布尔类型转换
‘no-extra-parens’: [2, ‘functions’], // 禁止不必要的括号
‘no-func-assign’: 2, // 禁止重新分配函数声明
‘no-implied-eval’: 2,
‘no-inner-declarations’: [2, ‘functions’], // 禁止嵌套块中的变量或函数声明
‘no-invalid-regexp’: 2, // 禁止在RegExp中使用无效的正则表达式字符串
‘no-irregular-whitespace’: 2, // 不允许不规则的空白
‘no-iterator’: 2, // 禁止迭代器
‘no-label-var’: 2, // 禁止变量名称的标签
‘no-labels’: [
2,
{
allowLoop: false,
allowSwitch: false
}
],
‘no-lone-blocks’: 2, // 禁止不必要的嵌套块
‘no-mixed-spaces-and-tabs’: 2, // 禁止使用混合空格和制表符进行缩进
‘no-multi-spaces’: 2, // 禁止多个空格
‘no-multi-str’: 2, // 禁止多行字符串
‘no-multiple-empty-lines’: [
2,
{
// 禁止多个空行
max: 1
}
],
‘no-native-reassign’: 2,
‘no-negated-in-lhs’: 2,
‘no-new-object’: 2,
‘no-new-require’: 2,
‘no-new-symbol’: 2,
‘no-new-wrappers’: 2,
‘no-obj-calls’: 2,
‘no-octal’: 2,
‘no-octal-escape’: 2,
‘no-path-concat’: 2,
‘no-proto’: 2,
‘no-redeclare’: 2,
‘no-regex-spaces’: 2,
‘no-return-assign’: [2, ‘except-parens’],
‘no-self-assign’: 2,
‘no-self-compare’: 2,
‘no-sequences’: 2,
‘no-shadow-restricted-names’: 2,
‘no-spaced-func’: 2,
‘no-sparse-arrays’: 2,
‘no-this-before-super’: 2,
‘no-throw-literal’: 2,
‘no-trailing-spaces’: 2,
‘no-undef’: 0,
‘no-undef-init’: 2,
‘no-unexpected-multiline’: 2,
‘no-unmodified-loop-condition’: 2, // 禁止未修改的循环条件
‘no-unneeded-ternary’: [
2,
{
// 当存在更简单的替代方案时，不允许三元运算符
defaultAssignment: false
}
],
‘no-unreachable’: 2, // 返回，抛出，继续和中断语句后禁止无法访问的代码
‘no-unsafe-finally’: 2, // 禁止finally块中的控制流语句
‘no-unused-vars’: [
1,
{
// 禁止使用未声明的变量
vars: ‘all’,
args: ‘none’
}
],
‘no-useless-call’: 2, // 禁止不必要的call()和apply()方法
‘no-useless-computed-key’: 2, // 禁止在对象上使用不必要的计算属性键
‘no-useless-constructor’: 2, // 禁止不必要的构造方法
‘no-useless-escape’: 0, // 禁止不必要的转义用法
‘no-whitespace-before-property’: 2, // 在属性之前禁止空格
‘no-with’: 2,
‘linebreak-style’: [0, ‘error’, ‘windows’],
‘one-var’: [
2,
{
initialized: ‘never’
}
],
‘operator-linebreak’: [
2,
‘after’,
{
// 为维护强制执行一致的换行方式
overrides: {
‘?’: ‘before’,
‘:’: ‘before’
}
}
],
‘padded-blocks’: [2, ‘never’], // 在块内要求或禁止填充
quotes: [
2,
‘single’,
{
avoidEscape: true,
allowTemplateLiterals: true
}
],
semi: [2, ‘never’],
‘semi-spacing’: [
2,
{
before: false,
after: true
}
],
‘space-before-blocks’: [2, ‘always’], // 不要存在多余的块空间
‘space-in-parens’: [2, ‘never’],
‘space-infix-ops’: 2,
‘space-unary-ops’: [
2,
{
words: true,
nonwords: false
}
],
‘spaced-comment’: [
2,
‘always’,
{
markers: [‘global’, ‘globals’, ‘eslint’, ‘eslint-disable’, ‘*package’, ‘!’, ‘,’]
}
],
‘template-curly-spacing’: [2, ‘never’],
‘use-isnan’: 2,
‘valid-typeof’: 2,
‘wrap-iife’: [2, ‘any’],
‘yield-star-spacing’: [2, ‘both’],
yoda: [2, ‘never’],
‘prefer-const’: 1,
‘object-curly-spacing’: [
2,
‘always’,
{
objectsInObjects: false
}
],
‘array-bracket-spacing’: [2, ‘never’],
‘prettier/prettier’: [‘error’, { endOfLine: ‘auto’ }] // 忽略换行格式的检查
}
}
##### 第八步配置VScode1、安装“ESLint”插件 2、安装“Prettier ESLint”插件// 配置vscode
// 打开：设置 -> 文本编辑器 -> 字体 -> 在 settings.json 中编辑
// settings.json文件
{
// vscode默认启用了根据文件类型自动设置tabsize的选项
“editor.detectIndentation”: false,
// 重新设定tabsize
“editor.tabSize”: 2,
// 每次保存的时候自动格式化
“editor.formatOnSave”: true,
// 每次保存的时候将代码按eslint格式进行修复
“eslint.autoFixOnSave”: true,
// 添加vue支持
“eslint.validate”: [
“javascript”,
“javascriptreact”,
{
“language”: “vue”,
“autoFix”: true
}
],
// 让prettier使用eslint的代码格式进行校验
“prettier.eslintIntegration”: true
}
### 至此Vue3 + Vite + js + ESlint + Prettier就配置完成，此时先不急着运行项目，先把。node\_modules包和pnpm-lock.yaml删除掉再重新安装依赖包，防止有些依赖包手动降低或升级版本带来的报错pnpm i
或
npm i
或
yarn
##### 运行项目就可以看到ESlint 代码提示了/Users/lizhengzheng/Desktop/vue3_vite_js_eslint_prettier/src/components/HelloWorld.vue
5:3 warning Prop ‘msg’ requires default value to be set vue/require-default-prop
5:14 error Delete , prettier/prettier
24:8 error ‘href’ should be on a new line vue/max-attributes-per-line
24:62 error ‘target’ should be on a new line vue/max-attributes-per-line
24:77 error Replace ⏎······>create-vue</a⏎····>,·the·official·Vue·+·Vite with >create-vue</a>,·the·official·Vue·+·Vite⏎··· prettier/prettier
✖ 5 problems (4 errors, 1 warning)
4 errors and 0 warnings potentially fixable with the --fix option.
Plugin: vite-plugin-eslint
File: /Users/lizhengzheng/Desktop/vue3_vite_js_eslint_prettier/src/components/HelloWorld.vue
14:33:36 [vite] Pre-transform error:
/Users/lizhengzheng/Desktop/vue3_vite_js_eslint_prettier/src/components/HelloWorld.vue
5:3 warning Prop ‘msg’ requires default value to be set vue/require-default-prop
5:14 error Delete , prettier/prettier
24:8 error ‘href’ should be on a new line vue/max-attributes-per-line
24:62 error ‘target’ should be on a new line vue/max-attributes-per-line
24:77 error Replace ⏎······>create-vue</a⏎····>,·the·official·Vue·+·Vite with >create-vue</a>,·the·official·Vue·+·Vite⏎··· prettier/prettier
✖ 5 problems (4 errors, 1 warning)
4 errors and 0 warnings potentially fixable with the --fix option.
14:33:37 [vite] warning:
/Users/lizhengzheng/Desktop/vue3_vite_js_eslint_prettier/src/components/HelloWorld.vue
5:3 warning Prop ‘msg’ requires default value to be set vue/require-default-prop
5:14 error Delete , prettier/prettier
24:8 error ‘href’ should be on a new line vue/max-attributes-per-line
24:62 error ‘target’ should be on a new line vue/max-attributes-per-line
24:77 error Replace ⏎······>create-vue</a⏎····>,·the·official·Vue·+·Vite with >create-vue</a>,·the·official·Vue·+·Vite⏎··· prettier/prettier
✖ 5 problems (4 errors, 1 warning)
4 errors and 0 warnings potentially fixable with the --fix option.
Plugin: vite-plugin-eslint
File: /Users/lizhengzheng/Desktop/vue3_vite_js_eslint_prettier/src/components/HelloWorld.vue
14:33:37 [vite] Internal server error:
/Users/lizhengzheng/Desktop/vue3_vite_js_eslint_prettier/src/components/HelloWorld.vue
5:3 warning Prop ‘msg’ requires default value to be set vue/require-default-prop
5:14 error Delete , prettier/prettier
24:8 error ‘href’ should be on a new line vue/max-attributes-per-line
24:62 error ‘target’ should be on a new line vue/max-attributes-per-line
24:77 error Replace ⏎······>create-vue</a⏎····>,·the·official·Vue·+·Vite with >create-vue</a>,·the·official·Vue·+·Vite⏎··· prettier/prettier
##### 第九步错误解决error Definition for rule ‘vue/name-property-casing’ was not found
解决方法： 安装 pnpm install eslint-plugin-vue@7.0.0 -D
[vite] Pre-transform error: Failed to load plugin ‘vue’ declared in ‘.eslintrc.cjs’
解决方法： 删除node_modules包和pnpm-lock.yaml再重新安装 pnpm i
#### 项目中所有用到的包package.json### 最后**一个好的心态和一个坚持的心很重要**，很多冲着高薪的人想学习前端，但是能学到最后的没有几个，遇到困难就放弃了，这种人到处都是，就是因为有的东西难，所以他的回报才很大，我们评判一个前端开发者是什么水平，就是他解决问题的能力有多强。**分享一些前端面试题以及学习路线给大家**te⏎···` prettier/prettier第九步错误解决
error Definition for rule 'vue/name-property-casing' was not found
解决方法： 安装 pnpm install eslint-plugin-vue@7.0.0 -D
[vite] Pre-transform error: Failed to load plugin 'vue' declared in '.eslintrc.cjs'
解决方法： 删除node_modules包和pnpm-lock.yaml再重新安装 pnpm i项目中所有用到的包package.json
最后
一个好的心态和一个坚持的心很重要，很多冲着高薪的人想学习前端，但是能学到最后的没有几个，遇到困难就放弃了，这种人到处都是，就是因为有的东西难，所以他的回报才很大，我们评判一个前端开发者是什么水平，就是他解决问题的能力有多强。
分享一些前端面试题以及学习路线给大家
[外链图片转存中…(img-TxPYDUGj-1718769853393)]
![【2024最新华为OD-C/D卷试题汇总】[支持在线评测] 密码解密(100分) - 三语言AC题解(Python/Java/Cpp)](https://img-blog.csdnimg.cn/direct/c069d33c72154fd4be885e19944459c1.png)
![[leetcode hot 150]第十五题，三数之和](https://img-blog.csdnimg.cn/direct/cb45550577ee47baa1b796fc6063d0d9.png)
