vue3项目中ESLint配置和使用

问题描述：

在用vite创建vue3项目时已经选择了添加ESLint，创建完成后使用 pnpm install命令（或者npm i）安装了项目依赖之后，ESLint在项目中需要怎样配置和使用呢？

配置：

在项目根目录中，创建一个 .eslintrc.js 文件。这将是ESLint的配置文件。

打开 .eslintrc.js 文件，并添加以下代码来配置ESLint：

module.exports = {
root: true,
env: {
node: true,
},
extends: [
'plugin:vue/vue3-essential',
'@vue/typescript/recommended',
'eslint:recommended',
],
parserOptions: {
ecmaVersion: 2020,
},
rules: {
// 在这里可以添加自定义规则或覆盖默认规则
'import/first': 'off',//防止出现首行报红问题
// 更多规则...
},
};

确保你的项目中已经安装了 eslint-plugin-vue 和 @vue/eslint-config-standard 这两个依赖。如果没有，请运行以下命令进行安装：

pnpm install eslint-plugin-vue @vue/eslint-config-standard --save-dev

在 package.json 中的 scripts 部分添加一个命令来运行ESLint校验。可以像下面这样添加：

"scripts": {
"lint:eslint": "eslint . --ext .js,.vue"
}

这个脚本命令会运行ESLint并检查所有的  .js  和  .vue  文件。

使用终端运行  pnpm run lint:eslint  命令，将会对代码进行一次格式校验。

注意：

如何确保第三步：你的项目中是否已经安装了这两个依赖

打开终端，并进入你的项目根目录。

运行以下命令来检查是否已经安装这两个依赖：

pnpm list eslint-plugin-vue @vue/eslint-config-standard

如果这两个包已经被列出，说明它们已经安装在你的项目中。

如果这两个包没有被列出，你需要运行以下命令来安装它们：

pnpm install eslint-plugin-vue @vue/eslint-config-standard --save-dev

这将会使用pnpm来安装这两个依赖，并将它们添加到你的项目的  devDependencies  中。

现在，你应该可以确认这两个依赖已经安装在你的项目中，并且可以按照之前提供的步骤来配置和使用ESLint

到此这篇关于vue3项目中ESLint配置和使用的文章就介绍到这了,更多相关vue3 ESLint配置内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！