vue项目整合Eslint和stylelint规范代码

最近在搭建项目框架，想着上一个项目代码风格各异，就想着在新项目中引入Eslint来规范团队成员代码风格，保持统一，也方便大家维护代码，减少不必要的错误。前端应用愈加复杂，代码规范问题必须通过强制的方式保持统一。以下是团队逐渐摸索出的一些配置，各取所需。

在用vue-cli3搭建项目的过程中就会问你是否需要Eslint，选择就好来。如果没有选择后期又想加入eslint，可以手动安装Eslint的相关依赖。

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

需要注意：Node.js (>=6.14), npm version 3+。

在项目根目录下新建一个文件，名.eslintrc.js。下面是个人的一些配置，可以自行参考。

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true,
    es6: true
  },
  extends: ["eslint:recommended", "plugin:vue/essential", "@vue/prettier"],
  rules: {
    "generator-star-spacing": "off",
    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
    "vue/no-parsing-error": [
      2,
      {
 "unexpected-solidus-in-tag": false
      }
    ]
  },
  parserOptions: {
    parser: "babel-eslint",
    ecmaVersion: 7,
    sourceType: "module",
    ecmaFeatures: {
      // 添加ES特性支持，使之能够识别ES6语法
      jsx: true
    }
  }
};

如果一些文件不需要Eslint的校验，可以配置一个.eslintignore，里面写上需要排除的文件。

/build/
/config/
/dist/
*.{js,jsx,vue}": [
      "prettier --tab-width 2 --write",
      "vue-cli-service lint --fix",
      "git add"
    ]
  }
...

这样就可以实现在提交的时候校验，保证错误的代码无法提交。

到目前为止，项目中就整合进了Eslint校验，prettier美化代码，提交hooks代码检查。

• Eslint
• stylelint
• stylelint指南