ESLint如何在vue3项目中配置和使用

目录

问题描述：

配置：

注意：

---

问题描述：

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

配置：

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

2. 打开.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',//防止出现首行报红问题
       // 更多规则...
     },
   };
   

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

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

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

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

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

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

注意：

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

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

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

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

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

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

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

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

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