Problem description:
When using vite to create a vue3 project, you have already selected to add ESLint. After using the pnpm install command (or npm i) to install the project dependency, how should ESLint be configured and used in the project?
Configuration:
In the project root directory, create a. document. This will be the configuration file for ESLint.
Open. File and add the following code to configure ESLint:
= {
root: true,
env: {
node: true,
},
extends: [
'plugin:vue/vue3-essential',
'@vue/typescript/recommended',
'eslint:recommended',
],
parserOptions: {
ecmaVersion: 2020,
},
rules: {
// You can add custom rules or override default rules here'import/first': 'off',//Prevent the first-line report of the red issue// More rules...},
};Make sure your project is already installedeslint-plugin-vue and@vue/eslint-config-standard These two dependencies. If not, run the following command to install:
pnpm install eslint-plugin-vue @vue/eslint-config-standard --save-dev
exist In-housescripts Partially add a command to run ESLint check. You can add it like this:
"scripts": {
"lint:eslint": "eslint . --ext .js,.vue"
}This script command will run ESLint and check all.js and.vue document.
Run with terminalpnpm run lint:eslint The command will perform a format verification on the code.
Notice:
How to ensure that the third step: whether these two dependencies are already installed in your project
Open the terminal and go to your project root directory.
Run the following command to check if these two dependencies are already installed:
pnpm list eslint-plugin-vue @vue/eslint-config-standard
If these two packages are already listed, they are already installed in your project.
If these two packages are not listed, you need to run the following command to install them:
pnpm install eslint-plugin-vue @vue/eslint-config-standard --save-dev
This will use pnpm to install the two dependencies and add them to your project'sdevDependencies middle.
Now you should be able to confirm that these two dependencies are already installed in your project and that you can configure and use ESLint as provided previously
This is the article about ESLint configuration and use in vue3 project. For more related vue3 ESLint configuration content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!