您的位置:首页 > 财经 > 产业 > Vue3框架搭建4:配置说明-eslint配置

Vue3框架搭建4:配置说明-eslint配置

2024/10/6 14:31:05 来源:https://blog.csdn.net/u013035708/article/details/140353588  浏览:    关键词:Vue3框架搭建4:配置说明-eslint配置

配置说明:

.eslintrc.cjs:

/* eslint-env node */
//node环境,并引入一个模块解析补丁
require('@rushstack/eslint-patch/modern-module-resolution')module.exports = { //继承其他配置root: true,  //跟配置文件,ESLint不会在父目录中寻找其他配置文件'extends': ['plugin:vue/vue3-essential', //使用 Vue 3 的基本规则集'eslint:recommended', //使用 ESLint 推荐的核心规则集'@vue/eslint-config-typescript', //对 TypeScript 的支持'@vue/eslint-config-prettier/skip-formatting'// Vue 的 Prettier 配置,但跳过了格式化规则。所以允许使用 Prettier 进行格式化,不与 ESLint 的规则冲突。],/* *指定使用 vue-eslint-parser 来解析 .vue 文件*默认情况下,ESLint 使用 Espree 作为其解析器*Espree 主要处理标准的 JavaScript 语法*它无法正确解析 Vue 单文件组件(.vue 文件)的特殊语法*它也不能处理 TypeScript 语法*所以,最好设置一下*/parser: 'vue-eslint-parser',parserOptions: {ecmaVersion: 'latest' //ESLint 将支持最新的 ECMAScript 特性},rules: {'@typescript-eslint/prefer-optional-chain': 'off', //关闭使用可选链操作符 (?.) 来替代多层条件检查。  'prettier/prettier': ['error', { endOfLine: 'auto' }], //允许 Prettier 自动处理行尾符'vue/v-on-event-hyphenation': 'off', //允许自由选择事件名的命名风格,@click-on与@clickOn都可以}
}

补充:

忽略文件

  • 使用 .eslintignore 文件可以指定 ESLint 应该忽略的文件和目录

与其他工具集成:

  • Prettier:使用 eslint-config-prettier 来解决 ESLint 和 Prettier 的冲突
  • TypeScript:@typescript-eslint/parser(解析器) 与 @typescript-eslint/eslint-plugin(插件)

在项目中的使用:

  • 通常在 package.json 中添加脚本:
"scripts": {"lint": "eslint .",
}

常见命令:

  • eslint .:检查当前目录下所有文件
  • eslint . --fix:自动修复可以修复的问题

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com