vue-cli构建的项目如何手动添加eslint配置

首先，我们需要明确以下几个概念：

• ESLint：是一款JavaScript代码的静态检查工具，它能够扫描代码中的语法错误、潜在的问题以及代码风格并给出提示或警告，从而帮助开发者写出更加规范和优秀的代码。
• vue-cli：是Vue.js官方提供的一个构建工具，它能够帮助我们快速创建一个Vue.js项目的基础结构和配置。

基于以上概念，我们可以将添加ESLint配置的过程分为以下几个步骤：

步骤一：安装ESLint相关的依赖包

在vue-cli构建的项目中，我们可以使用npm或yarn来安装ESLint相关的依赖包，我们以npm为例：

npm install eslint eslint-plugin-vue --save-dev

其中，eslint是ESLint本身的依赖包，eslint-plugin-vue则是用于支持Vue.js语法检查的插件。

步骤二：添加ESLint配置文件

在vue-cli构建的项目中，我们可以通过创建一个.eslintrc.js文件来添加ESLint配置。在该文件中，我们可以设置哪些规则需要启用或禁用，也可以设置一些全局变量。

以下是一个示例，规则选用的配置是Airbnb的规则：

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: ['plugin:vue/essential', '@vue/airbnb'],
  parserOptions: {
    parser: 'babel-eslint',
  },
  rules: {
    'no-console': 'off',
    'no-debugger': 'off',
    'max-len': ['error', { 'code': 120 }],
    'linebreak-style': 'off',
    'import/extensions': 'off',
    'import/no-unresolved': 'off',
    'import/prefer-default-export': 'off',
    'consistent-return': 'off'
  },
};

在该示例中，我们配置了一些规则，例如禁止使用console和debugger语句、限制行长度最大为120、关闭行尾风格检测、关闭import扩展和无解析路径错误提示等等。

步骤三：配置package.json

在步骤二中，我们添加了ESLint配置文件，但是我们需要告诉vue-cli使用该配置文件。为此，我们需要在package.json文件中添加以下内容：

"eslintConfig": {
  "extends": [
    "./.eslintrc.js"
  ]
},

以上配置将告诉vue-cli使用.eslintrc.js配置文件来进行ESLint检查。

示例一

假设我们需要禁止函数名使用下划线的命名方式。我们在.eslintrc.js配置中添加以下规则：

rules: {
  'no-console': 'off',
  'no-debugger': 'off',
  'max-len': ['error', { 'code': 120 }],
  'linebreak-style': 'off',
  'import/extensions': 'off',
  'import/no-unresolved': 'off',
  'import/prefer-default-export': 'off',
  'consistent-return': 'off',
  'camelcase': ['error', { 'properties': 'never' }]
},

以上配置中，我们启用了camelcase规则，并将properties选项设置为never，表示不允许函数名使用下划线的命名方式。

示例二

假设我们需要允许全局变量$的使用。我们在.eslintrc.js配置中添加以下内容：

env: {
  browser: true,
  node: true,
  jquery: true,
},

在以上配置中，我们添加了jquery环境，这样ESLint将会允许全局变量$的使用。

以上就是手动添加ESLint配置的完整攻略，希望对你有所帮助。