配置工具
eslint/prettier
注意：
-
ESLint 目前只能处理 CommonJS 格式的配置文件
-
package.json文件中定义了"type": "module"，这使得Node.js将所有.js文件都视为 ES 模块- 可能会导致eslint失效
-
要解决这个问题，有以下几种方法：
- 重命名配置文件：将
.eslintrc.js文件重命名为.eslintrc.cjs。 - 改变
package.json文件中的type属性：可以在package.json文件中将"type": "module"更改为"type": "commonjs"，使得 Node.js 将所有.js文件视为 CommonJS 模块。但是这会影响到项目中的所有.js文件，可能会带来其他问题
- 重命名配置文件：将
vue
- eslint
eslint
@typescript-eslint/eslint-plugin
@typescript-eslint/parser
eslint-config-prettier
eslint-plugin-prettier
eslint-plugin-vue
- prettier
prettier
- vite
- vite-plugin-eslint 是一个用于在Vite 构建过程中集成ESLint 检查的插件。 它可以帮助您在开发过程中检查代码是否符合ESLint 规则，并在控制台输出错误或警告信息
vite-plugin-eslint
.eslintrc.cjs
module.exports = {
root: true,
env: {
browser: true,
node: true,
commonjs: true,
es6: true,
amd: true,
},
// 指定如何解析语法
parser: 'vue-eslint-parser',
// 优先级低于 parse 的语法解析配置
parserOptions: {
parser: '@typescript-eslint/parser',
ecmaVersion: 'latest',
sourceType: 'module',
jsxPragma: 'React',
ecmaFeatures: {
jsx: true,
},
},
// 继承某些已有的规则
extends: [
'plugin:vue/vue3-recommended',
'plugin:@typescript-eslint/recommended',
'prettier',
'plugin:prettier/recommended',
],
plugins: ['prettier'],
/**
* "off" 或 0 ==> 关闭规则
* "warn" 或 1 ==> 打开的规则作为警告（不影响代码执行）
* "error" 或 2 ==> 规则作为一个错误（代码不能执行，界面报错）
*/
rules: {
// eslint (http://eslint.cn/docs/rules)
'no-var': 'error', // 要求使用 let 或 const 而不是 var
'no-multiple-empty-lines': ['error', { max: 1 }], // 不允许多个空行
'prefer-const': 'off', // 使用 let 关键字声明但在初始分配后从未重新分配的变量，要求使用 const
'no-use-before-define': 'off', // 禁止在 函数/类/变量 定义之前使用它们
// typeScript (https://typescript-eslint.io/rules)
'@typescript-eslint/no-unused-vars': 'error', // 禁止定义未使用的变量
'@typescript-eslint/no-empty-function': 'error', // 禁止空函数
'@typescript-eslint/prefer-ts-expect-error': 'error', // 禁止使用 @ts-ignore
'@typescript-eslint/ban-ts-comment': 'error', // 禁止 @ts-<directive> 使用注释或要求在指令后进行描述
'@typescript-eslint/no-inferrable-types': 'off', // 可以轻松推断的显式类型可能会增加不必要的冗长
'@typescript-eslint/no-namespace': 'off', // 禁止使用自定义 TypeScript 模块和命名空间
'@typescript-eslint/no-explicit-any': 'off', // 禁止使用 any 类型
'@typescript-eslint/ban-types': 'off', // 禁止使用特定类型
'@typescript-eslint/no-var-requires': 'off', // 允许使用 require() 函数导入模块
'@typescript-eslint/no-non-null-assertion': 'off', // 不允许使用后缀运算符的非空断言(!)
// vue (https://eslint.vuejs.org/rules)
'vue/script-setup-uses-vars': 'error', // 防止<script setup>使用的变量<template>被标记为未使用，此规则仅在启用该 no-unused-vars 规则时有效
'vue/v-slot-style': 'error', // 强制执行 v-slot 指令样式
'vue/no-mutating-props': 'error', // 不允许改变组件 prop
'vue/custom-event-name-casing': 'error', // 为自定义事件名称强制使用特定大小写
'vue/html-closing-bracket-newline': 'error', // 在标签的右括号之前要求或禁止换行
'vue/attribute-hyphenation': 'error', // 对模板中的自定义组件强制执行属性命名样式：my-prop="prop"
'vue/attributes-order': 'off', // vue api使用顺序，强制执行属性顺序
'vue/no-v-html': 'off', // 禁止使用 v-html
'vue/require-default-prop': 'off', // 此规则要求为每个 prop 为必填时，必须提供默认值
'vue/multi-word-component-names': 'off', // 要求组件名称始终为 “-” 链接的单词
'vue/no-setup-props-destructure': 'off', // 禁止解构 props 传递给 setup
'vue/component-name-in-template-casing': [
// vue组件转换短横线
'error',
'kebab-case',
{
registeredComponentsOnly: false,
ignores: [],
},
],
},
};
.prettierrc.cjs
module.exports = {
tabWidth: 2,
semi: true,
singleQuote: true,
jsxSingleQuote:true,
endOfLine: 'auto',
printWidth: 80,
};