目录
问题描述:
配置:
注意:
问题描述:
在用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