How ESLint is configured and used in vue3 projects

Table of contents

Problem Description:

Configuration:

Notice:

---

Problem Description:

When using vite to create a vue3 project, I have chosen to add ESLint. After the creation is complete, use the pnpm install command (or npm i) to install the project dependencies. How to configure and use ESLint in the project?

Configuration:

1. In the project root directory, create a .eslintrc.jsfile. This will be the configuration file for ESLint.

2. Open .eslintrc.jsthe file, and add the following code to configure 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. Make sure you have installed eslint-plugin-vueand @vue/eslint-config-standardthese two dependencies in your project. If not, run the following command to install it:

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

4. In package.jsonthe scriptssection add a command to run ESLint validation. Can be added like this:

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

   This script command will run ESLint and check all .jsand .vuefiles.

5. Using the terminal to run  pnpm run lint:eslint the command will perform a format check on the code.

Notice:

How to ensure the third step: whether these two dependencies have been installed in your project

1. Open a terminal and go to your project root directory.

2. Run the following command to check whether these two dependencies are installed:

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

   If these two packages are listed, they are already installed in your project.

3. If these two packages are not listed, you need to run the following commands to install them:

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

   This will use pnpm to install these two dependencies and add them to your project's devDependencies.

4. You should now be able to confirm that these two dependencies are installed in your project and follow the steps provided earlier to configure and use ESLint