详解vue-cli下ESlint 配置说明

下面我将为你提供详细的“详解vue-cli下ESlint 配置说明”的攻略。

1. 前言

ESLint 是一个可以帮助我们约束代码风格的工具，Vue CLI 集成了 ESLint，我们可以直接在 Vue 项目里进行代码风格检查。如果要通过 ESLint 实现代码的自动修复功能，需要借助于 Prettier 这个代码格式化工具。

2. ESLint 配置文件

在 Vue CLI 3 以后的版本中，ESLint 配置文件不再是 .eslintrc.js，而是 .eslintrc.js 和 .eslintignore 两个文件。其中，.eslintrc.js 是 ESLint 的配置文件，用于控制代码风格的相关规则和选项。

下面是一个简单的 .eslintrc.js 配置文件示例：

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: [
    'plugin:vue/essential',
    'eslint:recommended',
    '@vue/prettier'
  ],
  parserOptions: {
    parser: 'babel-eslint'
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
  }
}

这个配置中常用的几个选项：

• root：表示此文件是 ESLint 配置文件，不再向上查找其他 .eslintrc.js 文件。
• env：指定代码运行的环境。
• extends：指定需要的配置扩展。
• parser：指定解析器。
• rules：指定具体的规则。

3. ESlint 常见规则

下面是一些常用的 ESLint 规则：

• no-console：禁止在代码中使用 console。
• no-debugger：禁止在代码中使用 debugger。
• indent：控制代码缩进。
• quotes：控制字符串引号。
• semi：控制语句结束符。
• eol-last：强制文件以空行结束。
• no-trailing-spaces：禁止行尾有空格。
• eqeqeq：强制使用 === 和 !==。
• spaced-comment：注释符后需要一个空格。
• no-unused-vars：检测未使用过的变量。

4. Prettier 配置文件

Prettier 是一个流行的代码格式化工具，它可以帮助我们统一代码的风格，使得团队成员的代码风格一致。

下面是一个简单的 .prettierrc.js 配置文件示例：

module.exports = {
  printWidth: 80,
  tabWidth: 2,
  useTabs: false,
  semi: true,
  singleQuote: true,
  trailingComma: 'none',
  bracketSpacing: true,
  arrowParens: 'avoid'
}

这个配置中常用的几个选项：

• printWidth：指定代码行宽。
• useTabs：是否使用 tab 缩进。
• semi：是否使用语句结束符。
• singleQuote：是否使用单引号。
• trailingComma：是否在多行数组和对象字面量中使用逗号。
• bracketSpacing：是否在对象字面量的大括号之间使用空格。
• arrowParens：是否使用箭头函数的参数有括号包裹的形式。

5. 集成 ESLint 和 Prettier

一般来说，在 Vue 项目中同时使用 ESLint 和 Prettier 是比较常见的。因为两个工具都是关于代码风格方面的工具，所以它们可以互补。下面是一个简单的配置流程：

1. 安装必要插件：

npm install eslint eslint-config-prettier eslint-plugin-prettier babel-eslint prettier --save-dev

1. 配置 .eslintrc.js 文件：

module.exports = {
  env: {
    browser: true,
    es6: true,
    node: true
  },
  extends: [
    'eslint:recommended',
    'plugin:vue/recommended',
    'prettier',
    'prettier/vue'
  ],
  globals: {
    Atomics: 'readonly',
    SharedArrayBuffer: 'readonly'
  },
  parserOptions: {
    ecmaVersion: 2018,
    sourceType: 'module'
  },
  plugins: ['vue', 'prettier'],
  rules: {
    'prettier/prettier': 'error'
  }
}

1. 配置 .prettierrc.js 文件：

module.exports = {
  singleQuote: true,
  semi: false
}

1. 在 package.json 文件中添加下面两个脚本：

{
  "scripts": {
    "lint": "eslint --fix --ext .js,.vue src",
    "format": "prettier --write '**/*.vue', '**/*.js'"
  }
}

这里的 lint 和 format 分别是 ESLint 和 Prettier 的命令，--fix 和 --write 表示自动修复。

至此，我们就成功地集成了 ESLint 和 Prettier。在项目中，我们可以使用下面两个命令：

npm run lint   // 检查并自动修复 ESLint 的问题
npm run format // 格式化代码

6. 示例说明

这里提供两个关于 ESLint 和 Prettier 的例子：

6.1 配置 vue.config.js

在 Vue 项目中，我们通常会使用 vue.config.js 文件来配置项目的一些细节。然而，在规则中却可能会提示错误。这时候我们就可以使用注释来忽略这些错误。

module.exports = {
  lintOnSave: false
  // eslint-disable-next-line
  // lintOnSave: process.env.NODE_ENV !== 'production'
}

6.2 配置 Vuex 中使用 mutation 的方式

在 Vuex 中，在 mutations 中修改 state 的方式有两种：直接调用 state 中的数据，或者通过解构的方式调用 state 中的数据。这两种方式在 ESLint 规则中被认为是不安全的：

// This is considered unsafe:
mutations: {
  someMutation(state) {
    state.a = 1
    state.b = 2
  }
}

// This is considered unsafe:
mutations: {
  someMutation({ a, b }) {
    a = 1
    b = 2
  }
}

解决方案是，将不安全的方式改为安全的执行方式：

mutations: {
  someMutation(state) {
    state.a = 1
    state.b = 2
  },

  // Safe way:
  someMutation({ state }) {
    state.a = 1
    state.b = 2
  }
}

至此，以上就是关于“详解vue-cli下ESlint 配置说明”的攻略内容，希望对你有所帮助。