vue项目eslint配置教程

涛哥
其他代码

进行 Vue 项目中的 ESLint 配置可以通过以下步骤实现：

  1. 安装 ESLint 和 Vue 相关插件。
npm install eslint eslint-plugin-vue babel-eslint --save-dev

其中，eslint 是 ESLint 模块，eslint-plugin-vue 是 ESLint 插件，babel-eslint 是解析器，用于解析 ES6 语法。

2. 创建 ESLint 配置文件。 在项目根目录下创建一个名为 .eslintrc.js 的文件，并添加以下配置：

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: ["plugin:vue/essential", "eslint:recommended"],
  parserOptions: {
    parser: "babel-eslint"
  },
  rules: {}
};

其中，root 表示此配置文件是根配置文件，env 表示环境，extends 是继承的规则，parserOptions 是解析器选项，rules 是规则配置。

3. 配置 ESLint 规则。 在 rules 中添加需要启用的规则。例如，如果要启用不允许未使用变量的规则，可以添加以下配置：

rules: {
  "no-unused-vars": "error"
}

其中，"no-unused-vars" 是规则名，"error" 是级别，表示该规则出现错误时会提示。

4. 在 package.json 中添加 NPM 脚本。 在 package.json 中添加以下脚本，用于在命令行中运行 ESLint：

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

其中，--ext .js,.vue 表示要检查的文件类型，src 表示要检查的目录。运行 npm run lint 命令即可检查代码。

5. 在编辑器中安装 ESLint 插件。 在编辑器中安装 ESLint 插件，用于在编辑器中实时检查代码。 以上就是 Vue 项目中 ESLint 的配置教程，需要根据实际情况进行调整。