vue2项目增加eslint配置代码规范示例

Sure, 下面是 "vue2项目增加eslint配置代码规范示例" 的完整攻略介绍。

准备工作

在开始配置eslint之前，需要保证以下两条前置条件。

1. 检查本地是否安装了eslint，若没有安装，则需要先安装。

安装命令：npm install eslint --save-dev

1. 确保本地的项目是基于vue-cli2脚手架创建的，如果不是，则需要先将项目迁移到vue-cli2。

迁移命令：npm install -g @vue/cli-init / vue init webpack my-project

步骤

接下来就可以开始在项目中增加eslint配置代码规范了。步骤如下：

一、在项目根目录下添加一个.eslintrc.js文件。

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

其中：

• root，指示此文件是根配置文件，表示这是eslint的最高命令，该参数可选。
• env，指定了所要启用的环境，我们使用 node 环境，该参数可选。
• extends，表示使用一系列推荐的规则和插件进行规范，该参数可选。
• parserOptions，指定代码的解析器和相关配置，此处设置parser为 babel-eslint。
• rules，表示更改/添加规则。

二、在package.json文件中添加三个scripts。

"scripts": {
  "lint": "eslint --ext .js,.vue src",
  "lint-fix": "eslint --fix --ext .js,.vue src",
  "precommit": "npm run lint-fix && git add ."
},

其中：

• lint，用于eslint检查代码的命令。
• lint-fix，用于eslint检查并修复代码规范的命令。
• precommit，用于将代码的规范检查加入到git pre-commit的钩子中，每次提交前都会自动运行。

三、在项目中安装以下依赖。

npm i -D eslint-plugin-vue babel-eslint eslint-config-prettier eslint-plugin-prettier

其中：

• eslint-plugin-vue和babel-eslint：用于解析.vue文件中的代码。
• eslint-config-prettier和eslint-plugin-prettier：用于规范代码格式。

四、修改.eslintrc.js

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: [
    "plugin:vue/essential",
    "eslint:recommended",
    "prettier",
    "prettier/vue"
  ],
  parserOptions: {
    parser: "babel-eslint"
  },
  rules: {
    "vue/max-attributes-per-line": [
      2,
      {
        "singleline": 10,
        "multiline": {
          "max": 1,
          "allowFirstLine": false
        }
      }
    ],
    "prettier/prettier": [
      "error",
      {
        "printWidth": 120
      }
    ],
    "no-console": "off"
  },
  plugins: ["prettier"]
};

其中：

• plugins，指示使用到的插件，此处使用prettier插件进行代码格式化。
• vue/max-attributes-per-line，用于规定.vue文件中html标签属性的缩进校验和换行。
• prettier/prettier，用于规定代码的具体格式规范，如此处的printWidth属性设置为120。
• no-console，规定console的使用，在这里关闭。

五、尝试lint和lint-fix命令

• 命令行输入 npm run lint，检查代码是否符合规范。
• 命令行输入 npm run lint-fix，检查可能需要修改的代码，并自动修复。

至此，vue2项目增加eslint配置代码规范示例的攻略就完成了。

示例说明

示例1：使用prettier预设代码格式化。

{
  "rules": {
    "prettier/prettier": [
      "error",
      {
        "singleQuote": true,
        "trailingComma": "none",
        "semi": false
      }
    ]
  }
}

该示例设置了一些规则，例如采用单引号、结尾无逗号、无分号等，以保证代码风格的统一性。这些规则可以根据具体需求做更改。

示例2：配置lint命令。

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

该示例配置了lint命令，用于检查src目录下的所有.js和.vue文件的代码规范，可以通过命令 "npm run lint"来执行。